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

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

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

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

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

html {
	font-size: 10px;
}
body {
	font-size: 1.6rem;
}
h1 {
	font-size: 2.4rem;
}

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

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

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

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

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

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