web媒体のデザイン時における文字サイズの単位「em」について。
なぜ {font-size: 62.5%;}を設定するの?CSS3で使えるもっと便利な「rem」とは!?
こんにちは。
デザイン研究課、青柳です。
webサイトを作る上で、文字の大きさを考慮することは非常に大切です。
ただ、webサイトの場合は、ユーザーが文字設定を変えることで
webページの文字サイズを変更することがあります。
そのためwebデザインでは、コーディングの際に
ユーザーの環境に合わせてそれぞれの文字サイズが
相対的に変わるようにする必要があるのです。
この時に使うのが、「em」という単位。
「em」とは文字の高さを基準にした単位です。
1emが1文字分を表し、使用している環境によって大きさが変化します。
特にfont-sizeの設定がない場合、1em=16pxなので、
16pxの文字が出したいなあと思ったら文字サイズを1emにします。
もし基準の設定を14pxに変えれば
1em=14px 1.5em=21px で表示されます。
================================
一見単純そうに見えるこの仕組みですが、
デフォルト設定(1em=16px)の時に20pxの文字が出したいなあと思ったら
わざわざ計算をして、文字サイズを1.25emにしなければいけませんよね。
それははかなり面倒です。
そこで使用するのが {font-size: 62.5%;}です。
bodyやhtml要素でfont-sizeを62.5%にしておくと、
デフォルト設定の時の基準が16pxの62.5%、
つまり10pxになります。
こうすることで、ちょうど1em=10pxになり、
18pxにしたいなあと思うなら1.8emと書けば良いし、
24pxにしたいなら2.4emと書けば良いので計算がしやすいわけです。
================================
注意点として「em」は要素のフォントサイズを基準にするため、
階層が下がるとその要素はその親要素のフォントサイズを基準にしてしまいます。
<子要素を1.5emにした場合>
親要素に指定がない時 → 15px
親要素に指定がある場合(ex.20pxの時) → 20pxの1.5倍=30pxになる
そんな時、CSS3ではもっと便利な「rem」という指定が使用出来ます。
「rem」 は常にhtml 要素のフォントサイズを基準にするので
html要素でfont-sizeを62.5%にしておけば、
階層が深くなってもフォントサイズが狂うことはありません。
CSS3で組む時はこちらを使う方が便利ですね。
今後、フォントサイズの指定は「rem」を使う方法が主流になりそうです。
================================
と、いうことでなんだか数字が多くなってしまいましたが
web媒体のデザイン時における文字サイズの単位についてのお話でした。
しずおかオンライン中途採用社員も、積極募集中!
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら!