CSS3の新単位「rem」で文字サイズを分かりやすく指定

文字が意図しないサイズで表示されてしまう？

CSSで文字サイズを指定する際には、「70%」や「0.7em」のような割合で指定することもできます。これは、「親要素の文字サイズ」を基準にして、表示する文字サイズを指定する方法です。

この方法だと、入れ子構造になっている要素では、構造が深くなればなるほど、文字サイズが意図しない大きさになったり、どれくらいのサイズで表示されるのかが分かりにくくなってしまう問題があります。例えば以下のようにです。

■リストの項目がどんどん小さくなる？
リストの文字サイズを、以下のようなCSSを使って割合で指定すると、リストの階層が深くなるごとに、文字サイズも変化してしまいます。

ul { font-size: 80%; } /* 0.8emと指定しても同じ */

このCSSを適用すると、リストの第1階層目を作るul要素が80%のサイズで表示されます。しかし、第2階層目を作るul要素は『「80%」に対する80%』となるため64%(＝80%×80%)のサイズで表示されます。第3階層は51.2%(＝64%×80%)になり、第4階層は約40%(＝51.2%×80%)になります。

※ただし、ブラウザによっては、「最小フォントサイズ」の設定機能があり、指定サイズよりも小さくはならない場合があります。右図は、Chromeのフォント設定画面です。デフォルトでは、最小フォントサイズが「10pt」に設定されており、すべての文字はそれよりも小さくはなりません。
■結局どれくらいの大きさで表示されるのかが分かりにくい
文字サイズを80％にしたボックス(div要素)の中で、見出し(h2要素)の文字サイズを120％にすると、結局見出しの文字サイズはどれくらいで表示されるでしょうか。

div.coverbox    { font-size: 80%; }  /* 0.8emと指定しても同じ */
div.coverbox h2 { font-size: 120%; } /* 1.2emと指定しても同じ */

一見、見出しは大きめに表示されそうな気がします。しかし、ボックス内の文字サイズが80%であり、それに対する120%なので、見出しは96%(＝80%×120%)の大きさで表示されます。つまり、「文字サイズを指定していない文字」よりも小さく表示されます。

このように、文字サイズとして指定した値は子要素へも継承されるため、サイズを割合で指定した上で入れ子構造を作ると、意図せず大きさが変化したり、どれくらいの大きさになるのかが把握しにくかったりします。

ルート要素の文字サイズを基準にできるCSS3の新単位「rem」で解決

このような問題を解決できる単位として、CSS3では新しく「rem」という単位が追加されました。この単位「rem」は、(親要素ではなく)「ルート要素の文字サイズ」を基準にして文字サイズを指定できる単位です。

そのため、CSSを適用した要素が入れ子構造になっていても、徐々に文字サイズが小さく(または大きく)なる問題は起こりません。文字サイズを割合で指定した複数のボックスを重ねてレイアウトしていても、どれくらいの文字サイズで表示されるのかが簡単に把握できます。

それでは次のページで、この新しい単位「rem」の使い方をご紹介致します。