CSSのスタイルの継承
CSSのスタイルの継承を理解することは、とても大事です。
CSSのスタイルの継承を理解していないと、「なんで変化しないの？」といったトラブルや、「なんで設定してないのにこうなってるの？」といった困った状態にほぼ100%陥ります。
同じ状況は検索しても出てこない場合が多く、八方塞がりになることも多いため、この場ですぐに理解しておきましょう。
CSSのスタイルの継承
親要素に適用したスタイルは子要素に引き継がれる
スタイルの継承は、HTMLの構造と深く関わりがあります。
HTMLには、親要素と子要素という考え方があります。 以下の例なら、bodyタグが親要素。 h1タグとpタグが子要素になります。
<body>
<h1>CSSのスタイルの継承</h1>
<p>こんにちは。これはスタイルの継承のサンプルテキストです。
</p>
</body>CSSのスタイルの継承は、親要素に適用したスタイルは子要素に引き継がれることをいいます。 たとえば、bodyタグにCSSをつけると、子要素であるh1とpタグにも引き継がれます。 CSSはCascading Style Sheetsの略で、cascadeは段階的に流れる滝の意味があります。それは、HTMLの親要素から子要素へスタイルが引き継がれていくシートという意味です。
継承ができないプロパティが存在する
CSSのスタイルの継承は、すべてのプロパティで起こるわけではないという点に注意が必要です。
つまり、スタイルの継承ができないプロパティが存在します。
たとえば、colorは継承されるけど、borderは継承されません。
<body>
<h1>CSSのスタイルの継承</h1>
<p>こんにちは。これはスタイルの継承のサンプルテキストです。</p>
</body>body {
color: blue;
border: 1px solid grey;
}
どのプロパティが継承できるのかは、MDNの「仕様書」で継承「あり」か「なし」の記載でチェックできます。 ざっと自分がよく使うものをまとめておきます。 borderプロパティのように、継承しないタイプのプロパティは、適用したい子要素にborderプロパティを追加し、値をinheritと宣言することで継承できます。 inheritは継承の意味です。
<body>
<h1>CSSのスタイルの継承</h1>
<p>こんにちは。これはスタイルの継承のサンプルテキストです。</p>
</body>
body {
color: blue;
border: 1px solid grey;
}
h1 {
border: inherit;
}