【CSS3】フォントサイズの新しい単位「rem」の使い方について

非対応ブラウザさえ無ければね。 CSSでのフォントサイズ指定は「px」や「em」を使うのが一般的でしたが、CSS3で追加された「rem」という単位がとても使いやすそうなので、使い方について調べてみました。

remとemの違い

emが親要素を基準としたサイズであるのに対し、remはroot (根っこ)が基準となっています。簡単に言うとhtmlに指定されたフォントサイズを基準とした倍率です。

まずはemで指定した場合の挙動を見てみましょう。
以下のような構成の場合、div内の文字サイズは「22.5px」になります。

HTML

CSS

emは親要素を基準とした単位なので、こういう計算になります。
次に、remを使った場合の挙動を見てみましょう。

remの場合

HTML

CSS

このように、bodyに指定されたfont-size:1.5em;は無視して、htmlに指定された10pxを基準としたサイズが求められます。
使い所にもよりますが、こっちのほうが管理しやすそう…

ブラウザの対応状況と対策

各種ブラウザの対応状況はコチラです。 最近のブラウザはほとんどremに対応していますが、IE8が非対応というのが厄介ですね…レガシーブラウザを考慮するなら、remでの指定前にpxで指定しておくのが無難です。

HTML

CSS

ダルいｯ…！

ただ、最近はIE8以下の利用者がかなり減っているので、めんどくさい人は無視していいかも？ちなみに当ブログの場合、IE8以下の訪問者は全体の2%くらいです。
対策はめんどくさいけど実用したい！という人は、スマートフォン用のテンプレートから書き換えてみてはいかがでしょうか。