ブログBLOG

フォントサイズの指定に「rem」を試してみた

こんにちは、ティウェブ藤園です。
 

みなさんはCSSでフォントサイズを指定するとき、
どういった単位を使っていますか?
 

今まで私は%をよく使用していました。
一般的にはpx%emなどが多いかと思いますが、
CSS3から新しく追加されたremでの指定方法が便利だったのでご紹介します。
 

■rem

remとは、root emの略です。
emが親要素を基準とするのに対して、
root要素という最上位の要素に対して相対的に指定する単位です。
 

具体的に先日の案件で使用した方法を下記に記します。
 

まず、最上位の要素としてhtmlfont-size: 10px;を指定します。
以降のrem指定は「10px×remサイズ」で計算されます。
 

em%は入れ子の構造になると、親要素×子要素×孫要素……と、複利計算のように掛け合わされてしまいます。
 

しかし、remで指定すれば最上位の要素を基準となるため、htmlfont-size: 10px;を指定しておけば、どれだけ入れ子になっても1.6rem16pxになります。
 

■remを使用するにあたって

remはCSS3から追加された単位のため、CSS3に対応していないブラウザでは使用できません。
 
しかし、前回紹介したフレキシブルボックスと同様、要件上問題がなければ、フォントサイズをとてもシンプルに指定できるので、ぜひ導入してみてください。