CSSを書いていて「なぜか反映されない」「色が変わらない」と困った経験はありませんか？
実はその原因の多くは、CSSの「優先順位」や「継承」の仕組みにあります。
本記事では、CSSのスタイルがどのように適用されるか、どんなルールで決まっているかをわかりやすく解説します。
初心者がつまずきやすい「効かないCSS」を卒業しましょう！
CSSが「効かない」ときの基本的な考え方
ブラウザは、複数のCSSルールが同じ要素に適用されるとき、どのルールを優先するかを判断しています。
その判断基準となるのが「優先順位（Specificity）」です。
また、要素に明示的な指定がない場合は、**親要素のスタイルを引き継ぐ「継承（inheritance）」**が働きます。
CSSの優先順位（Specificity）とは？
優先順位の基本ルール
複数のスタイルが競合した場合、CSSは以下の順番で優先順位を判断します。
| 優先順位 | スタイルの種類 | 例 | 優先度（数値化） |
|---|---|---|---|
| ① 最優先 | !important | color: red !important; | ∞ |
| ② | インラインスタイル | <p style="color: blue;"> | 1000 |
| ③ | IDセレクタ | #title {} | 100 |
| ④ | クラス・属性・擬似クラス | .text, [type="text"], :hover | 10 |
| ⑤ | 要素セレクタ・擬似要素 | p, h1, ::before | 1 |
| ⑥ | 継承されたスタイル | （親要素の影響） | 0 |
具体例で理解しよう
See the Pen Untitled by suguru (@suguru22) on CodePen.
この場合、同じ「color」が3箇所で指定されています。
優先順位の高いIDセレクタ #text が最も強いため、最終的に文字は 赤色 で表示されます。
!importantの使い方と注意点
!important をつけると、そのスタイルは最優先で適用されます。
p {
color: gray !important;
}どんな強い指定があっても、上記が最優先されます。
ただし、!important の使いすぎは保守性を下げる原因になります。
管理しづらくなるため、最終手段として限定的に使うのがベストです。
継承（inherit）とは？
CSSの一部のプロパティは、親要素の値を自動的に引き継ぎます。
これを「継承」と呼びます。
継承されるプロパティの例
| カテゴリ | 継承される主なプロパティ |
|---|---|
| テキスト | color, font-size, font-family, letter-spacing, line-height |
| リスト | list-style-type, list-style-position |
| テーブル | caption-side, border-collapse |
継承されないプロパティの例
| カテゴリ | 継承されない主なプロパティ |
|---|---|
| ボックス | margin, padding, border, width, height |
| 背景 | background-color, background-image |
継承を強制する方法
明示的に継承させたい場合は、値として inherit を指定します。
See the Pen Untitled by suguru (@suguru22) on CodePen.
結果：親の青い文字色が子要素にも適用されます。
同じセレクタ同士の競合はどうなる？
優先順位が全く同じ場合、
ブラウザは「後から書かれたCSSを優先」します。
See the Pen Untitled by suguru (@suguru22) on CodePen.
この場合、最終的に 赤色 が適用されます。
つまり、下に書いたスタイルが勝つというルールです。
優先順位の数値化で考える（実践例）
ブラウザはセレクタごとに「スコア」をつけて優先順位を判断します。
| セレクタ | スコア | 解説 |
|---|---|---|
#main .text p | 111 | ID(100) + class(10) + element(1) |
.content p | 11 | class(10) + element(1) |
p | 1 | element(1) |
よって、#main .text p が最も強く適用されます。
よくある「効かないCSS」原因と対策
| 原因 | 解決方法 |
|---|---|
| 優先順位の低いセレクタで上書きしようとしている | より詳細なセレクタにする or 不要な競合を削除 |
| 外部CSSよりもインラインスタイルが優先されている | インラインスタイルを整理する |
| 別のCSSファイルで上書きされている | 読み込み順を確認（後から読み込む方が強い） |
| 継承されないプロパティを期待している | 明示的に指定 or inherit を使う |
| !important による強制上書き | 不要な!importantを削除・整理 |
優先順位と継承を理解することで得られること
- スタイルが「なぜ効かないのか」を冷静に分析できる
- コードの保守性・再利用性が高まる
- チーム開発でも衝突が少なくなる
- トラブルシューティングが速くなる
CSSは“見た目の指定”だけでなく、
「どの指定が勝つのか」まで理解することが本当のスキルアップにつながります。
まとめ表：CSSの優先順位と継承早見表
| 概念 | 内容 | ポイント |
|---|---|---|
| 優先順位 | 同じプロパティが重なった際、どれを採用するかを決める仕組み | ID > class > 要素 > 継承 |
| 継承 | 親要素のスタイルが子要素に引き継がれる | color, font-sizeなど |
| !important | 最強の指定。全てを上書きする | 乱用注意 |
| インラインスタイル | HTMLに直接書かれたCSS | 外部CSSより優先される |
| 後勝ちルール | 同じ優先度なら後から書いた方が勝つ | ファイル順にも注意 |
| inherit | 強制的に親の値を継承する | 明示的な継承に便利 |
