CSSのfont-size指定

CSSでフォントサイズを指定するときの注意。

サイズの継承

HTMLではHPBなどを使うとよく

<font size="5"><font size="2">Text</font></font>

なんかをやってしまう場合があるが、これを表示させると内側の設定が優先され、外側に設定したsize="5"は破棄される。ではCSSの場合はどうだろうか?次のソースを実行してみよう。

CSSの場合、ブラウザの標準モードと過去互換モードというややこしい動作が絡んでくるので、両方の場合で次のソースを検証する。なお、ブラウザの文字サイズの設定は"中"にした。CSSでフォントサイズを絶対値にすると内側が優先されるのは明らかなので、数値は相対値(通常サイズを100%とした設定)で行う。

<span style="font-size:100%;">■font-size:100%;</span><br>
<span style="font-size:80%;">■font-size:80%;</span><br>
<span style="font-size:120%;">■font-size:120%;</span><br>
<br>
<span style="font-size:100%;"><span style="font-size:80%;">■font-size:100%;-font-size:80%;</span></span><br>
<span style="font-size:100%;"><span style="font-size:120%;">■font-size:100%;-font-size:120%;</span></span><br>
<span style="font-size:80%;"><span style="font-size:120%;">■font-size:80%;-font-size:120%;</span></span><br>
<span style="font-size:120%;"><span style="font-size:80%;">■font-size:120%;-font-size:80%;</span></span><br>
<span style="font-size:80%;"><span style="font-size:80%;">■font-size:80%;-font-size:80%;</span></span><br>

IE6,Firefox,Opera7,Netscape7(全てWindows版)で調べると、どれも外側のCSSのサイズを継承していることが分かる。また、2つのモードでも大差はなかった。

emと%

次はサイズの単位であるemと%の違い。em単位とは、1emを通常のサイズとした相対値のことだ。0.5emは半分のサイズ。2emは2倍。%は、100%を通常のサイズとした相対値のことだ。50%は半分、200%は2倍。この2つに違いがあるのかどうか検証してみる。今回は2つのモードは無視して、過去互換モードだけで検証する。

<span style="font-size:100%;">■100%;</span>|<span style="font-size:1em;">■1em;</span><br>
<span style="font-size:70%;">■70%;</span>|<span style="font-size:0.7em;">■0.7em;</span><br>
<span style="font-size:130%;">■130%;</span>|<span style="font-size:1.3em;">■1.3em;</span><br>

ブラウザの文字サイズを"中"にしている方は気づかないだろうが、これを変えると変化が表示する。それを表で示してみた。

emと%"
ブラウザ名 文字サイズ"小"(-1段階) 文字サイズ"中" 文字サイズ"大"(+1段階)
MSIE6 SP1 MSIE6 文字サイズ小 MSIE6 文字サイズ中 MSIE6 文字サイズ大
Mozilla Firefox1.x Firefox 文字サイズ小 Firefox 文字サイズ中 Firefox 文字サイズ大
Opera7.x Opera 文字サイズ小 Opera 文字サイズ中 Opera 文字サイズ大
Netscape7.x Netscape7 文字サイズ小 Netscape7 文字サイズ中 Netscape7 文字サイズ大

まず違う点が2つある。 Opera7.xは、文字サイズの拡大ではなくズ−ムだ。枠の大きさも同じ縮尺で拡大される。これはいいとして、問題なのはIE。なんと文字サイズが違うとそれぞれ大きさが違う!

em指定のほうが極端に変動してしまうのだ。やってみれば分かるが、文字サイズを最小にすると小さすぎて見えない。このように他のブラウザと比べてみれば一目瞭然だが、%指定にしたほうがどのブラウザで見てもサイズの変動が小さい。結論としては、font-sizeを指定するときはemより%を使うべきだ。(ただし、em自体はfont-size以外に、widthやheightなどで利用できるので全てのemを使うなとは言わない)

smallとlarge

最後はCSSの文字サイズの単位であるsmallとlarge系についての注意点。smallとlarge系統のサイズ指定を列挙してみる。

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

下にいくほど大きくなるのだが、実はこれ、ブラウザと表示モードによって大きさが変わる。

表にまとめてみた。

標準モードと過去互換モード
ブラウザ 標準モード 過去互換モード
MSIE6 SP1 1.2倍率 1.5倍率
Mozilla Firefox1.x 1.2倍率 1.2倍率
Opera7.x 1.2倍率 1.5倍率
Netscape7.x 1.2倍率 1.2倍率

ページ情報

作成日時
2005/07/20
最終更新日時
2005/07/20
HTML4.01版
index.html
XHTML1.1版
index.xhtml
XML原本
index.xml