フォントサイズをCSS3の「rem」で指定する

CSSでの文字サイズの指定方法

「%」や「em」で指定

親要素の文字サイズを基準にして指定するため、入れ子構造になっている要素では階層が深くなると複利計算されて、全く意図しない文字サイズになってしまう。

以下のように文字サイズを指定すると、第2階層のol要素は「90%」に対する90%となり、実際は親要素の81%のサイズで表示される。

「rem」で指定

親要素ではなく、root要素の文字サイズ（HTMLの場合はhtml要素）を基準にして指定するため、入れ子構造で階層が深くなっても、意図通りの文字サイズを再現できる。

「rem」の使い方

第2階層のol要素内の文字列「文字サイズ指定」は、root要素（html要素）のフォントサイズを基準とするので、14pxになる。（「10px = 1rem」）

E8以下には未対応なので、最初に「px」で定義してから「rem」で再び定義する必要がある。