エラー辞典
🌐 HTML のよくあるエラー
❶ スタイルが反映されない
症状：CSS ファイルを作ったのに、文字色や背景色が変わらない。
原因：HTML ファイルに <link> タグが書かれていない、またはファイル名が間違っている。
対処法：<head> の中に <link rel="stylesheet" href="style.css"> があるか確認。href のファイル名と実際の CSS ファイル名が一致しているか確認する。
🔍 検索キーワード：CSS 反映されない link タグ
❷ 画像が表示されない
症状：<img> タグを書いたのに、画像の代わりに「×」や空白が表示される。
原因：src に書いたファイルパスが間違っている、または画像ファイルがプロジェクトフォルダに入っていない。
対処法：画像ファイルが HTML ファイルと同じフォルダにあるか確認。src="photo.jpg" のファイル名が実際のファイル名（拡張子含む）と一致しているか確認する。
🔍 検索キーワード：HTML 画像 表示されない src パス
❸ ページのレイアウトが崩れる
症状：文字が変な場所に表示される、ページ全体の見た目がおかしい。
原因：タグの閉じ忘れ（例：<p> を書いたが </p> がない）。
対処法：開発者ツール（F12）の「Elements」タブで HTML の構造を確認。開いたタグに対応する閉じタグがあるか見直す。
🔍 検索キーワード：HTML タグ 閉じ忘れ レイアウト崩れ
🎨 CSS のよくあるエラー
❹ スタイルが特定の要素に当たらない
症状：CSS を書いたのに、一部の要素だけスタイルが変わらない。
原因：セレクタ名のタイポ。HTML の class 名と CSS のセレクタ名が一致していない。
対処法：HTML の class="card" と CSS の .card { } のスペルが完全に一致しているか確認。開発者ツールで打ち消し線が入っているスタイルは上書きされている。
🔍 検索キーワード：CSS セレクタ 効かない クラス名
❺ 余白がおかしい
症状：余白を指定したのに、思った通りの間隔にならない。
原因：margin（外側の余白）と padding（内側の余白）を混同している。
対処法：padding は要素の内側、margin は要素の外側に余白を作る。開発者ツールのボックスモデル図で現在の余白を視覚的に確認できる。
🔍 検索キーワード：CSS margin padding 違い
❻ Flexbox でレイアウトが崩れる
症状：justify-content や align-items を書いたのに、要素が横並びにならない。
原因：display: flex を子要素ではなく親要素に書く必要があるのに、子要素に書いてしまっている。
対処法：横並びにしたい要素を囲む親要素に display: flex; を書く。
🔍 検索キーワード：CSS Flexbox 横並び ならない 親要素
⚡ JavaScript のよくあるエラー
❼ Uncaught ReferenceError: xxx is not defined
症状：コンソールに ReferenceError: xxx is not defined と表示される。
原因：変数や関数の名前を間違えて書いている（タイポ）、または宣言する前に使おうとしている。
対処法：エラーの xxx の部分を確認し、let / const / function で宣言しているか確認。大文字・小文字も区別される。
🔍 検索キーワード：JavaScript ReferenceError is not defined
❽ Uncaught TypeError: Cannot read properties of null
症状：コンソールに TypeError: Cannot read properties of null と表示される。
原因：document.getElementById('xxx') で指定した id が HTML に存在しない（タイポ）。
対処法：JavaScript の id 名と HTML の id="..." が一致しているか確認。<script> タグが </body> の直前にあるか確認する。
🔍 検索キーワード：JavaScript Cannot read properties of null getElementById
❾ 404 Not Found（スクリプトが読み込まれない）
症状：コンソールに 404 エラーが出て、JavaScript が動かない。
原因：HTML の <script src="..."> に書いたファイルパスが間違っている。
対処法：<script src="script.js"> のファイル名と実際の .js ファイル名が一致しているか確認。.js ファイルが HTML ファイルと同じフォルダにあるか確認する。
🔍 検索キーワード：JavaScript 404 script 読み込めない
❿ ボタンを押しても何も起きない（エラーも出ない）
症状：ボタンを押しても何も起きない。コンソールにエラーも出ない。
原因：document.getElementById('xxx') の id 名が HTML と一致していない。エラーが出ないので気づきにくい。
対処法：JavaScript の getElementById('xxx') と HTML の id="xxx" を見比べる。console.log(element) を追加して null が出たら取得失敗。
🔍 検索キーワード：JavaScript getElementById null 取得できない
🔍 エラーが解決しないときは
- エラーメッセージをそのままコピーして検索する
- 「JavaScript ○○エラー 解決」のように日本語で検索する
- コードを少しずつ削って、どこでエラーが起きているか絞り込む