見出し画像

【デザイン】謎の数字、{font-size: 62.5%;}ってなに?

今回は、WEB媒体のデザイン時における文字サイズの単位「rem(レム)」について紹介します。
WEBサイトを作る上で、文字の大きさを考慮することは非常に大切です。
ただ、WEBサイトの場合は、ユーザー自身が、PCの文字設定を変え、WEBページの文字サイズを変更することがあります。
そのためWEBデザインでは、コーディングの際に、ユーザーの環境に合わせてそれぞれの文字サイズが相対的に変わるようにする必要があるのです。この時に使うのが「rem」です。


CSS3で使えるもっと便利な「rem」とは!?

「rem」とは「root em」の略で、名前のとおり「一番上の階層の『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」を使う方が便利

今後、フォントサイズの指定は「rem」を使う方法が主流になりそうです。と、いうことで、なんだか数字が多くなってしまいましたが、WEB媒体のデザイン時における文字サイズの単位についてのお話でした。