ページのイメージ
WEB開発デザイン 2017/02/15

謎の数字、{font-size: 62.5%;}ってなに?

青柳祐美
青柳祐美
  •  
  • このエントリーをはてなブックマークに追加

こんにちは。

デザイン研究課、青柳です。

 

以前の記事で、紙媒体のデザイン時における

文字サイズの単位についてのエントリーがありました。

 

2017年02月10日 

デザイナーのための文字の単位の話

 

同じデザインでも媒体によって扱う単位が違うことを知り、

「Q」という単位についてなど非常に勉強になりました。

 

================================

 

さて、この「Q」は紙面でのデザインで利用する指定ですが、

webサイトを作る上でも文字の大きさを考慮することは非常に大切です。

 

ただ、webサイトの場合は、ユーザーが文字設定を変えることで

webページの文字サイズを変更することがあります。

 

そのためwebデザインでは、コーディングの際に

px単位で作ったデザインを正しく反映させつつ、

ユーザーの環境に合わせてそれぞれの文字サイズが

相対的に変わるようにする必要があるのです。

 

この時に使うのが、「em」という単位。

「em」とは文字の高さを基準にした単位です。

1emが1文字分を表し、使用している環境によって大きさが変化します。

 

特にfont-size設定がない場合、1em=16pxなので、

16pxの文字が出したいなあと思ったら文字サイズを1emにします。

 

もし基準の設定を14pxに変えれば 

1em14px 1.5em21px で表示されます。

 

================================

 

一見単純そうに見えるこの仕組みですが、

デフォルト設定の時に20pxの文字が出したいなあと思ったら

文字サイズを1.25emにしなければいけませんよね。

それははかなり面倒です。わざわざ計算もしたくない。

 

そこで使用するのが {font-size: 62.5%;}です。

  

bodyhtml要素でfont-size62.5%にしておくと基準が16px62.5%

つまり10pxになります。

 

こうすることで、ちょうど1em=10pxになり、

18pxにしたいなあと思うなら1.8emと書けば良いし、

24pxにしたいなら2.4emと書けば良いので計算がしやすいわけです。

 

================================

 

注意点として「em」は要素のフォントサイズを基準にするため、

階層が下がるとその要素はその親要素のフォントサイズを基準にしてしまいます。

 

そんな時、CSS3ではもっと便利なremという指定が使用出来ます。

「rem」 は常にhtml 要素のフォントサイズを基準にするので

html要素でfont-size62.5%にしておけば、

階層が深くなってもフォントサイズが狂うことはありません。

 

CSS3で組む時はこちらを使う方が便利ですね。

今後、フォントサイズの指定は「rem」を使う方法が主流になりそうです。

 

================================ 

 

と、いうことでなんだか数字が多くなってしまいましたが

web媒体のデザイン時における文字サイズの単位についてのお話でした。

Category

Ranking