こんにちは。CSSの世界へようこそ。
「自分が書いたはずのスタイルが、なぜか反映されない」「青色にしたいのに、どうして頑なに赤色のままなんだ！」そんな経験、誰しも一度は通る道です。CSSは一見シンプルに見えて、実は裏で非常に厳格な「優先順位のルール」という名のヒエラルキーが存在しています。
今日は、そんなCSSの迷宮に迷い込んだあなたを救う、「ブラウザ開発者ツールを使った“優先順位の探偵術”」を伝授します。大丈夫、仕組みさえ分かればCSSは怖くありませんよ。
—
CSSの優先順位は「お買い物ポイント」で考える
CSSの優先順位（専門用語で「詳細度」と呼びます）を理解する一番の近道は、「誰が一番偉いか」をポイント制で決めると考えることです。
例えば、こんなルールを想像してみてください。
- タグ名（`div`や`p`など）： 1ポイント
- クラス名（`.header`など）： 10ポイント
- ID名（`#main`など）： 100ポイント
- 最強の切り札（`!important`）： 1,000,000ポイント（※使うと後で後悔する禁断の呪文）
ブラウザは、「同じ場所に複数のスタイルがぶつかったら、合計ポイントが高い方を採用する」という冷徹なルールで動いています。
—
現場の救世主「ブラウザ開発者ツール」を開こう
コードを眺めて悩むより、ブラウザに直接聞くのが一番早いです。Google ChromeやEdgeを使っているなら、右クリックして「検証（Inspect）」を選んでみてください。
そこには、あなたの書いたコードの「言い分」と、ブラウザが「それを採用したか、あるいは無視したか」の証拠がすべて残っています。
打ち消されたスタイルを見つけるコツ
スタイルが反映されていない箇所をクリックすると、開発者ツールの「Styles」タブに、取り消し線（横線）が入ったCSSが表示されますよね。
- 横線が入っている： 「君のことは嫌いじゃないけど、もっと強いやつがいたから今回はごめんね」とブラウザが言っています。
- 一番上に書かれているやつ： それが今の勝者です。
実践：優先順位の謎を解く
試しに、こんな状況を作ってみましょう。
こんにちは、世界！
/ CSS /
/ 1ポイントの力 /
p {
color: blue;
}
/ 10ポイントの力 /
.text-color {
color: green;
}
/ 100ポイントの力 /
message {
color: red;
}
この場合、一番強いのはIDの「赤（red）」です。もし `.text-color` を緑にしたいと思っても、`p`タグやクラスだけではIDの力には勝てません。開発者ツールで見ると、`blue`と`green`には横線が入り、`red`だけが生き残っているはずです。
—
「!important」という禁断の果実
CSSを書いていると、どうしても言うことを聞かない相手に対して、ついつい `!important` を付けたくなりますよね。
.text-color {
color: green !important; / 強引な上書き /
}
これは「力技で全てをねじ伏せる」魔法ですが、使いすぎると「後で自分自身が困る」という副作用があります。一度使ってしまうと、次に色を変えたいとき、また `!important` を使わなければならなくなるからです。
「!importantは、どうしても解決できない火事場の消火剤」。そう覚えておいてください。基本は「クラス名」を適切に重ねて、スマートに勝つのがプロの流儀です。
—
最後に：迷ったら、ツールに訊け
CSSのデバッグは、いわば探偵業です。
「なぜ動かないのか」ではなく、「ブラウザは今、どれを一番偉いと思っているのか？」という視点で開発者ツールを眺めてみてください。
1. 右クリックで「検証」を開く。
2. Stylesタブで横線が入っているルールを探す。
3. 一番上に表示されているルールの「セレクタの強さ（詳細度）」を確認する。
これだけで、CSSの悩みは8割解決します。
最初は誰だって戸惑います。でも、こうやって少しずつブラウザとの対話を重ねていくうちに、いつの間にかあなたはCSSの仕組みを指先で操れるようになっているはずです。
もし行き詰まったら、いつでも戻ってきてください。CSSは、あなたの味方ですよ。
コメント