CSSの継承を制するものがレイアウトを制する｜現場で使える実践テクニック
こんにちは！
今日は「CSSの継承を理解して、予期しないスタイル問題を解決する方法」について解説します。
なぜ継承のトラブルは起きるのか
実はね、僕も新人時代、継承の仕組みをちゃんと理解してなくて、めっちゃ苦労した経験があります。
「親要素に font-size を指定したら、なぜか子要素全部に反映されちゃった」とか、「子要素だけ別のサイズにしたいのに、親の指定が邪魔をしてる」みたいなことがほんま よくありました。
CSSには「継承」という概念があるんですが、これを理解してないと、コードを書いてるたびに「あれ、なんで効かないの？」っていう状況に陥ります。
現場でよく見るのは、初心者が「親要素のスタイルが勝手に子要素に反映されてしまう」という悩みなんです。
継承自体は CSS の仕様の一部で、むしろ便利な機能なんですよ。
ただし、それをちゃんと理解して使い分けないと、後々メンテナンスが大変になっちゃうということなんです。
継承されるプロパティと継承されないプロパティ
まず、大事なポイントとして、CSSの全てのプロパティが継承されるわけじゃない、ということを知っておきましょう。
継承されるプロパティと継承されないプロパティがあるんです。
継承される主なプロパティ：
font-size、font-weight、font-familyなどのフォント関連color（テキストカラー）line-heighttext-alignletter-spacing
継承されない主なプロパティ：
margin、padding（外側・内側の余白）border（枠線）width、height（幅・高さ）background（背景）display、position（レイアウト系）
ほら、よくあるんですよ。
「親に margin: 20px; を指定すれば、子もマージンが入るんだろ」って思って試したら、全く効かなかった、みたいなケース。
これは margin が継承されないプロパティだからなんです。
逆に font-size を親に指定すると、特に指定しない限り、子要素はその font-size を継承しちゃうんですよ。
これが「あれ、意図してないのに…」っていう状況を生むわけです。
親の指定が子に影響してしまう問題と解決法
では、実際に困る状況と、その解決法をお話しします。
よくある状況：親に color を指定したら、全ての子要素のテキストカラーが変わってしまった
例えば、<header> 要素にこんな感じで書いたとします：
header {
color: #333;
}
すると、その <header> の中に入ってる <a> タグとか <span> とか、全部の要素がこの色を継承しちゃいます。
「アクセスリンクの色は別色にしたいのに…」みたいな状況になる、わけです。
解決法1：子要素で上書きする
header {
color: #333;
}
header a {
color: #0066cc; /* 子要素で上書き */
}
これが一番シンプルな方法ですね。
親で継承されたスタイルを、子要素のセレクターで上書きしちゃう、というやり方です。
解決法2：継承を明示的に無効化する
時には、「この子要素には親の継承を一切受け取らせたくない」という場合もあります。
その時は inherit: initial; を使うといいですよ。
header a {
color: initial; /* 親の色を無視して、デフォルト値に戻す */
}
ただし initial はブラウザのデフォルト値に戻すので、自分で色を指定する必要があるんです。
実際の現場での困りごと：複数の親要素からの継承が重なる
複雑な構造になると、こんなことが起きます。<body> に font-size: 14px;<main> に font-size: 16px;<article> に font-size: 18px;
…こうなると、どの値が最終的に適用されるのか、わかんなくなっちゃう、わけです。
こういう時は rem 単位を使うといいですよ。rem は常にルート要素（<html>）の font-size を基準にするので、継承の複雑さを避けられます。
html {
font-size: 16px; /* ここが基準 */
}
h1 {
font-size: 2rem; /* 16px * 2 = 32px */
}
p {
font-size: 1rem; /* 16px */
}
このようにすることで、継承による複雑さを最小限に抑えられます。
まとめ
CSSの継承は、本当は便利な機能なんです。
でも、その仕組みを理解してないと、予期しないスタイルになったり、デバッグが大変になったりしちゃいます。
覚えておきましょう：
- フォント関連と色は継承される
- マージン、パディング、サイズは継承されない
- 継承を上書きしたい時は、子要素でセレクターを指定して上書きする
- 複数階層の継承が絡む時は
rem単位を活用する
これらを意識して、CSSを書くようにするといいですよ。
最初は戸惑うか