これはCSSカスタマイズで多くの人が一度はつまずくポイントです。
でも実際は、原因のほとんどがよくあるパターンだったりします。
この記事では、Chromeのデベロッパーツール（DevTools）を使って
- CSSが対象要素に当たっていないのか
- 別のCSSに上書きされているのか
- 条件が合っていないのか
を順番に確認しながら、原因を特定する方法を初心者向けに解説します。
手順通りにチェックしていけば、CSSが効かない原因はかなり見つけやすくなります。
CSSが効かない原因は大きく2種類
- CSSが対象要素に当たっていない
- セレクタミス
- HTMLミス
- キャッシュ
- CSSは当たっているが効かない
- 上書き
- 条件違い
- display:none
この2つのチェックポイントを順番に確認すれば、CSSの反映トラブルはほぼ解決できます。
CSSが効かないときはデベロッパーツールで確認する
CSSが反映されないときは、まず Chromeのデベロッパーツールを使って確認します。
デベロッパーツールを使えば、
- CSSが読み込まれていないのか
- 上書きされているのか
- 条件に合っていないのか
をすぐに判断できます。
まずは次の流れで確認しましょう。
STEP1：対象の要素を選択してデベロッパーツールを開く
→ 画面右側（または下部）にデベロッパーツールが表示されます。
STEP2：ElementsタブでHTMLとセレクタを確認
次に、対象要素の class や id を確認します。
チェックポイント
例：
<div class="entry-content">
<div class="toc">
</div></div>- 自分のCSS：
.toc { } - テーマCSS：
.entry-content .toc { }
→ 詳細度の高いテーマ側のCSSが優先されます
STEP3：StylesタブでCSSが表示されているか確認
ここが一番重要です。
CSSトラブルは、まず「StylesタブにCSSが表示されているか」を見るだけでかなり原因を絞れます。
ここで原因が分かれます。
分岐①：CSSが表示されている
→ 読み込まれている状態
CSS自体は読み込まれているので、「別のCSSに負けている」可能性が高い状態です。
このケースで多いのは、
- 上書きされている
- 条件に合っていない
- 非表示になっている
→ 次の「CSSは表示されているのに効かない場合」を確認します。
分岐②：CSSが表示されていない
→ → その要素にCSSが当たっていない状態
まず疑いたいのは、
- セレクタミス
- HTMLミス
- キャッシュ
→ 次の「CSSが表示されない場合の原因」を確認します。
CSSが反映されない原因（CSSが表示されない場合）
デベロッパーツールの「Styles」タブを開いても、自分が書いたCSSがそもそも表示されていない場合。
「上書き」ではなく、CSSが当たっていない問題です。
ここでは代表的な原因と確認方法を整理しました。
セレクタミス（もっとも多い原因）
最もよくある原因は、セレクタが正しく指定できていないことです。
例：
.toc-list { }実際のHTML：
<div class="toc">クラス名が違えば、当然CSSは当たりません。
チェックポイント
デベロッパーツールのElementsタブで、実際のHTMLを必ず確認しましょう。
HTMLの記述ミス
HTML側のミスで、CSSが当たらないこともあります。
例：
<div class="toc> <!-- ダブルクォーテーション閉じ忘れ -->
<div clas="toc"> <!-- スペルミス -->タグの閉じ忘れや入れ子構造の崩れも影響します。
デベロッパーツールのElementsタブで赤くエラー表示されていないか確認してください。
CSSの構文エラー・書き方ミス
CSSに文法ミスがあると、そのブロック以降が無効になります。
よくある例
.toc {
color: red /* セミコロン忘れ */
padding: 20px;
}
.toc {
color: red /* 波括弧閉じ忘れ */対処法
- セミコロンを確認
{ }の数を確認
不要なスペース・全角文字の混入
実はかなり多いのが「全角スペース」や「全角記号」。
- ：； が全角になっている
- クラス名の後ろに全角スペースが入っている
これだけでCSSはヒットしません。
「W3C CSS 検証サービス」は、CSSの文法エラーや仕様に準拠していない記述をチェックできる無料ツールです。
できること
- CSSコードの文法チェック
- URLを指定してページ全体のCSSを検証
- エラーや警告の表示
使い方
- CSSコードを入力
- 「検証する」をクリック
エラーがある場合は、該当箇所と内容が表示されるので修正の参考になります。
ブラウザ・WordPressキャッシュの影響
変更が反映されない原因としてキャッシュもよくあります。
- Google Chrome：設定 > プライバシーとセキュリティ > 閲覧履歴データの削除
- Firefox：設定 > プライバシーとセキュリティ > クッキーとサイトデータ > データの消去
- キャッシュプラグインを使っている場合は、キャッシュをクリア
- プラグインを無効化することで反映される場合も
- テーマ側のキャッシュ機能もオフにすることを検討
CSSが効かない原因（表示されているのに効かない場合）
デベロッパーツールの「Styles」タブに自分のCSSは表示されているのに、見た目が変わらない場合があります。これは「上書きされている」「条件に合っていない」「見えていない」などの理由です。
ここでは代表的な原因と確認方法を整理しました。
- 優先度（specificity）：詳細度、読み込み順、インライン、!important
- JavaScriptによる上書き：スクロールやクリックで動的変更される
- 条件付きCSS：メディアクエリで条件に合っていない
- 非表示：display:none、overflowで見えない
上書き系（誰かに負けている）
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, p, h2 など）
- クラス・疑似クラス（.class, :hover など）
- IDセレクタ（#id）
- インラインスタイル（例：
<div style="...">） - !important
※!important は後から管理しづらくなるため多用はおすすめしません。
インラインスタイルに負けている
<div class="header" style="color: blue;">.header {
color: red;
}→ 青になります。
HTMLに直接書かれたスタイルは非常に強いです。
デベロッパーツールのElementsタブで style="" が付いていないか確認しましょう。
読み込み順（後勝ちルール）
同じ強さのセレクタなら、後に読み込まれた方が勝ちます。
例：
.header {
color: red;
}
/* 後に書かれている */
.header {
color: blue;
}→ 青になります。
JavaScriptによる上書き
最近のテーマやプラグインは、JavaScriptでスタイルを後から変更することがあります。
例えば、
- スクロール時にクラスを追加
- クリック時にstyle属性を付与
- 動的にdisplayを変更
- ページ読み込み直後は正常
- スクロール・クリック後に崩れる
Elementsタブでクラスが増減していないか確認しましょう。
条件系（そもそも条件に合っていない）
CSSは「条件付き」で書かれていることがあります。
メディアクエリの影響
@media (max-width: 768px) {
.header {
background: blue;
}
}この場合、
- 画面幅768px以下 → 青になる
- デスクトップ → 何も起きない
- デベロッパーツールを開く
- デバイスツールバー（スマホアイコン）をクリック
- 画面幅を変更して確認
「効いていない」のではなく、「条件に合っていない」だけです。
非表示・見切れ系（効いているが見えていない）
実はこれ、かなり多いです。
display:none になっている
要素自体が消えているケース。
.element {
display: none;
}この状態では、色を変えても、余白を変えても、サイズを変えても何も見えません。
Stylesタブで display: none; が当たっていないか確認。
overflowで隠れている
.box {
overflow: hidden;
}要素がはみ出していると、存在しているのに見えません。
※ visibility:hidden は「スペースは残ったまま非表示」になります。
まとめ｜CSSが反映されないときの確認手順
CSSが効かない原因は、一見すると難しそうですが、実際は「当たっていない」「負けている」「条件が違う」のどれかであることがほとんどです。
DevToolsで順番に確認できるようになると、原因特定のスピードがかなり上がります。
Comment 記事の感想を書き込んでいただけると幸いです