---
title: "詳細度（specificity）とは？CSSが効かない時に確認する優先順位"
description: "CSSを書いたのにスタイルが反映されない原因の多くは「優先順位の競合」です。どのルールが勝つかを決める詳細度の計算方法を理解すれば、!importantに頼らずトラブルを素早く解決できます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/css-specificity-term"
markdown: "https://giga-site.com/articles/css-specificity-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 詳細度（specificity）とは？CSSが効かない時に確認する優先順位

CSSを書いたのにスタイルが反映されない。その多くは、別のルールが優先されて上書きされているのが原因です。どのルールが勝つかを決めるのが詳細度です。仕組みを理解すると、効かないCSSの原因をすばやく特定できるようになります。

> Source HTML: https://giga-site.com/articles/css-specificity-term
> Article index: https://giga-site.com/articles/index.md

## 詳細度とは何か

詳細度とは、同じ要素に複数のスタイル指定が当たったときに、どれを優先するかを決める強さの指標です。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が付くため検索結果には出ず、関係者だけの確認に向きます。見せたくない相手がいる場合はパスワードやメール認証を併用すると安心です。

## よくある質問

### 後に書いたCSSが必ず勝つわけではないのですか？

そうです。まず詳細度の高い指定が優先され、詳細度が同じ場合に限って後から書いた指定が勝ちます。順序より先に強さが効くため、効かない原因の多くはより強いセレクタによる上書きです。

### IDとクラスではどちらが優先されますか？

IDセレクタの方が強く優先されます。クラスをいくつ並べても、IDが一つ含まれる指定には原則として勝てません。この大小関係を知っていると、上書きされる理由を把握しやすくなります。

### importantは使ってもよいですか？

強制的に優先できますが、多用は避けるのが無難です。一度importantで上書きすると、さらに別のimportantでしか覆せなくなり、どのスタイルが効くか追いづらくなります。まずはセレクタ構成の見直しを検討します。

### 詳細度が原因かどうかはどう調べますか？

ブラウザの開発者ツールで要素を選ぶと、適用中のスタイルと打ち消し線で示された上書き済みのスタイルが一覧で見えます。上書きしている側のセレクタの強さを確認すれば、詳細度が原因か切り分けられます。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [書いたCSSが別のスタイルに上書きされて当たらないときの対処](https://giga-site.com/articles/css-specificity-not-applied/index.md)
- [CSSセレクタとは？要素を狙ってスタイルを当てる基礎](https://giga-site.com/articles/css-selector-term/index.md)
- [CSSのpositionとは？static・relative・absolute・fixedの違い](https://giga-site.com/articles/css-position-term/index.md)
- [px・em・rem・%とは？CSSの単位の違いをやさしく解説](https://giga-site.com/articles/css-units-term/index.md)
- [CSSカスタムプロパティ（変数）とは？色やサイズを使い回す仕組み](https://giga-site.com/articles/css-variables-term/index.md)
- [グラデーションとは？CSSで色を滑らかに変化させる基礎](https://giga-site.com/articles/css-gradient-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "詳細度（specificity）とは？CSSが効かない時に確認する優先順位",
  "description": "CSSを書いたのにスタイルが反映されない原因の多くは「優先順位の競合」です。どのルールが勝つかを決める詳細度の計算方法を理解すれば、!importantに頼らずトラブルを素早く解決できます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/css-specificity-term",
  "url": "https://giga-site.com/articles/css-specificity-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "後に書いたCSSが必ず勝つわけではないのですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "そうです。まず詳細度の高い指定が優先され、詳細度が同じ場合に限って後から書いた指定が勝ちます。順序より先に強さが効くため、効かない原因の多くはより強いセレクタによる上書きです。"
      }
    },
    {
      "@type": "Question",
      "name": "IDとクラスではどちらが優先されますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "IDセレクタの方が強く優先されます。クラスをいくつ並べても、IDが一つ含まれる指定には原則として勝てません。この大小関係を知っていると、上書きされる理由を把握しやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "importantは使ってもよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "強制的に優先できますが、多用は避けるのが無難です。一度importantで上書きすると、さらに別のimportantでしか覆せなくなり、どのスタイルが効くか追いづらくなります。まずはセレクタ構成の見直しを検討します。"
      }
    },
    {
      "@type": "Question",
      "name": "詳細度が原因かどうかはどう調べますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ブラウザの開発者ツールで要素を選ぶと、適用中のスタイルと打ち消し線で示された上書き済みのスタイルが一覧で見えます。上書きしている側のセレクタの強さを確認すれば、詳細度が原因か切り分けられます。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```