kitaoka
CSS3の「rem」でフォントサイズ指定
フォントサイズを指定するとき、「em」、「%」、「px」を使って指定することが多いと思いますが、
CSS3から利用可能になった「rem」という新しい単位について、指定方法など調べてみました。
「rem」とは、「root」+「em」という意味で、
root要素(html要素)に対して相対的にフォントサイズが指定できます。
「em」や「%」などの従来の相対指定と違って、親要素を継承しないという特徴があり、
入れ子にするとどんどん拡大、縮小されてしまったり、指定に細かな計算が必要だったりすることもありません。
常にroot要素に対して「何倍」という使い方ができるので、指定の仕方が非常にわかりやすく、便利です。
下記のように、htmlに「font-size: 62.5%;」を指定しておくと、「10px = 1rem」となるので、
px単位で計算ができます。
html { font-size: 62.5%; /*ベースを10pxにしています*/ } body { font-size: 1.0rem; /*10px*/ } h1 { font-size: 1.4rem; /*14px*/ }
ただ、CSS3のため、対応ブラウザが制限されてしまうという問題があります。
IE8以下の未対応ブラウザに対しては、下記のように最初に「px」で定義し、
次に「rem」で再び定義しなければならないようです。
html { font-size: 62.5%; } body { font-size: 10px; font-size: 1.0rem; } h1 { font-size: 14px; font-size: 1.4rem; }
ブラウザの対応状況なども考慮しつつ、スマートフォン・タブレットなどHTML5/CSS3が中心の制作などでは、
利用していくと便利だと思います。