CSSが反映されないときの確認方法｜原因を順番に切り分ける

CSSを書き換えたのに、ブラウザの表示が変わらない。そんなときに手当たり次第でコードを直すと、本当の原因が分からないまま時間を使ってしまいます。本記事では、Chrome DevToolsを使い「CSSファイルは届いているか」「対象要素にルールが一致しているか」「別の指定に負けていないか」を順番に確認する方法を解説します。

最初に確認する5つのポイント

CSSが反映されない原因は、主に次の5段階に分けられます。上から順番に確認すると、調査範囲を効率よく絞れます。

編集したCSSファイルを保存できているか
HTMLが目的のCSSファイルを読み込んでいるか
セレクタが対象要素と一致しているか
詳細度や記述順によって上書きされていないか
ブラウザやWordPressのキャッシュが残っていないか

まず、分かりやすい確認用スタイルを一時的に追加してみましょう。

.test-target {
  outline: 4px solid red;
  background: yellow;
}

この指定すら表示されなければ、色や余白の細かな問題ではなく、ファイルの読み込みやセレクタの段階で止まっている可能性が高いと判断できます。確認後はテスト用の指定を削除してください。

CSSファイルが正しく読み込まれているか確認する

linkタグのパスを確認する

外部CSSは、通常HTMLのhead内から次のように読み込みます。

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

hrefはHTMLファイルを基準にしたパスです。ファイル名、拡張子、フォルダ階層、大文字と小文字を確認します。サーバー上ではStyle.cssとstyle.cssが別ファイルとして扱われる環境もあります。

Networkパネルでステータスを確認する

Chromeで対象ページを開く
F12、または右クリックから「検証」を選ぶ
「Network」タブを開いてページを再読み込みする
フィルターにcssと入力する
目的のCSSが200で読み込まれているか確認する

404ならパスやファイル配置が違います。CSS自体が一覧に出なければ、linkタグ、テーマ側の読み込み処理、HTMLソースを確認します。WordPressでは、テーマのfunctions.phpからwp_enqueue_style()で読み込んでいる場合もあります。

セレクタの間違いをDevToolsで見つける

CSSは読み込まれていても、セレクタがHTMLと一致していなければ適用されません。よくあるのは、クラスとIDの記号、名前の入力、親子関係の間違いです。

<div class="notice">お知らせ</div>

/* 正しい指定 */
.notice {
  color: #075e68;
}

/* IDを表す # では一致しない */
#notice {
  color: red;
}

Chrome DevToolsの要素選択ボタンを押し、画面上の対象要素をクリックします。「Elements」の「Styles」に目的のルールが表示されるか確認してください。

ルールが表示されない：セレクタ不一致、またはCSS未読込
ルールが薄く表示される：現在の要素と一致していない可能性
プロパティに打ち消し線がある：別の指定に上書きされている
警告アイコンがある：値やプロパティの記述が無効

詳細度と読み込み順による上書きを確認する

同じ要素へ複数のスタイルが指定されると、CSSのカスケードに従って最終的な値が決まります。次の例では、後から書いた.card-titleより、IDを含む指定のほうが詳細度が高いため、文字は青のままです。

#main .card-title {
  color: blue;
}

.card-title {
  color: red;
}

DevToolsの「Styles」では、負けたプロパティに打ち消し線が付きます。「Computed」タブを開くと、実際に適用された値も確認できます。

原因が分からないまま!importantを追加するのはおすすめできません。あとからさらに上書きしにくくなり、保守が難しくなるためです。まずは不要に長いセレクタを減らし、同じ役割のスタイルを近い詳細度で管理します。同じ詳細度なら、基本的には後に記述されたルールが優先されます。

構文エラーと無効な値を確認する

セミコロンや閉じ波括弧の不足、単位の付け忘れでも、意図したスタイルが無効になります。

/* 閉じ波括弧がなく、後続の解析に影響する例 */
.header {
  color: white;

.main {
  width: 800; /* 0以外の長さには通常単位が必要 */
}

正しくは次のように記述します。

.header {
  color: white;
}

.main {
  width: 800px;
}

DevToolsのStylesパネルでは、無効なプロパティや値に警告が表示されます。コードエディターのCSS検証機能も併用すると、保存前に単純な入力ミスを見つけやすくなります。

キャッシュを切り分ける

コード、読み込み、セレクタに問題がない場合は、古いCSSがキャッシュから表示されていないか確認します。

DevToolsを開く
Networkタブの「Disable cache」を有効にする
DevToolsを開いたままページを再読み込みする

これで反映されるなら、キャッシュが原因です。WordPressでは、キャッシュプラグイン、サーバーキャッシュ、CDNが別々に存在することもあります。ブラウザだけを消して直らない場合は、利用している仕組みを一つずつ確認してください。

CSSのURLへバージョンを付ける方法もあります。

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

WordPressのwp_enqueue_style()にもバージョン引数があります。更新のたびに値を変えれば、ブラウザへ新しいURLとして認識させられます。

それでも直らないときのチェックリスト

編集しているファイルとブラウザが読み込むファイルは同じか
ファイルを保存してから再読み込みしたか
メディアクエリの条件外になっていないか
インラインスタイルやJavaScriptによる変更がないか
親要素からの継承と、対象要素への直接指定を混同していないか
WordPressの子テーマではなく親テーマを編集していないか
キャッシュプラグイン、CDN、サーバーキャッシュを確認したか

調査のポイントは、「CSSが届いていない」のか、「届いているが一致しない」のか、「一致しているが負けている」のかを分けることです。DevToolsのNetwork、Styles、Computedをこの順番で確認すれば、勘に頼らず原因へ近づけます。

まとめ

CSSが反映されないときは、まずCSSファイルの読み込みをNetworkで確認し、次にElementsのStylesでセレクタの一致と打ち消し線を確認します。最後に構文エラーとキャッシュを調べれば、多くのケースを段階的に切り分けられます。すぐに!importantへ頼らず、ブラウザがどの値を採用したかを確認することが、早く安全に直す近道です。