どうも、くじらいどです。
CSSを書いたのに色が変わらない。余白が入らない。書いたはずのコードが、なぜか無視される。
これ、CSSを触ったことがある人なら全員通る道なんですよね。
今の時代、コード自体はAIが書いてくれます。でも「なぜか効かない」ときに原因を切り分けられるかどうかは、結局こっちの知識次第です。この記事では、CSSが効かない原因をよくある6パターンに分けて、図でわかるように解説したいと思います。
くじらいど「効かない」の原因は、だいたいこの6つのどれかです。順番にチェックしていけば見つかると思います。
CSSが効かない原因は、だいたいこの6つ
先に、原因の候補を一覧にして出しておきます。
| 原因 | ひとことで言うと |
|---|---|
| ① 詳細度で負けている | もっと「強い」CSSに上書きされている |
| ② 記述順で負けている | 同じ強さなら、後に書いたほうが勝つ |
| ③ セレクタが当たっていない | そもそもその要素を狙えていない |
| ④ 効かない要素に書いている | その要素にはそのプロパティが使えない |
| ⑤ !important に潰されている | 最強の指定が別の場所にある |
| ⑥ CSSが読み込まれていない | ファイルが届いていない・キャッシュが古い |
とくに多いのが①と②です。ここから順に見ていきます。
原因① 詳細度（しょうさいど）で負けている
CSSには「どの指定を優先するか」のルールがあります。これを詳細度（Specificity）と言います。
同じ要素に別々の色を指定したとき、勝つのは「後に書いたほう」ではなく「より細かく狙ったほう」です。
▼ 優先順位のピラミッド（上にあるほど強い）
すべてを黙らせる最終手段
<div style="color:red">
#header
.btn / [type="text"] / :hover
p / div / a
↑ 上にあるほど強い（下を上書きする）
よく使われるのが、この点数で考える方法です。
| セレクタの種類 | 書き方の例 | 点数 |
|---|---|---|
| インライン style | style="color:red" | 1000 |
| ID | #header | 100 |
| クラス・属性・擬似クラス | .btn / :hover | 10 |
| 要素・擬似要素 | p / ::before | 1 |
セレクタに含まれるぶんだけ足し算して、点数が高いほうが勝ちます。
▼ 実際に計算してみる
3つとも同じ <p> を狙っていても、文字は赤になる
この「点数」は正確にはケタごとの比較なので、クラスを10個並べてもID1個には勝てません。ただ実務ではこの足し算の感覚で困ることはまずないので、まずはこれで覚えて大丈夫だと思います。
つまり「自分のCSSが効かない＝どこかにもっと点数の高い指定がある」ということです。テーマやプラグインのCSSがIDで書いていると、クラスで書いた自分のCSSは負けます。
直し方
- 相手のセレクタを調べて、それより点数が高くなるように書く（親のクラスを1つ足すだけでもOK）
- 同じセレクタをそのままコピーして、後ろに書く（同点なら後勝ちになる）
- どうしても無理なときだけ !important を使う
原因② 記述順で負けている（同じ強さなら後勝ち）
詳細度がまったく同じ場合は、後に書いたほうが勝ちます。
.btn { color: blue; }
.btn { color: red; } /* こっちが勝つ */▼ 表示例
先に書いた blue は、後の red に上書きされる
これがハマりやすいのは、CSSファイルが複数あるときです。HTMLの中で後から読み込まれたファイルのほうが後勝ちになるので、自分のCSSがテーマのCSSより先に読み込まれていると負けます。
自分のCSSは「後ろ」に置くのが基本
原因③ セレクタがそもそも当たっていない
CSSは正しくても、狙った要素をつかめていないパターンです。これは書き間違いというより「HTMLの構造の読み違い」で起きます。
| やりがちなミス | 正しくは |
|---|---|
| class名の前に . を付け忘れた（btn） | .btn |
| id なのに . で書いた（.header） | #header |
| class名のスペルミス・大文字小文字違い | HTMLと完全一致させる |
| .box .title（子孫）と書いたが実は同じ要素 | .box.title（スペースなし） |
| 直接の子だけ狙いたい | .box > p |
とくに「.box .title」と「.box.title」はスペース1個で意味が変わります。
くじらいどブラウザの検証ツール（F12）で要素を選ぶと、当たっているCSSが右側に出ます。何も出ていなければセレクタが外れている証拠です。
原因④ そのプロパティが効かない要素だった
意外と知られていないのがこれです。要素の種類によっては、書いても最初から無視されるプロパティがあります。
代表例がインライン要素（span・a など）に width / height / 上下の margin が効かないというものです。
span {
width: 300px; /* 効かない */
height: 100px; /* 効かない */
}▼ 表示例（左：そのまま 右：display を変えた場合）
左は背景が文字ぶんしか広がらない。右はちゃんと箱になる
直し方はdisplay: block（または inline-block）を足すだけです。
同じように「効かない」になりやすい組み合わせはこのあたりです。
| 書いたのに効かない | 理由 |
|---|---|
| インライン要素に width / height | 中身のサイズで決まるため |
| z-index が効かない | position が static のままだから |
| height: 100% が効かない | 親要素に高さが指定されていないから |
| 親に margin を入れたのに外側に隙間が出る | 親子のmarginがくっつく（マージンの相殺） |
原因⑤ どこかで !important が使われている
!important が付いた指定は、詳細度をすべて無視して勝ちます。テーマやプラグインが使っていると、自分のCSSはどう書いても効きません。
/* 相手（テーマ側） */
.btn { color: blue !important; }
/* 自分がどれだけ強く書いても負ける */
#main .box .btn { color: red; }この場合はこちらも !important を付けるしかありません。両方に付いていたら、そこから先はいつもの詳細度・記述順のルールで決まります。
!important は最後の手段です。使いすぎると「!important に !important で対抗する」状態になって、あとから誰も直せないCSSになります。
原因⑥ そもそもCSSが読み込まれていない
CSSの中身は完璧なのに、そのファイル自体がブラウザに届いていないパターンです。
- link タグのパスが間違っている（フォルダ構成とズレている）
- ブラウザが古いCSSをキャッシュしたままになっている
- ファイルを保存していない・アップロードできていない
- 前の行のセミコロン（;）や閉じ括弧（}）が抜けていて、そこから下が全部読まれていない
最後のやつが地味に厄介で、1か所の書き間違いのせいで、それ以降のCSSが丸ごと無効になります。「途中から急に効かなくなった」ときは、その少し上の行を疑ってください。
キャッシュはCtrl＋F5（スーパーリロード）で消えることが多いです。
CSSが効かないときのチェック手順
上から順に見ていけば、だいたい5分くらいで原因が見つかると思います。
右側のパネルに、その要素に当たっているCSSが上から強い順で並びます。
表示されていない＝原因③（セレクタが当たっていない）か原因⑥（読み込まれていない）です。
取り消し線＝上書きされている証拠。原因①（詳細度）か②（記述順）です。上に並んでいるCSSが勝っている相手なので、そのセレクタを確認します。
この場合は原因④（その要素に効かないプロパティ）です。display や position を見直してください。
ここまでで解決しなければ、CSSの書式ミス（セミコロン・括弧の抜け）を上の行から探します。
くじらいど検証ツールの「取り消し線が引かれているかどうか」を見れば、詳細度の問題か別の問題かがすぐわかります。ここが一番のショートカットだと思います。
まとめ
CSSが効かないときに確認することをチェックリストにまとめました。
- 検証ツールで、自分のCSSがそもそも当たっているか見る
- 取り消し線が引かれていたら、詳細度か記述順で負けている
- 強さは「インラインstyle ＞ ID ＞ クラス ＞ 要素」、同点なら後勝ち
- セレクタのスペル・「.」「#」の付け間違い・スペースの有無を確認する
- インライン要素にwidth・z-indexにposition・height:100%に親の高さが要る
- !important が相手にあるなら、こちらも付けるしかない
- 途中から効かなくなったら、その上の行のセミコロン・括弧の抜けを疑う
- 最後にCtrl＋F5でキャッシュを消す
コードを書くのはAIに任せられる時代ですが、「なぜ効かないのか」を切り分ける力はまだ人間側の仕事です。この6パターンさえ頭に入っていれば、AIに直してもらうときも「詳細度で負けてるっぽい」と伝えられるので、解決がぐっと早くなると思います。
以上、くじらいどでした！
あわせて読みたい
コメント