ムラゴン ホーム
Astroの本質構造
Astroは「高速なWebサイトを作るための設計思想」が明確にあるフレームワークです。単なるテンプレートエンジンでもなければ、ReactのようなSPAフレームワークとも違います。ここを曖昧に理解していると、使い方を間違えます。 結論から言うと、Astroの本質は **「必要なものだけをクライアントに... 続きをみる
htmlのムラゴンブログ
-
-
フォントサイズ指定の「rem」と「%」の関係
WebサイトのCSSでフォントサイズを指定する方法はいくつかありますが、その中でもよく使われるのが rem と %（パーセント） です。 どちらも「相対単位」ですが、基準が違うため仕組みを理解しておかないと意図しないサイズになることがあります。 この記事では remと%の関係 を整理して解説します。... 続きをみる
-
検証ツールで出来ることとは
Web制作やフロントエンド開発をしていると、必ず使うことになるのが「検証ツール」です。 Google Chromeなどのブラウザに標準で搭載されている機能で、Webサイトの構造や動作をその場で確認・分析できる開発者向けのツールです。 普段サイトを閲覧しているだけでは見えないHTMLやCSS、Java... 続きをみる
-
-
バニラでの記述でもSassは使えるのか
結論から言うと、使えます。 SassはPHPやWordPress専用のものではなく、HTML＋CSSだけの、いわゆる“バニラ”な環境でも問題なく使えます。 誤解されがちですが、Sassは「特定のフレームワークに依存する技術」ではありません。あくまでCSSを効率よく書くためのプリプロセッサです。最終的... 続きをみる
-
nth-child はどういう時に使う？
CSSを書いていると、 「この中の○番目だけデザイン変えたい」 「奇数行と偶数行で見た目を変えたい」 そんな場面に必ず出てきます。 そのときに使うのが nth-child です。 nth-child とは何か nth-child は、 「親要素の中にある子要素の順番」に注目してスタイルを当てるための... 続きをみる
-
Resendでできること
Webサービスやアプリを作っていると、 「ユーザーにメールを送りたい」という場面は必ず出てきます。 例えば、 会員登録後の確認メール 予約完了のお知らせ パスワード再設定メール お問い合わせへの自動返信 こういったアプリから送るメールを、 シンプルかつ安全に実装できるのが Resend です。 Re... 続きをみる
-
バニラHTML・バニラJavaScriptの「バニラ」って何？
Web制作やプログラミングの話をしていると、 「バニラJavascriptで書く」 「これはバニラHTMLだけでいけます」 …こんな言い方を見かけることがありますよね。 この“バニラ（vanilla）”って、いったい何を意味しているのか？ 実はこれ、「何も混じっていない素の状態」 を表す言葉です。 ... 続きをみる
-
SEO対策としてHTMLに書くべき内容
ホームページのSEO対策というと、キーワード選定や被リンクの話が多くなりがちですが、まずは HTMLの中身そのものを最適化すること が非常に大切です。どれだけ内容が良くても、検索エンジンに正しく伝わっていなければ評価されません。 この記事では、HTMLファイルに書いておくべき基本のSEO対策を、初心... 続きをみる
-
loading="lazy" の正しい使い方
Webサイトの読み込み速度を改善したい時に、もっとも簡単で効果が高い施策のひとつが 画像の遅延読み込み（Lazy Load） です。HTMLの画像タグに loading="lazy" を付けるだけで、多くの画像を一度に読み込まず、必要になったタイミングで読み込みが開始されるようになります。 この記事... 続きをみる
-
-
YouTube動画の埋め込み方が…←gooの話
もうじき投稿が出来なるけど、levieが使っているノートパソコンでは、YouTube動画を共有クリックでgooの埋め込みが選択できたから、貼る事が出来たんだけど、その共有リストからいつの間にかgooが外されていた～。ん??、もしかしてムラゴンにインポートした投稿上のYouTubeは貼り直さずとも聴け... 続きをみる
-
バニラのHTMLでコンポーネント化する方法
Webサイトを制作していると、ヘッダー・フッター・ナビゲーションなど共通部分をまとめて管理したいと思う場面が多くあります。 ReactやAstro、WordPressのようなフレームワークを使わなくても、実は純粋なHTML（バニラHTML）でもコンポーネント化する手段はいくつか存在します。ここでは代... 続きをみる
-
ムラゴンblogへの引っ越し : 解説再び
gooから他所への引っ越しを、もう大勢の人が済ませているだろうと思う。当blogは4月になんとなくID登録をしてみて、時々テスト投稿をして操作を練習していた…ムラゴン…に引越しを決めた8月上旬だった。それまではgooとは違う内容を時たま投稿したり丸ごと移植して操作練習をしていた感じ(微笑)8月上旬に... 続きをみる
-
ムラゴンでの調整作業は ➕＋
gooブログ→ムラゴンへの、エクスポート、インポートは、特に苦もなくすんなり移行は済んだ…。投稿量、文字数、挿入した画像数が、思ったほど多くなかったからかな。ファイルは20MBと7MBの2つのみだった事は前に書いたけど、gooブログはムラゴンへの移行推奨は今だにしてないから、ホントにあっという間にエ... 続きをみる
-
HTMLでheaderやfooterを共通パーツとして読み込む理由
Webサイトを制作する際、ほとんどのページに共通して配置されるパーツがあります。代表的なのが「ヘッダー（header）」と「フッター（footer）」です。 これらを共通パーツとして管理し、複数のページから読み込む方法には、以下のようなメリットがあります。 1. 更新作業が一箇所で完結する ヘッダー... 続きをみる
-
#
html
-
ブログに使っているCSS・スクリプトまとめ
-
Python GUIが劇的に美しく！pywebview + HTML/CSSで「Web・GUI二刀流」ツールを作る方法
-
HTMLとJavascriptの組み合わせではなく、Reactを使うメリットは何ですか。
-
ブラウザのブックマークバーに独自アイコンを表示する方法
-
X-Frameとは何のためにありますか
-
無料のレンタルサーバー使ってみる(∩´∀｀)∩(再) XREA【後編】
-
Markdown HTML Converter Tool - Client-Side Parser and Free Online Converter | hidekazu-konishi.com
-
スマホでプログラミングはできる？スマホで開発ができるツール6選
-
本気でプログラミングするならパソコンの開発環境を整えよう！
-
思ってたのと違う!? AIに本当に“理想のアプリ”を作らせる方法①
-
ブログ画像の最適化に便利！Webで使える無料リサイズツール「画像リサイズマシーン」
-
スマホのブラウザで遊べる！シューティングゲーム「ぬこショット」【無料＆DL不要】
-
【初心者向け】HTMLの命名規則｜迷わないクラス名の付け方と一覧表（outer・wrapper・container・inner・content編）
-
右端から無限ループで流れる横スクロール｜JavaScript不要！HTML＆CSSだけで実装する方法と実例
-
【第3話】JavaScriptで動く、反応するWebアプリを作ってみる
-
-
webエンジニアはデザインも出来た方がいい？
現在HTMLやCSSを学習されている方に、「デザインも自分で出来た方がいいですか？」というご質問をよく頂きます。 結論、「デザインが出来るに越したことはないが、絶対ではない」と考えています。 デザインが出来た方がいい理由 自分一人でサイトを作るとなった時、デザインまで出来た方が稼げるから デザインが... 続きをみる
-
ブログを始めてよかったこと3選
1: まずは、植物に詳しくなったこと グーグルレンズの登場も大きかったです。 iPhoneでさっと写真を撮って、さっと調べる。 サクサク進みます。 庭の植物、道端の草花・・ 備忘録を兼ねて、ブログにポストすることで、さらに興味が湧く という良い循環。 2: いろいろなものの考え方に触れることができた... 続きをみる
-
突然ですが、ブログはじめます！
ブログにたどり着いたぁ！ ブログ書きたいって思いついちゃいました！ WEBデザインの勉強をしているので、ワードプレスを調べてたんです。 いつのまにかブログの書き方ページになり、読み入ってしまったよ。 ワードプレスを設定しようかなと思って読み進めたら、 初心者はまず登録して書き始める事が大事らしい。う... 続きをみる
-
どうしてこうなった？（11月6日）
こんばんは ワードプレスの方で公開しましたので こちらにも投稿したいと思います。 下のリンク先からどうぞ
-
画像の扱い方・JPGとPNGの違い - スマホ対応
画像の重さを携帯表示に合わせてあげる事が求められる時代です。JPGとPNGの違いと画像変換 テクニック SEO アクセシビリティ アクセシビリティとは、英語で Accessibility 近づきやすさ 文字のサイスや色コントラスト見やすさ サイト構造の利便性案内が適切であること 画像表示に時間を取ら... 続きをみる
-
-
webページ更新計画
デジタル百葉箱のwebページ、自分で見てみて改良ポイントがいくつかあります。 index.html からリンクしている 過去のデータのページ（その1） で、日付を選択する部分。 これが、初期設定値が2019年1月1日になっています。 これを「今日」にしたい。（チャレンジ1） PHPとかジャバスクリプ... 続きをみる
-
gnuplotのトーフ化問題解決編
この問題に丸一日潰れました。 文字化けです。 いろいろググりました。 いろいろ試してみました。 結果だけ言うと、次の3点で解決しました。 gnuplotに日本語フォントを指定する。 gnuplotに渡すスクリプトを別ファイルにする。 ファイルが違うと変数は受け渡せない？みたいなので、いろいろじか打ち... 続きをみる
-
ほどほどにwebページ完成
やりました。webページが無事表示できました。 しかもラズパイ上じゃなくて、同じネットワークのこのPCから見れます。 まあ当たり前といえば当たり前なんですけど、自力でやり遂げた嬉しさがあふれます。 寒いので鼻水もあふれます。 index.htmlに表示される写真画像は毎時0,10,20,30,40,... 続きをみる
-
サイトを作成する--説明編--
皆さんこんにちは。 最近では、小学校の授業でプログラミングが科目としてあったりしていますが、御覧の皆さんは、プログラミングはできますか？ サイトは大まかに分けると2つに分類されます。 1つ目はサイトの表側です。よく皆さんが目にしている部分ですね！ 2つ目はサイトの裏側です。ログインだとか会員登録だと... 続きをみる
翔
サイト作成を教えます
2016/08/28 12:28
-
これから、お仲間入りして下さい！！
手芸の好きです。編み物や洋裁をやってます。皆さんの作品を見せて下さいね。宜しくお願いします！！
-
#
BDレーベル
-
雪風 YUKIKAZE
-
雪風 YUKIKAZE
-
劇場版 転生したらスライムだった件 蒼海の涙編
-
劇場版 転生したらスライムだった件 蒼海の涙編
-
ドラゴンクエスト ダイの大冒険
-
ジョジョの奇妙な冒険 ストーンオーシャン
-
ヒックとドラゴン（実写版）
-
艦隊これくしょん -艦これ- いつか静かな海で
-
ヒックとドラゴン（実写版）
-
艦隊これくしょん -艦これ- いつか静かな海で
-
映画 キミとアイドルプリキュア♪ お待たせ キミに届けるキラッキライブ
-
映画 キミとアイドルプリキュア♪ お待たせ キミに届けるキラッキライブ
-
仮面ライダーガヴ お菓子の家の侵略者
-
仮面ライダーガヴ お菓子の家の侵略者
-
ナンバーワン戦隊ゴジュウジャーVSブンブンジャー
-
-
#
HDD
-
パソコンの仕組みをわかりやすく解説！初心者が知っておきたいパーツの役割
-
SSDとは？HDDとの違いや寿命を「会社」に例えて解説！
-
外部Discユニットとの接続を"eSATA"から"SAS"に変更（1）：サーバーにSASポートを増設[2]
-
テレビ・レコーダー向け3.5インチ外付けHDD
-
テレビ・レコーダー向け3.5インチ外付けHDD
-
テレビ・レコーダー向け3.5インチ外付けHDD
-
その手にはノラヌコさんが衝動的にSSDを購入しました?(笑)
-
PC吹っ飛んでた～GPTは神アイテム～☆
-
お米の国の人だから！＆映画と小説の雑談
-
【VirtualBox/FreeBSD】”13.4->13.5”に”buildworld”でマイナーアップデート［2］：「(3)Update fetch後にbuildworldテスト」
-
【VirtualBox/FreeBSD】”13.4->13.5”に”buildworld”でマイナーアップデート［2］：「(2)buildworldテスト」
-
テレビ・レコーダー向け3.5インチ外付けHDD
-
macでフォーマットした外付けHDDをwindowsに認識させる方法はありますか。
-
テレビ・レコーダー向け3.5インチ外付けHDD
-
テレビ・レコーダー向け3.5インチ外付けHDD
-
