こんにちは。CSSの世界へようこそ。
CSSを書き始めて、「あれ？ なんでこのスタイルが反映されないんだ？」と頭を抱えたことはありませんか？
コードを書いても書いても、なぜか文字の色が変わらない。そんなとき、画面の向こう側でCSSの神様が「まだそのレベルじゃないよ」と意地悪をしているように感じるかもしれませんね。でも安心してください。それは神様のいたずらではなく、「詳細度（Specificity）」という、CSS界の厳格な「優先順位ルール」が働いているだけなんです。
今日は、この「CSSの優先順位」というちょっと難しそうな概念を、日常の風景に例えて紐解いていきましょう。
—
1. CSSの優先順位は「重さ」で決まる
CSSの優先順位は、プログラムの気まぐれではなく、「どれだけ具体的にターゲットを指定しているか」という「重さ」の合計値で決まります。
これを理解するために、こんな例え話をしましょう。
あなたが誰かを探しているとします。
1. 「誰か！」と呼ぶ（タグセレクタ：`div` など）
2. 「赤い服を着た人！」と呼ぶ（クラスセレクタ：`.red-text` など）
3. 「背番号10番の、赤い服を着た人！」と呼ぶ（IDセレクタ：`#user-10` など）
さて、この中で一番確実に見つかりそうなのはどれでしょう？ もちろん3番目ですよね。情報が具体的であればあるほど、その存在は「重く」なり、優先されるのです。
—
2. 詳細度（重さ）の計算ルール
CSSでは、この「重さ」を以下の3つのグループでカウントします。
- IDセレクタ（#id）： 100点（めちゃくちゃ重い！）
- クラスセレクタ（.class）： 10点（ほどよく重い）
- タグセレクタ（div, p, h1）： 1点（とても軽い）
この点数を合計して、合計得点が高い方が勝利します。もし合計が同じなら、「最後に書いたほうが勝つ」というシンプルなルールがあります。
サンプルコードで確認してみよう
/ 合計：1点（タグセレクタのみ） /
p {
color: gray;
}
/ 合計：10点（クラスセレクタ1つ） /
.text-bold {
color: blue;
}
/ 合計：100点（IDセレクタ1つ） /
main-title {
color: red;
}
このとき、`
こんにちは
` というHTMLがあったら、どれが勝つでしょうか？
正解は、IDセレクタの「赤色」です。点数が100点と圧倒的ですからね。
—
3. つまずきポイント：なぜか色が変えられないとき
初学者が一番苦しむのが、「クラスを当てたのに、以前のスタイルが上書きできない！」という現象です。
例えば、こんな状況です。
/ どこかのライブラリが書いた強い指定（IDを使っている） /
container .title {
color: black; / 合計：110点 /
}
/ あなたが頑張って書いた指定（クラスのみ） /
.title {
color: pink; / 合計：10点 /
}
これだと、いくらあなたのクラスに「ピンクになれ！」と書いても、相手（IDセレクタ）が110点という重いパンチを持っているため、あなたの10点のパンチは弾き返されてしまいます。
「あぁ、もう！ どうすればいいの！」と焦る必要はありません。そんなときは、相手と同じ土俵に立つか、より具体的に指定してあげるだけでいいのです。
—
4. 現場の知恵：詳細度を上げすぎないコツ
ここで、ベテランからのアドバイスをひとつ。
「じゃあ、全部IDにして最強にすればいいんだ！」と思うかもしれませんが、それはCSSの設計において一番やってはいけないことです。
IDを多用すると、後からスタイルを上書きするのが非常に困難になり、コードが「カチカチ」に固まって動かせなくなります。
- 基本はクラスセレクタ（.class）をメインにする
- IDセレクタは、本当に特別な場所（ページ固有のヘッダーなど）だけに使う
- タグセレクタは、あくまで「全体共通のベース」として使う
このバランスを保つことが、メンテナンスしやすく、自分自身も楽ができる「綺麗なCSS」への近道です。
—
最後に：CSSは「積み重ね」の芸術
詳細度の計算を完璧に暗記する必要はありません。最初は「あれ？ なんで変わらないんだ？」と悩むことが、上達の証です。ブラウザの検証ツール（F12キーを押すと出るやつです）を使って、どのスタイルが「打ち消されているか（取り消し線がついているか）」を見る癖をつければ、自然と感覚が身についていきます。
CSSは、あなたの思い描くデザインを形にする魔法です。優先順位というルールさえ味方につければ、もう怖いものはありません。
焦らず、少しずつ、楽しんでいきましょうね。あなたのコードが、今日も美しくブラウザに表示されることを応援しています！
コメント