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完全対応なので、レスポンシブ・デザインが主流になってきている今、見かける頻度は日増しに多くなってきている気がします。

Tweet about this on TwitterShare on Google+Share on FacebookPin on Pinterest