ムラゴン ホーム
JavaScriptが動いたり動かなかったりするのはなぜ？読み込み順の基本を理解しよう
ボタンを押したらメニューを開く処理を作ったのに、何も起こらない。 同じJavascriptでも、ファイルを読み込む場所を変えたら突然動くようになった。 Web制作では、このような問題がよく発生します。 原因の一つが、HTMLとJavascriptの読み込み順です。Javascriptが対象の要素より... 続きをみる
htmlのムラゴンブログ
-
-
ローカルでは画像が見えるのに本番で消えるのはなぜ？ファイルパスの基本
パソコン上で制作しているときは正常に表示されていた画像が、サーバーへアップロードすると突然表示されなくなることがあります。 CSSが読み込まれない、リンク先が見つからない、Javascriptだけ動かないといった問題も、ファイルパスの間違いが原因かもしれません。 ファイルパスとは、HTMLから見て画... 続きをみる
-
HTMLのmainタグは本当に必要？役割と正しい使い方を初心者向けに解説
Webサイトをコーディングしていると、ページの内容を囲むためにmainタグが使われていることがあります。 一方、mainタグを使わず、すべてdivタグで囲んでも画面上の見た目は変わりません。そのため、「mainタグはなくてもよいのでは？」と感じる人もいるでしょう。 mainタグは、レイアウトを作るた... 続きをみる
-
リンクとボタンは何が違う？見た目が同じでも使い分ける理由
Webサイトには、「詳しく見る」「お問い合わせ」「送信する」「メニューを開く」など、クリックできる要素が数多くあります。 見た目はいずれもボタンのようにデザインされることがありますが、HTMLではリンクとボタンを目的に応じて使い分ける必要があります。 どちらを使ってもクリックできるように実装すること... 続きをみる
-
JavaScriptはいつ必要？Webサイトで担当している役割を初心者向けに解説
Web制作を学び始めると、HTMLやCSSと一緒にJavascriptという言葉をよく目にします。 HTMLで文章や画像を配置し、CSSで見た目を整えることは理解できても、Javascriptが何を担当しているのか分かりにくい人もいるかもしれません。 Javascriptは、Webサイトに動きや処理... 続きをみる
-
HTMLの見出しタグは文字を大きくするためのものではない
Webサイトを制作していると、ページ内のタイトルや各セクションの見出しに、h1やh2などの見出しタグを使用します。 ブラウザでは見出しタグを付けた文字が大きく、太く表示されるため、「文字の見た目を変えるためのタグ」と考えてしまう人もいるかもしれません。 しかし、見出しタグの本来の役割は文字を大きくす... 続きをみる
-
STUDIOはコードも書けるのか
最近、ノーコードWeb制作ツールの「STUDIO」を触る機会がありました。 STUDIOは基本的に画面上でボックスやテキスト、画像などを配置してWebサイトを作っていくツールです。 そこで使っていて気になったのが、 「STUDIOってHTMLやCSSを書けるの？」 ということでした。 普段WordP... 続きをみる
-
テンプレートパーツを読み込むメリット｜WordPress制作でファイルを分ける理由
WordPressでオリジナルテーマを作っていると、 「この部分、別ファイルに分ける必要ある？」 と思うことがあります。 たとえば、固定ページを作るときに、 page-about.php の中へすべてのHTMLを書くこともできます。 それでもサイト自体は動きます。 ですが、実際のWordPress制... 続きをみる
-
HTML・CSS・JavaScriptの違いを超簡単に説明
HTML・CSS・Javascript。この3つはWebサイトを作る時によく出てくる言葉ですが、最初はかなり混乱しやすいです。 難しく考えなくて大丈夫です。 一言でいうと、 HTML＝骨組み CSS＝見た目 Javascript＝動き です。 家に例えるとかなりイメージしやすくなります。 HTMLは... 続きをみる
-
「html:5」と「!」の違い
HTMLを書き始めたばかりの方が、VS Codeなどでコード補完を使う際によく疑問に思うのが、 「html:5」と「!」って何が違うの？ という点です。 どちらもHTMLのひな形を素早く生成できますが、使い方や現在の主流には違いがあります。 今回は、その違いをわかりやすく解説します。 html:5と... 続きをみる
-
-
Astroの本質構造
Astroは「高速なWebサイトを作るための設計思想」が明確にあるフレームワークです。単なるテンプレートエンジンでもなければ、ReactのようなSPAフレームワークとも違います。ここを曖昧に理解していると、使い方を間違えます。 結論から言うと、Astroの本質は **「必要なものだけをクライアントに... 続きをみる
-
フォントサイズ指定の「rem」と「%」の関係
WebサイトのCSSでフォントサイズを指定する方法はいくつかありますが、その中でもよく使われるのが rem と %（パーセント） です。 どちらも「相対単位」ですが、基準が違うため仕組みを理解しておかないと意図しないサイズになることがあります。 この記事では remと%の関係 を整理して解説します。... 続きをみる
-
検証ツールで出来ることとは
Web制作やフロントエンド開発をしていると、必ず使うことになるのが「検証ツール」です。 Google Chromeなどのブラウザに標準で搭載されている機能で、Webサイトの構造や動作をその場で確認・分析できる開発者向けのツールです。 普段サイトを閲覧しているだけでは見えないHTMLやCSS、Java... 続きをみる
-
-
バニラでの記述でもSassは使えるのか
結論から言うと、使えます。 SassはPHPやWordPress専用のものではなく、HTML＋CSSだけの、いわゆる“バニラ”な環境でも問題なく使えます。 誤解されがちですが、Sassは「特定のフレームワークに依存する技術」ではありません。あくまでCSSを効率よく書くためのプリプロセッサです。最終的... 続きをみる
-
#
html
-
Processing のシミュレーション、ブラウザで♪ 続き・・・
-
Bloggerで独自のクレジットをHTMLで作る方法
-
【今日の占い】サイドバーに設置しました♪毎日引いて元気をチャージ✨
-
FC2
-
ブログのタイトルの【文字の色を変える】方法
-
htmlとcssの組み合わせは意匠権になりうる？
-
アメブロ 「本文/メッセージボード HTML編集」の苦悩
-
バージョンアップした『アクアリウム的な感じ』のコード
-
InnerHTMLって使ってはいけないの？
-
【HTML】ARっぽいHTMLのひな型
-
リンクつきテキストの文字の色が、変化してしまった場合の修正方法…基礎編 その2
-
久々のＨＴＭＬ（とｃｓｓ）編集
-
DOMとJavascriptの関係性
-
Python GUIが劇的に美しく！pywebview + HTML/CSSで「Web・GUI二刀流」ツールを作る方法
-
HTMLとJavascriptの組み合わせではなく、Reactを使うメリットは何ですか。
-
-
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. 更新作業が一箇所で完結する ヘッダー... 続きをみる
-
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
-
これから、お仲間入りして下さい！！
手芸の好きです。編み物や洋裁をやってます。皆さんの作品を見せて下さいね。宜しくお願いします！！
-
#
マイコン
-
#
PHP
-
-
PHPに認証不要の遠隔コード実行脆弱性2件、CVSSv4 9.2。緊急パッチ公開
-
全世界のシステム担当者、がんばれ！！
-
PHP、重大な脆弱性2件を緊急修正へ。10月21日23時の公開を予告
-
AWS LambdaがPHPをサポートしていない理由って何？
-
PHPとPerlでは配列変数を変数に代入してもシャローコピーされない
-
Gemini 監修によるパクリサイト対策を実施
-
［WordPress］PHPバージョンを5.3CGIから7.4、8.3CGIへバージョンアップしてみた
-
「PHPカンファレンス 2026」参加レビュー | 学び・セッション感想まとめ
-
「Laravel Live Japan 2026 Day1」参加レビュー | 学び・セッション感想まとめ
-
WordPress のシステム最適化で、サイトの表示パフォーマンスが PageSpeed Insights スコア値で73から96へと劇的に改善！
-
PHPローカル開発環境構築対応 XAMPP 2026
-
PHPでCSVデータをCocoonテーマ（WordPress）で使えるHTMLテーブルに変換対応
-
PHPエンジニア向けおすすめ転職エージェント厳選5選！
-
WordPress高速化設定
-
