cssでフォントサイズ指定のお話。
ほとんどの人が、[ px ]もしくは[ em ]を使ったり、見たりしたことはあると思うんですけど、これからホームページ制作をする際は、css3から導入された単位[ rem ]も使い方をしっておくのがいいでしょう。
[ rem ]って、どんなの？
[ px ]と同じように使われてきた[ em ]と似てますよね？
どこが違うかって言うと、[ em] は、親要素の値に影響を受け、[ rem ]は、親要素の値を継承せずに、ルート(html)で設定した値だけを継承するんです。
[ em ]だと、先ほど述べたように、親要素の値を継承するので、入れ子とかになった場合に計算が非常に面倒くさいです。
だから、[ rem ]だと、その煩わしさが無くなって、より計算しやすくなります。
[ rem ]の使い方
まず、htmlのフォントサイズを「62.5%」に設定しておくと便利です。
何故かと言うと、下記のように計算できるようになります。
1rem = （だいたい）16px
（※多くのブラウザの標準フォントサイズが16pxなので）
16px ✕ 62.5% = 10px
こうすることで、
1rem = 10px を初期値として設定しておくことが出来ます。
html{
font-size: 62.5%;
}
body{
font-size: 1.2rem; //12px
}
例えば、[ rem ]の数値の設定に、小数点を使うのが嫌だったら、
html{
font-size: 6.25%;
}
body{
font-size: 12rem; //12px
}
こんな風に書いても良いと思います。
海外テンプレートをいじることも多いので、常に最新のモノを目にしていたりすると、[ rem ]をよく使用している事に気づくことが多いです。
やっぱり、スマートフォンサイトがcss3完全対応なので、レスポンシブ･デザインが主流になってきている今、見かける頻度は日増しに多くなってきている気がします。