初心者がはまりやすいポイントをまとめました。レイアウトが崩れたときに参照してください。
❌ タグの閉じ忘れ
<div> <p>本文 </div> ← </p> が閉じられていない
✅ 解決法：開いたタグはすぐ閉じる習慣をつける。VSCodeは閉じタグを自動補完してくれます。
❌ CSSが効かない（セレクタのミス）
/* HTMLに class="btn" があるのに */
.button { color: red; } /* ← .btn ではなく .button になっている */
✅ 解決法：HTML側のclass名とCSS側のセレクタ名が完全に一致しているか確認する。
❌ 画像が表示されない
<img src="Images/photo.jpg"> ← 大文字・小文字が違う
✅ 解決法：ファイル名・フォルダ名の大文字小文字を正確に合わせる（特にMacとWindowsの違いに注意）。
❌ レイアウトが崩れる（Flexbox）
.container { display: flex; }
/* 子要素が横に並ばない → 親要素にflexを指定しているか確認 */
✅ 解決法：display: flex は「子要素を横に並べる」ので、親要素に指定すること。
🔍 ブラウザの開発者ツールを使おう
Chromeで F12 または右クリック→「検証」を開くと、要素にどのCSSが効いているか確認できます。
CSSが打ち消されている場合は取り消し線で表示されます。