font-sizeのあれこれ

Pocket
[`evernote` not found]

cssのかなりマニアックな話題です。

A List Apart: Articles: Learning to Love the Boring Bits of CSS というブログに書かれていたのですが、font-sizeを指定する場合、「px」で指定するとIEでフォントサイズが固定されてしまうという弊害があるので、「%」や「em」で指定するのが一般的です。

ちなみにemとは親要素のfont-sizeを1としたサイズです。
例えば、該当するブロックの親要素が14pxの場合 1em=14pxとなります。

個人的には、yui-fontというyahoo!が提供しているフォントサイズを特定の「%」で指定することで対応したpx単位のサイズを表現できるというライブラリを使っています。

「em」で指定する場合は、親要素のfont-sizeを62.5%と指定する事でデフォルトのフォントサイズを10px相当にすることができるので、14pxにしたければ フォントサイズを1.4と指定してあげればよい事になります。

html {
     font-size:62.6%;
}
p {
     font-size:1.4em;
}

ここからが、問題なのですが、フォントサイズが入れ子になっていて、一部だけ大きく表示したい場合

例えば、

<p>「ではみなさんは、そういうふうに川だと云われたり、
<span>乳の流れたあと</span>だと云われたりしていた
このぼんやりと白いものがほんとうは何かご承知ですか。」
先生は、黒板に吊した大きな黒い星座の図の、上から下へ
白くけぶった銀河帯のようなところを指しながら、
みんなに問をかけました。</p>
p {
     font-size:1.4em;
}
p span {
     font-size:1.8em;
}

spanの部分だけ18pxにしたいのですが、実際には
1.4 × 1.8 = 2.52 25px相当になってしまいます。
これは、emが親要素のフォントサイズを基準にしているためで、spanのフォントサイズは1.4em=14pxなので
14pxの1.8倍という数値になってしまうからです。

困ります。

そこで登場するのが「rem」という単位です。これはcss3から登場した単位になりますので、一部のブラウザでは対応していないのですが、「root」+「em」という意味でroot要素つまりhtml要素のフォントサイズを継承してemと同じ計算ができる単位になります。

先ほどの例でいうとspan要素を1.8remと指定してあげれば、
root要素(10px)×1.8=18pxというフォントサイズになる訳です。

html {
     font-size:62.5%;
}
p {
     font-size:1.4rem;
}
p span {
     font-size:1.8rem;
}

DEMO

あまり華やかなコトではないので、スルーしがちですが、きちんと理解しておきたい部分ですね。

Follow me!

Pocket
[`evernote` not found]

カテゴリーcss

コメントは受け付けていません。