CSSという迷宮へようこそ。フロントエンドの現場に長くいると、「なぜか色が反映されない！」「さっきまで効いていたはずなのに！」といったトラブルに何度も遭遇します。
実は、CSSのルールは非常に論理的です。今日は、CSSの中でも特に「親子関係」と「優先順位」という、誰もが一度は頭を抱えるテーマについて、肩の力を抜いてお話ししましょう。
—
親から子へ受け継がれる「DNA」：継承（Inheritance）の話
CSSには、「親の要素に設定したデザインは、子要素にも引き継がれる」という性質があります。これを「継承」と呼びます。
例えば、家系図を想像してみてください。お父さんの「瞳の色」や「髪質」が子供に受け継がれるのと同じです。CSSでも、`font-family`（フォントの種類）や`color`（文字色）などは、親に設定すれば、その中にある子要素、孫要素へと勝手に引き継がれていきます。
なぜ継承されるものと、されないものがあるの？
すべてのプロパティが継承されるわけではありません。例えば、`border`（枠線）や`margin`（外側の余白）は継承されません。
想像してみてください。もし「枠線」まで継承されたらどうなるでしょう？
ボタンの中に文字を入れただけで、ボタンの枠線が文字の周りにもガチガチについてしまい、画面が線だらけで大変なことになりますよね。
- 継承されるもの： 文字に関すること（`color`, `font-family`, `text-align` など）。「中身」の雰囲気は家族で揃えたほうが綺麗だから。
- 継承されないもの： 箱の形に関すること（`width`, `border`, `margin`, `padding` など）。箱のサイズまで親子で一緒だとデザインが崩壊するから。
これらは「設計者がそうなるように決めた」というより、「こうなっていた方が、圧倒的にWebサイトを作りやすいから」という現場の知恵なんです。
—
継承 vs カスケード：どちらが勝つの？
さて、ここからが本題です。「親から受け継いだはずなのに、直接指定したら上書きされた！」という現象。これが「カスケード（優先順位）」の正体です。
優先順位を決めるルールは、シンプルに言えば「より詳細に指定したほうが偉い」という格闘技のルールに似ています。
優先順位の「格付け」ランク
ブラウザは、以下の順番で「どれを優先すべきか」を判断しています。
1. 詳細度（Specificity）： どれだけ具体的に指定しているか。「全体」より「クラス名」、さらに「ID」の方が偉い！
2. 出現順序： 同じ強さなら、コードの「下の方（後から書いたほう）」が勝つ。
3. 継承： これが一番弱い。実は、継承された値は「指定なし」よりも弱いんです。
例え話：お買い物のルール
あなたが服屋さんにいるとします。
- 「お店全体（body）」のルール：全品10%OFF
- 「この棚（class=”sale-item”）」のルール：全品20%OFF
- 「この服そのもの（#item-01）」のルール：全品50%OFF
もしあなたが「この服」を選んだら、どれが適用されますか？ もちろん50%OFFですよね。CSSも同じです。`body`で指定するよりも、`class`で指定するほうが「場所」を限定しているので、より優先されるのです。
—
禁断の切り札：`!important` との付き合い方
時々、どうしても色が切り替わらないときに、魔法の呪文 `!important` を使う人がいます。
p {
color: blue !important; / どんなルールよりも最優先！ /
}
これは「力技」です。どんな優先順位も無視して無理やり適用させるため、多用すると「あとから修正が効かない」という地獄を見ることになります。現場では「最後の手段、あるいは負債の始まり」と教えることもあります。なるべく使わずに、詳細度の管理で解決するのがプロの技です。
—
実際に動かしてみよう
以下のコードをコピーして、HTMLファイルとして保存してみてください。優先順位の決着がどうつくか、目で見ることができます。
私は青色になります
私は緑色になります
—
最後に：つまずくことは、成長の証です
「CSSが思い通りに動かない」とイライラしたとき、思い出してください。それはあなたがコードを書き、試行錯誤している証拠です。
まずは「継承は文字関係」「直接指定するほうが、継承より強い」「詳細に書くほど優先される」という3点だけ覚えておけば大丈夫です。あとは、ブラウザの「検証ツール（F12キー）」を開いて、どのルールが打ち消されているかを確認する癖をつけるだけで、CSSの悩みは劇的に減っていきます。
焦らず、一歩ずつ。あなたの書くコードが、誰かの使いやすいサイトになる日を楽しみにしていますよ！
コメント