CSSが反映されないときの調べ方

CSSを書いたのに見た目が変わらない——このつまずきは、原因を4つに分けて上から順に確かめると必ず解けます。

1. 届いていない（CSSファイルがブラウザに読みこまれていない）
2. 選べていない（セレクタが目的の要素に当たっていない）
3. 負けている（ほかの指定に上書きされている）
4. そもそも効かない（その要素・その状況では効果のない指定）

見当をつけずに書き直すと時間だけが溶けます。どの段階で止まっているかを先に決めるのが、いちばん速い直し方です。

段階1：CSSは届いている？

まったく何も効いていないときは、ここが原因です。1か所だけ効かないのではなく、色も余白も文字も全部が素のままなら、CSSファイル自体が届いていません。

1. 開発者ツールのNetworkタブを開く
2. その状態でページを再読み込みする
3. style.cssの行を探し、Statusの列を見る

404だった場合、確認するのはlinkタグの4か所です。

<link rel="stylesheet" href="css/style.css">

• パスの階層——HTMLから見た道順になっているか（css/style.cssかstyle.cssか../css/style.cssか）
• ファイル名の綴り——style.cssとstyles.cssは別物です
• 大文字・小文字——Style.cssとstyle.cssは別ファイル扱いになることがあります
• rel="stylesheet"——書き忘れると読みこまれません

段階2：セレクタは届いている？

CSSは届いているのに、特定の指定だけ効かない——この場合はセレクタを疑います。

1. 変えたい要素の上で右クリック→検証
2. 右側のStylesパネルを見る
3. 自分が書いた指定が載っているかを確認

載っていなければ、セレクタがその要素に当たっていません。 よくある原因を並べます。

• .と#のまちがい——class="card"には.card、id="card"には#card。逆にすると当たりません
• クラス名の綴りちがい——HTML側とCSS側で1文字でも違えばアウトです。コピペで合わせるのが確実
• .の書き忘れ——card { }と書くと「<card>というタグ」を探しに行きます
• 半角スペースの有無——.card .title（子孫）と.card.title（両方持つ要素）はまったく別の意味です
• タグ名の大文字——CSSのタグ名は小文字で書きます
• 全角スペースがまぎれている——見た目では分かりません。VSCodeの「zenkaku」拡張機能を入れると色がついて見えます

同じ理屈で、}の閉じ忘れや;の書き忘れも、その先の指定をまとめて壊します。VSCodeの色が途中から変わっていないか、目で追ってみてください。

段階3：ほかの指定に負けている？

Stylesパネルに指定は載っているのに、打ち消し線が付いている——これは「書けているけれど負けている」状態です。CSSは競合したとき、次の順番で勝ち負けが決まります。

同じ強さなら、あとに書いたほうが勝ちます。 だから「同じクラスに2回指定していて、上に書いたほうが無視されていた」というのもよくある話です。

数え方はシンプルで、「クラスをいくつ使ったか」で強さがほぼ決まります。

.title            { color: blue; }    /* クラス1つ */
.card .title      { color: green; }   /* クラス2つ ← こちらが勝つ */
.page .card .title { color: red; }    /* クラス3つ ← さらに勝つ */

つまり「効かせたい指定のセレクタを、勝っている指定と同じか、それより詳しくする」のが正攻法です。

/* テーマ側 */
.card .title { color: green; }

/* 自分の指定：クラス2つにそろえれば、あとに書いたぶん勝てる */
.card .title { color: crimson; }

Stylesを追うのが面倒なときは、Computedタブを見るのが速いです。その要素に最終的に適用された値だけが並ぶので、「結局どうなっているのか」が一目で分かります。

段階4：そもそも効かない組み合わせ

打ち消し線もなく、Computedにも自分の値が入っている。それでも見た目が変わらない——このときは、その状況では効果を持たない指定を書いています。定番はこの6つです。

「タイプミスもしていないし負けてもいないのに効かない」ときは、プロパティと要素の相性を疑ってください。

それでも変わらないなら：保存とキャッシュ

コードの問題ではなく、そもそも新しいCSSが見られていないというパターンもあります。

• 保存したか——⌘ / Ctrl + S。タブに「●」が付いていたら未保存です
• 見ているファイルは合っているか——似た名前のファイルが2つあって、読みこまれていないほうを編集していた
• キャッシュ——⌘ + ⇧ + R / Ctrl + Shift + Rでキャッシュを無視して再読み込み
• 公開したサイトが変わらない——アップロードが済んでいるか、サーバー側やCDNのキャッシュが残っていないか

WordPressの場合は、高速化プラグインのキャッシュも疑ってください。加えて、テーマのCSSがブラウザに覚えられたままになるのを防ぐ仕組みもあります。

上から順に試すチェックリスト

1. 保存したか（タブの「●」）
2. ⌘ / Ctrl + ⇧ + Rでキャッシュを無視して再読み込み
3. 全部効かない → NetworkでCSSのStatusを見る（404ならパス）
4. 一部だけ効かない → Stylesに指定が載っているか（載っていなければセレクタ）
5. 載っているが打ち消し線 → 負けている。セレクタを同じ強さ以上にする
6. 打ち消し線もない → プロパティと要素の相性を疑う（インライン要素、親の高さ、position）
7. コメントや}の閉じ忘れで、その先が丸ごと死んでいないか

まとめ

1. 原因は4つ——届いていない・選べていない・負けている・そもそも効かない
2. 全部効かないならNetworkで404を確認。1つだけならStylesに載っているかを確認
3. 打ち消し線は「負けている」印。クラスの数をそろえて、あとに書くのが正攻法
4. !importantは最後の手段。使ったら理由をコメントに残す
5. コメントや}の閉じ忘れは、それ以降のCSSを丸ごと無効にする

CSSは、まちがえてもエラーを出さずに黙って無視するのが厄介なところです。だからこそ「開発者ツールで見る」を覚えた人だけが、迷わず前に進めます。