CSSは、同じ要素に複数のスタイルが適用される場合、どのスタイルを優先して反映させるか を判断するための「優先順位（Specificity）」があります。
また、HTMLの構造に合わせて一部のスタイルが自動的に子要素へ伝わる「継承（Inheritance）」という仕組みもあります。
この記事では、CSSの中でもつまずきやすい
優先順位・継承のルール を初心者向けに分かりやすく解説します。
CSSの優先順位とは？
CSSには、複数のルールが同じ要素に当たる場合、
「どれを最終的に採用するか」を決めるための優先順位（Specificity）があります。
優先順位は以下の順で強くなります。
1. インラインCSS
2. IDセレクタ
3. クラス・属性・擬似クラス
4. タグセレクタ
5. 継承されたスタイル
6. ブラウザデフォルト
これを理解すれば、
「なぜCSSが効かないのか？」が驚くほど解決しやすくなります。
1. インラインCSSが最も強い
HTMLタグに直接書くスタイルです。
<p style="color: red;">この色は必ず赤になる</p>
外部CSSで p { color: blue; } と指定しても、
インラインが最優先され、赤色になります。
2. IDセレクタ（#id）
IDはページ内で1つしか使われないため、非常に強いセレクタです。
#main-title {
color: blue;
}
3. クラス・属性・擬似クラス
最もよく使うセレクタで、強さは中程度。
.title { ... }
a:hover { ... }
img[alt] { ... }
4. タグ（要素）セレクタ
p { ... }
h1 { ... }
ul { ... }
基本のセレクタの中ではもっとも弱い。
5. 継承スタイルは優先順位が最も弱い
親要素のスタイルが子要素に伝わるだけなので、
ほかのセレクタに簡単に上書きされます。
body {
font-size: 16px;
}
6. ブラウザデフォルトが最も弱い
ブラウザは、何もCSSを書かなくても
- h1は大きな文字
- pは1行空く
- aは青色で下線付き
という標準のCSSを持っています。
これは CSS の中で最も弱いルールです。
優先順位の実例で理解する
以下のHTMLがあるとします。
<p class="lead" id="message">テスト文章</p>
CSSを比較してみましょう。
p { color: gray; } ← 弱い
.lead { color: green; } ← 中
#message { color: blue; } ← 強い
最終的には IDセレクタが勝つ ので、青色になります。
優先順位を数値で見る（Specificity 値）
一般的には次のように数値化できます。
| 種類 | 値 |
|---|---|
| インラインCSS | 1000 |
| IDセレクタ | 100 |
| クラス・擬似クラス | 10 |
| タグセレクタ | 1 |
例：
#main .title p
- #main → 100
- .title → 10
- p → 1
合計 → 111
数値が大きいほど優先されます。
CSSの継承（Inheritance）の仕組み
CSSには、一部のスタイルが 親 → 子要素へ自動で伝わる「継承」 があります。
継承されるもの
| プロパティ | 内容 |
|---|---|
| color | 文字色 |
| font-size | 文字サイズ |
| line-height | 行間 |
| font-family | フォント |
| text-align | 文字揃え |
例：
body {
color: #333;
}
→ ページ全体の文字色が自動的に #333 になります。
継承されないもの
| プロパティ | 内容 |
|---|---|
| margin | 外側余白 |
| padding | 内側余白 |
| border | 枠線 |
| width / height | サイズ |
| display | 表示形式 |
これらは 親の値を子に伝えると危険 なため継承されません。
継承と優先順位を合わせて見ると理解が深まる
例：以下のCSSがある場合
body {
color: green;
}
p {
color: red;
}
body の color は継承されますが、
p に直接指定された red が勝ちます。
→ 継承は最弱の優先度
→ 直接指定したCSSが優先される
!important は使うべき？
CSSには強制的に優先させる !important があります。
p {
color: red !important;
}
これは通常の優先順位を無視して最強になります。
しかし使用は非推奨です。
理由：
- 全体の管理が困難になる
- 後でスタイル変更できなくなる
- トラブルの原因になる
→ 基本は使わない。
→ どうしても必要な時だけ（外部サービスのCSS対処など）。
まとめ
- CSSの優先順位は インライン > ID > クラス > タグ > 継承
- 継承は最弱の優先度で、直接指定が勝つ
- 文字関連のプロパティは継承される
- 余白やサイズなどは継承されない
- 基本、!important は使わない
優先順位を理解すると、CSSが反映されない原因の多くが解決します。
著者からのひと言
CSSが効かない理由の8割は「優先順位」と「継承」です。
ここを理解しておくと、今後のCSSトラブルが大幅に減ります。
一緒に確実にステップアップしていきましょう。
