CSSが効かない・反映されない原因と対策まとめ｜デベロッパー（検証）ツールで簡単チェック

• CSSを書いたのに反映されない…
• 合っているはずなのに、なぜ変わらない？

これは初心者が必ず一度はつまずくポイントです。

この記事では、Chromeのデベロッパーツール（DevTools）を使ってCSSが効かない原因を順番に確認する方法を初心者向けに整理しました。

この手順に沿えば、効かない原因を効率よく特定できます。

CSSが効かない・反映されない原因はこの5パターンだけ

CSSが効かない・反映されない原因は、必ずこの5つのどれかに分類できます。

1. 当たっていない
   セレクタミスなどでCSSが読み込まれていない
2. 負けている
   優先度や読み込み順、インラインスタイルに負けている
3. 条件に合っていない
   メディアクエリや条件付きCSSの影響で適用されない
4. 見えていない
   display:none や overflow で隠れている
5. 更新されていない
   ブラウザやWordPressのキャッシュが原因で反映されていない

デベロッパーツールでCSSを確認する

CSSが反映されないときは、まず Chromeのデベロッパーツールを使って確認します。

これで「CSSが読み込まれていないのか」「効かない原因が別にあるのか」をすぐに判断できます。

STEP1：対象の要素を選択してデベロッパーツールを開く

• 確認したい要素を右クリック → 「検証」をクリック

• ショートカットキーでも開けます
  • Windows：Ctrl + Shift + I または F12
  • Mac：Cmd + Option + I

→ 画面右側（または下部）にデベロッパーツールが表示されます。

STEP2：セレクタが正しいか確認

• Elementsタブで class や id をチェック
• 親要素にクラスがある場合は詳細度（specificity）に注意

例：

<div class="entry-content">
  <div class="toc">
</div></div>

• 自分のCSS：.toc { }
• テーマ側：.entry-content .toc { }
  → 詳細度の高いテーマ側のCSSが優先されます

STEP3：StylesタブでCSSが表示されているか確認

「Styles」タブで自分で追加したCSS が表示されているかどうかをチェックします。

• ケース①：CSSが表示されている（読み込まれている場合）

→ 表示されているなら「読み込まれている」状態です。

• ケース②：CSSが表示されていない（読み込まれていない場合）

• セレクタが間違っている
• CSSファイルが読み込まれていない

この場合は、次の「表示されない場合の原因」を確認します。

CSSが表示されない場合の原因と対処（読み込まれていない系）

デベロッパーツールの「Styles」タブを開いても、自分が書いたCSSがそもそも表示されていない場合。

「上書き」ではなく、読み込まれていない・当たっていない問題です。

ここでは代表的な原因と確認方法を整理しました。

セレクタミス（もっとも多い原因）

最もよくある原因は、セレクタが正しく指定できていないことです。

例：

.toc-list { }

実際のHTML：

<div class="toc">

クラス名が違えば、当然CSSは当たりません。

チェックポイント

• クラス名・ID名のスペルは完全一致しているか
• .（クラス）と #（ID）を間違えていないか
• 親要素を含める必要がないか

デベロッパーツールのElementsタブで、実際のHTMLを必ず確認しましょう。

HTMLの記述ミス

HTML側のミスで、CSSが当たらないこともあります。

例：

<div class="toc>  <!-- ダブルクォーテーション閉じ忘れ -->
<div clas="toc"> <!-- スペルミス -->

タグの閉じ忘れや入れ子構造の崩れも影響します。

デベロッパーツールのElementsタブで赤くエラー表示されていないか確認してください。

CSSの構文エラー・書き方ミス

CSSに文法ミスがあると、そのブロック以降が無効になります。

よくある例

.toc {
  color: red   /* セミコロン忘れ */
  padding: 20px;
}

