CSSの継承と％問題

スタイルシートは継承機能を持っています。うまく作られているので、ほとんど気にする機会はありませんが、ちょっと覚えておきましょう。

スタイルシートにおける継承とは、親から子へプロパティの値が引き継がれることです。文字の大きさや色が引き継がれるのはご存じかと思います。

試しに例を見てみましょう。次のようなHTMLとCSSを書きます。

<div class="sample">
ここの文字色と
<p>
ここの文字色は同じになります
</p>
</div>

div.sample{
    color:#990000;
}

すると次のようになります。

親であるdivから子のpへ文字色の継承が行われ、同じ色になりました。

プロパティによって継承したり、しなかったりします。継承するとメチャクチャになってまうプロパティは継承しません。例えばborderなどです。borderが継承されたら、線だらけになってしまいますよね。

プロパティごとの継承の有無はCSS Dencitieのプロパティ詳細に掲載されているので、気になる人は見るといいでしょう。

プロパティのとれる値にinheritというのがあります。これは「親と同じ値を継承する」という意味になります。 これを使えば継承性の無いborderなども親の値を引き継ぐことが出来ます。
まぁ、滅多に使うことは無いでしょうけれど。私は一度も使ったことがないです。

継承はとても便利なのですが、時々頭がこんがらがることがあります。それがfont-sizeを%で指定したときの計算方法。

試しに例を見てみましょう。次のようなHTMLとCSSを書きます。

<div class="sample">
ここの文字サイズは120％
<p>
ここの文字サイズは80％。
</p>
</div>

body{
    font-size:100%;
}
div.sample{
    font-size:120%;
}
div.sample p{
    font-size:80%;
}

さて、問題。pの文字サイズはbodyの文字サイズを基準としたときの何％？

正解は96％。font-sizeは継承されるので、pの文字サイズはdiv.sampleの値を基準に算出されます。
したがって、pの文字サイズは1(基準サイズ)×1.2×0.8＝0.96(倍)となります。

font-sizeを％で指定しすぎると、ボックス単位で見たときのバランスは良くても、ページ全体で見るとメチャクチャになってしまう可能性があります。気をつけましょう。

---