CSSが効かない原因の確かめ方｜開発者ツールの表示で切り分ける

CSS を書き足したのに見た目が変わらないとき、最初に見るのは「その宣言がブラウザでどう扱われているか」です。 Chrome の開発者ツールは、効かない宣言の見せ方を原因ごとに変えています。

この記事では、その見え方を 4 つに分け、それぞれの原因と直す場所をまとめます。 CSS の挙動は、手元の Chromium 141 で試して確かめました。

開発者ツールで、効かない宣言の見え方を確かめる

見た目を直したい部分を右クリックして「検証」を選ぶと、開発者ツールが開きます。 右側のスタイルの欄（Styles）に、その要素に当たっているルールが並びます。

自分が書いたルールを探して、次のどれに当たるかを見ます。

• ルールが一覧に無い: セレクタが要素に当たっていません。次の 1 に進みます。
• 取り消し線と警告のマークが付いている: 値かプロパティ名が読めず、捨てられています。2 に進みます。
• 取り消し線だけが付いている: ほかの宣言に負けています。3 に進みます。
• 薄い文字で、情報のマークが付いている: 読めて勝ってもいるのに、ほかのプロパティのせいで効果がありません。4 に進みます。

この 4 つの見え方は、Chrome の開発者ツールの公式の説明に沿っています。 マークにマウスを重ねると、短い説明が出るものもあります。

1. ルールが一覧に無い: セレクタが当たっていない

スタイルの欄に出るのは、その要素に当たったルールです。 カンマで並べたセレクタのうち、当たらなかったものは薄い文字で出ます。

当たらない原因は、HTML 側と CSS 側のどちらかにあります。

• クラス名のつづり違い: HTML の class="menu-item" に、CSS で .menu_item と書いている
• HTML 側にクラスが付いていない: 別の要素を選んでいる、またはテンプレートが付けていない
• 全角の記号: ＃nav や ．menu のように記号だけ全角になっている

全角の記号は、とくに気づきにくい書き間違いです。 CSS は全角の ＃ を ID の印として読まず、名前の一部として読みます。 試すと、＃nav は ID が nav の要素に当たらず、＃nav という名前の要素を探すセレクタになりました。

セレクタをそのまま CSS詳細度チェッカーに貼ると、全角の記号を名指しで知らせます。

2. 取り消し線と警告のマーク: 読めない宣言は捨てられる

ブラウザは、読めない宣言を丸ごと捨てます。 捨てた宣言は勝ち負けに加わらないので、その次に強い宣言が使われます。

試すと、次の書き方はどれも捨てられ、別のルールの値が使われました。

• 単位の書き忘れ: width: 100（0 以外の長さには単位が要る）
• 桁の足りないカラーコード: color: #12345（5 桁は読めない）
• 全角のコロン: color：red（この 1 つだけが捨てられ、次の宣言は読まれた）
• 全角スペース: margin-top:　10px（全角スペースは CSS の空白ではない）
• セミコロンの書き忘れ: color: red margin-top: 5px（2 つが 1 つの読めない値になり、両方とも効かない）

最後の例は、1 か所の書き忘れで 2 つの宣言が消える形です。 効かない宣言のすぐ前の行も、あわせて見てください。

3. 取り消し線だけ: ほかの宣言に負けている

取り消し線だけが付いているなら、宣言は読めていて、ほかの宣言に負けています。 勝ち負けは、次の 5 段を上から順に比べ、最初に差が付いた段で決まります。

1. !important: 付いている宣言が、付いていない宣言すべてに勝つ
2. style 属性: 同じ重要度なら、HTML の style 属性に書いた宣言が勝つ
3. レイヤー: @layer で分けたとき、後のレイヤーが勝つ（レイヤーの外がいちばん強い）
4. 詳細度: セレクタの強さ。ID の数、クラスなどの数、要素名などの数の順に比べる
5. 書いた順: ここまで同じなら、後に書いた宣言が勝つ

詳細度は 4 段目なので、手前の 3 段で負けていれば、セレクタをいくら強くしても勝てません。 たとえば、どちらにも !important が無ければ、style 属性に書いた宣言には、ID を何個並べたセレクタも負けます。

詳細度の数え方そのものにも、間違えやすい形があります。 #nav a は (1, 0, 1)、クラスを 11 個並べたセレクタは (0, 11, 0) で、ID 1 つのほうが勝ちます。 :where() で包んだ部分は、中身に関係なく 0 として数えます。

直す場所は、負けた段で選びます。

• 書いた順で負けた: 自分のルールを後ろに移す
• 詳細度で負けた: 相手のセレクタを :where() で包んで弱くするか、自分のセレクタを 1 段だけ強くする
• レイヤーで負けた: 後のレイヤーに移す（!important どうしなら、先のレイヤーに移す）
• style 属性に負けた: style 属性を書いている側（HTML やスクリプト）を直す
• !important に負けた: 相手の !important を外せないかを先に確かめる

どの段で負けたかは、開発者ツールの表示だけでは読み取りにくいことがあります。 関わるルールを CSS詳細度チェッカーの「CSS を貼って勝つ宣言を調べる」に貼ると、宣言ごとに負けた段を書きます。

4. 薄い文字と情報のマーク: 組み合わせで効果が無い

読めていて勝ってもいるのに、ほかのプロパティのせいで効果が無い宣言は、薄い文字で出ます。 Chrome の説明では、display: block の要素に書いた justify-content が例に挙がっています。

justify-content は、flex や grid のレイアウトで並びを決めるプロパティです。 display: block の要素では働きません。

この場合は、宣言ではなく、組み合わせる相手のプロパティを直します。 情報のマークにマウスを重ねると、どのプロパティが原因かの手がかりが出ます。

確かめる順番

迷ったら、次の順に見ていけば、4 つの原因のどれかに絞れます。

1. 開発者ツールで要素を選び、自分のルールがスタイルの欄にあるかを見る（無ければ 1）
2. 宣言に取り消し線と警告のマークがあるかを見る（あれば 2。前の行のセミコロンも見る）
3. 取り消し線だけなら、勝った宣言を探して、5 段のどこで負けたかを決める（3）
4. 取り消し線が無いのに効かないなら、薄い文字と情報のマークを探す（4）

3 で負けた段が分からないときは、関わるルールを並べて比べるのが近道です。 相手を確かめてから直すと、!important や ID を重ねて CSS が読みにくくなるのを防げます。

関連記事

• CSSの詳細度を確かめる手順｜勝つ宣言と決め手まで見る：チェッカーの画面の読み方と、詳細度の内訳の見方
• remとemの違い｜入れ子で文字が大きくなる理由と使い分け：効いているのに大きさが思いどおりにならないとき

参考・出典

• Find invalid, overridden, inactive, and other CSS — Chrome for Developers （2026-10-17 閲覧）
• CSS Cascading and Inheritance Level 5 — Cascade Sorting Order — W3C （2026-10-17 閲覧）
• Selectors Level 4 — Calculating a selector's specificity — W3C （2026-10-17 閲覧）

本記事は上記の公的機関・公式情報源を参考にしています。最新の情報は各リンク先をご確認ください。