.toc {
  color: red   /* 波括弧閉じ忘れ */

対処法

• セミコロンを確認
• { } の数を確認

不要なスペース・全角文字の混入

実はかなり多いのが「全角スペース」や「全角記号」。

• ：； が全角になっている
• クラス名の後ろに全角スペースが入っている

これだけでCSSはヒットしません。

ブラウザ・WordPressキャッシュの影響

変更が反映されない原因としてキャッシュもよくあります。

• ブラウザキャッシュのクリア

• Google Chrome: 設定 > プライバシーとセキュリティ > 閲覧履歴データの削除
• Firefox: 設定 > プライバシーとセキュリティ > クッキーとサイトデータ > データの消去

• WordPressキャッシュのクリア

• キャッシュプラグインを使っている場合は、キャッシュをクリア
• プラグインを無効化することで反映される場合も
• テーマ側のキャッシュ機能もオフにすることを検討

CSSは表示されているのに効かない場合（上書き・条件・非表示系）

デベロッパーツールの「Styles」タブに自分のCSSは表示されているのに、見た目が変わらない場合があります。これは「上書きされている」「条件に合っていない」「見えていない」などの理由です。

ここでは代表的な原因と確認方法を整理しました。

上書き系（誰かに負けている）

CSSは「書いた順」ではなく、強いものが勝つルールです。

優先度（specificity）の問題

より具体的に指定したセレクタが優先されます。

例

.toc { color: red; }
.entry-content .toc { color: blue; }

<div id="header" class="header">
  <div class="entry-content">
    <div class="toc">目次</div>
  </div>
</div>

→ 青になります。

理由：.entry-content .toc の方が .toc より詳細度（specificity）が高いため、優先されます。

インラインスタイルに負けている

<div class="header" style="color: blue;">

.header {
  color: red;
}

→ 青になります。

HTMLに直接書かれたスタイルは非常に強いです。

デベロッパーツールのElementsタブで style="" が付いていないか確認しましょう。

読み込み順（後勝ちルール）

同じ強さのセレクタなら、後に読み込まれた方が勝ちます。

例：

.header {
  color: red;
}
/* 後に書かれている */
.header {
  color: blue;
}

→ 青になります。

JavaScriptによる上書き

最近のテーマやプラグインは、JavaScriptでスタイルを後から変更することがあります。

例えば、

• スクロール時にクラスを追加
• クリック時にstyle属性を付与
• 動的にdisplayを変更

• 見分け方

1. ページ読み込み直後は正常
2. スクロール・クリック後に崩れる

Elementsタブでクラスが増減していないか確認しましょう。

条件系（そもそも条件に合っていない）

CSSは「条件付き」で書かれていることがあります。

メディアクエリの影響

@media (max-width: 768px) {
  .header {
    background: blue;
  }
}

この場合、

• 画面幅768px以下 → 青になる
• デスクトップ → 何も起きない

• 確認方法

1. デベロッパーツールを開く
2. デバイスツールバー（スマホアイコン）をクリック
3. 画面幅を変更して確認

「効いていない」のではなく、「条件に合っていない」だけです。

非表示系（効いているが見えていない）

実はこれ、かなり多いです。

display:none になっている

要素自体が消えているケース。

.element {
  display: none;
}

この状態では、色を変えても、余白を変えても、サイズを変えても何も見えません。

• 確認方法

Stylesタブで display: none; が当たっていないか確認。

overflowで隠れている

.box {
  overflow: hidden;
}

要素がはみ出していると、存在しているのに見えません。

まとめ｜CSSが効かない・反映されないときの確認順

1. 構造：セレクタが正しく当たっているか
2. 記述場所：CSSはそのページで読み込まれる場所に書かれているか
3. HTML：タグやクラス・IDは正しいか
4. 書き方：構文ミスや全角文字の混入はないか
5. キャッシュ：ブラウザ・WordPressキャッシュをクリア

この順番で確認すれば表示されない問題はほぼ解決できます。初歩的なスペルミスや全角スペースが原因であることがとても多いので、根気よくチェックしましょう！