詳細度（specificity）とは？CSSが効かない時に確認する優先順位

詳細度とは何か

詳細度とは、同じ要素に複数のスタイル指定が当たったときに、どれを優先するかを決める強さの指標です。CSSは後から書いたものが勝つと思われがちですが、実際にはまず詳細度の高い指定が優先されます。

セレクタの種類によって強さが異なり、ID指定が最も強く、次にクラスや擬似クラス、最後にタグ指定という順になります。これらの数を数えて強さを比べる仕組みです。

詳細度が同じだった場合に限り、後から書かれた指定が勝ちます。つまり順序より先に強さが効くという点が、初心者がつまずきやすいポイントです。

強さの計算ルール

詳細度は、セレクタに含まれるID・クラスや擬似クラス・タグの数を数えて比べます。ID指定が一つでもあれば、クラスやタグをいくつ並べても勝てないほど強い、という大小関係があります。

たとえばID一つの指定と、クラスを複数並べた指定では、原則としてID側が優先されます。クラス同士なら数が多い方が強く、それも同じなら最後に登場した指定が採用されます。

インラインで要素に直接書いたスタイルは、通常のセレクタよりさらに強く働きます。強さの段階を把握しておくと、なぜそのスタイルが勝ったのかを説明できるようになります。

実務ではどこで関係する？

詳細度は言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

詳細度（specificity）について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

効かないCSSを切り分ける手順

スタイルが反映されないときは、感覚で書き換える前に原因を順に確認します。次の手順で詳細度の問題かどうかを切り分けられます。

1. ブラウザの開発者ツールで対象要素を選ぶ
2. 適用中のスタイルと、打ち消し線で表示された上書きされたスタイルを確認する
3. 上書きしている側のセレクタにIDやインライン指定が含まれていないか調べる
4. 詳細度が原因なら、勝てる強さのセレクタに書き換えるか構成を見直す
5. 綴り違いやセレクタの当たり外れでないことも合わせて確認する

importantに頼りすぎない

宣言にimportantを付けると、詳細度の大小を飛び越えて強制的に優先されます。一見便利ですが、安易に多用すると、後から別のスタイルで上書きしたいときに身動きが取れなくなります。

importantで上書きしたものは、さらに別のimportantでしか覆せなくなり、強さの競争が連鎖します。最終的にどのスタイルが効くのか追いづらくなり、保守性が下がります。

まずはセレクタの構成を整理して、自然な詳細度で意図通りに当たるようにするのが望ましい解決です。importantは本当に最後の手段として扱うのが無難です。

詳細度を上げすぎない設計

保守しやすいCSSは、詳細度をできるだけ低く均一に保つ設計です。IDセレクタやインライン指定を多用すると個々の強さが上がり、後から調整しづらくなります。

クラス中心で組み立て、命名規則をそろえておくと、上書きが必要なときも予測しやすくなります。強さを競わせるのではなく、フラットに保つことが長期的な扱いやすさにつながります。

上書きの検証結果を共有する

詳細度の問題は、実際の画面でどのスタイルが勝つかを見て初めて納得できることが多いものです。検証用に作った見本ページをチームに共有したいとき、ギガサイト便ならHTMLをドロップするだけで表示できるURLを発行できます。

noindexが付くため検索結果には出ず、関係者だけの確認に向きます。見せたくない相手がいる場合はパスワードやメール認証を併用すると安心です。