BLOG

ブログ

coding

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

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

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

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

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

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

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

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

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

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

remはCSS3から追加された単位のため、CSS3に対応していないブラウザでは使用できません。

しかし、前回紹介したフレキシブルボックスと同様、要件上問題がなければ、フォントサイズをとてもシンプルに指定できるので、ぜひ導入してみてください。