プラカンブログSTAFF BLOG

2016.10.25

【CSS3】フォントサイズを「rem」で指定するべき理由

rem_fontsize

デザイナーの嶋津です。皆さんはフォントサイズを指定する際、どのような単位を使っていますか?

一般的に、相対指定は「%」や「em」、絶対指定は「px」を使ってフォントサイズを制御していると思います。しかし、CSS3から新たに追加された「rem」での指定の方が、IE8対応が少なくなってきた昨今、シンプルでいいのではないかと思うようになりました。

そこで今回は、この記事で「rem」の素晴らしさを紹介したいと思います。

remとは?

さて、「rem」とはどのような単位なのでしょうか。「em」や「%」の場合、親要素(が基準)に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素(最上位の要素)に対して相対的に指定する単位になります。

では、「rem」を理解するために、下記に「em」と「rem」のコードを具体的に記載しましょう。

emでフォントサイズを指定

body { font-size:62.5%; } /* 10px */
p  { font-size: 1.6em; } /* 16px */
li { font-size: 1.6em; } /* 16px */

まず、ベースフォントサイズを作ります。bodyに「%」を使って、主要ブラウザのデフォルトフォントサイズ「16px」を「10px」になるように記述します。こうすることで、フォントのサイズを「16px」にするためには「1.6em」、「20px」にするには「2em」とシンプルに指定できるようになります。

しかし、「em」の場合、入れ子の構造になると、複利計算されてしまいます。例えば、「li」の子要素の「p」は「16px」にはならなく、「1.6px × 1.6」で「26px」となります。したがって、下記のように「li」の子要素の「p」に「1em」を記述してあげて、複利計算を避けなければなりません。

body { font-size:62.5%; } /* 10px */
p  { font-size: 1.6em; } /* 16px */
li { font-size: 1.6em; } /* 16px */
li p { font-size: 1em; } /* 16px */

remでフォントサイズを指定

html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */
p  { font-size: 1.6rem; } /* 16px */
li { font-size: 1.6rem; } /* 16px */
li p { font-size: 1.6rem; } /* 16px */

一方、「rem」でのサイズ指定は、ルート(根)という名の通り、最上位の親要素(html要素)を基準値とするため、複利計算の心配はいらなくなり、どんなに入れ子になろうとも、シンプルに「1.6rem」は「16px」となるのです。

remの対応ブラウザ

「rem」はCSS3から新たに追加された単位です。そのため、CSS3に対応していないIE8以下のブラウザには対応していません。しかし、2016年も終わろうとしている現在では、IE8以下のブラウザまで対応することは少なくなってきましたので、あまり心配する必要はないのではないでしょうか。

CSS3やHTML5のブラウザ対応状況は、こちらのサイト「Can I use」でいつでも確認できるので、ぜひ覗いてみてください。

まとめ

いかがでしょうか。従来の指定方法よりも、とても簡単でスマートではありませんか。フォントサイズを「px」や「%」、「em」などで記述している方は、ぜひこの機会に「rem」の導入を検討してみることをおすすめします♪

参考文献

フォントサイズの指定方法 px em % はもう古い

[CSS]フォントのサイズ指定はpx? em? 既存の再検討とこれからのテクニック

+dc(嶋)

この記事は、SHIMAZU が書きました。