「CSSを書いたのに、ブラウザに反映されない」——学び始めのころ、誰もが一度はぶつかる壁です。わたしも最初のころ、1時間くらい原因が分からず固まっていました。落ち着いて、上から順に確認していけば必ず原因は見つかります。この記事では、初心者がつまずきやすい5つのポイントを、確認しやすい順に並べました。

1. CSSファイルが読み込まれているか

まず疑うのは、HTMLからCSSを正しく読み込めているかです。link タグ（外部ファイルを読み込む指定）のパスが間違っていると、CSSはまったく効きません。

index.html（head内）
<!-- HTMLとstyle.cssが同じフォルダにある場合 -->
<link rel="stylesheet" href="style.css" />

2. セレクタ（どこに当てるかの指定）が合っているか

クラス名の . を付け忘れていたり、HTML側とCSS側でつづりが違っていたりすると、狙った要素に届きません。HTMLの class 属性とCSSのセレクタが一字一句同じか確認しましょう。

CODEセレクタのつづり違いを直してみるコードを書き換えると、すぐ下で動きます

CSSタブの .title を .ttl に書き換えて「実行」を押すと、見出しに色が付きます。

3. ブラウザのキャッシュが残っていないか

ブラウザは表示を速くするため、古いCSSを一時的に覚えていること（キャッシュ）があります。スーパーリロード（Windowsなら Ctrl+Shift+R）で、最新のファイルを読み直してみましょう。

よくあるエラー

  • セミコロン（; 命令の区切り）の付け忘れで、次の行が効かなくなる
  • 全角スペースが紛れ込んでいて、指定が読み取れない
  • 後から書いた別の指定に、優先順位で上書きされている
CODE後から書いた指定に上書きされるコードを書き換えると、すぐ下で動きます

下の .note を丸ごと消すと、上のオレンジが効くようになります。

ここまで確認すれば、たいていの「反映されない」は解決します。次は、実際にブラウザの開発者ツールで原因を見つける方法も覚えていきましょう。