CSS の font-size属性を em で指定するとサイズが激変

「Web ビジネスコンサルタントのネタ帳」に以下の記事が載っていた。
フォントサイズを固定するな！− 後悔しないためのWebデザイン
http://neta.ywcafe.net/000349.html

要するに、ユーザがブラウザの文字サイズ変更機能を使えるようにページをデザインするべきだ、という話。昔からよく言われていることだ。いろいろ反論や個別の事情があると思うが、私も文字サイズは変えられた方が良いと思う。

たとえば、日経 IT Pro の Feed Back などは、ごく小さいフォントサイズに固定されてしまっていて大変見づらい。http://itpro.nikkeibp.co.jp/members/parts/putfeedback.jsp?_P ... こういったサイトを閲覧し、フォントサイズを変えたくても変えられないという経験をすると、自分がページをデザインするときくらいは、フォントサイズを変えられるようにしておこうと思うものだ。

- 文字サイズの変化が極端すぎる (2004-04-27でこの現象については対策済み)

当サイトでも文字サイズはユーザが変えられるようにしてある。どれどれ、確かめてみるか。「表示」の「文字サイズ」の「大」を選んでみる。うん、ちゃんと変わるね。でも、なんだか大きすぎる。「小」にすると、今度は小さすぎる。どうも極端に変わり過ぎなように感じる。前からこんなだったっけ?

- サイズが劇的に変わる理由は?

サイズが劇的に変わる理由を知りたくてウェブを見て回っていたら、たださんがこの件について書いているのを見つけた。

原因はスタイルシートの font-size 属性を em で指定しているからだという。パーセントで指定すると問題ないとのこと。

ただのにっき(2002-12-06) CSS: em単位指定
http://sho.tdiary.net/?date=20021206#p02

<ul>
<li><span>これは通常(無指定)の文字サイズ。ようは100%状態。</span></li>
<li><span style="font-size: 90%;">これはfont-size: 90%;を指定。</span></li>
<li><span style="font-size: 75%;">これはfont-size: 75%;を指定。</span></li>
<li><span style="font-size: 0.9em;">これはfont-size: 0.9em;を指定。</span></li>
</ul>

最後のヤツは、IEで見ると「どこが0.9やねんっ」とツッコミを入れざるを得ないほどひどく小さい。見た目の大きさは75%のとほぼ同じである。なるほど、一部のテーマでツッコミの文字サイズが妙に小さかったのはこのせいか。これはひどいなぁ。

うーん、当たり前だけどマークアップせずに引用すると全然実感がわかない。まあ、直接たださんのページを見る方が早い。

下のツッコミに書いたように、font-sizeをemで指定すると特別ルールが適用されるようなので(原本と和訳)、単に文字サイズを指定したいのなら(IEの実装が正しいかどうかは別にしても)パーセント指定が無難という気はする。

● Yuya (2002-12-06(金) 14:51)
%は高さ基準で、emは幅基準じゃないですかね。（嘘だったらごめんなさい）

● ただただし (2002-12-06(金) 15:26)
高さを90%にした場合と幅を0.9にした場合で、違いがあったら困るような……。
あ、仕様書に「font-sizeにemを使った場合は親要素の値を参照する」って書いてあるなぁ。これか?

● しめりぃ (2002-12-06(金) 15:38)
お気づきの通りemの場合は親要素を参照するので、入れ子式になった場合は非常に小さくなってしまうようです。そしてそれに気づかずにテーマを作ってしまったのは私です。あはん。

そうか、font-size 属性を em で指定した場合は特別な方法で計算するのが原因なのか。で、どんな方法で計算するんだろう?

- font-size を em で指定した場合の特別な計算方法

CSS2の構文と基本データ型 4.3.2 長さ（Lengths）
http://www.swlab.csce.kyushu-u.ac.jp/man/rec-css2/syndata.ht ...

'em'という相対単位は、それが使われた要素の'font-size' の算出値を参照する。例外は'font-size'自身にこの単位を用いた場合で、その時は親要素の'font-size' の算出値を参照する。この単位は縦横の大きさを示すのに用いる（印刷の世界では、この単位をクワタ幅と呼ぶことがある）。

えーと、要するにこういうことか。

margin 属性などの指定に em を使うと、その要素のフォントサイズと em で指定した数を計算して値を導き出す。
しかし、font-size の指定に em を使うと、要素のフォントサイズを決めるのに自分自身のフォントサイズを参照してしまうので、この場合は例外として親要素の算出値と em で指定した数を計算して値を出す。

- 納得いかない

あれ・・・? でも、上記の仕様はブラウザの文字サイズ指定を変えたときに、サイズが劇的に変化してしまう理由の説明になっていないんじゃないかな。「親要素の算出値を参照」って言ってるのに、IE は相対指定そのものを参照してしまっているように見える。

もしかして、私が勘違いしてるのかな。私は CSS の算出値や相対値の概念を詳しく知ってるわけじゃないし、調べてみるか。でも、ねむくなってきたので今日はここまで。続きはまた明日。