BLOG

Apr 8, 2020

【CSS】フォントサイズの単位（px、%、em、rem）どれがベスト？

Webサイト制作時、CSSでフォントサイズを指定するときによく使われる単位には、「px、em、%、rem」があります。初心者の方が思うのは、「どれを使ったらいいのかなー」ということです。ここではそれぞれの利点や注意点をまとめてみました。

フォントサイズ指定時の単位…

px（ピクセル）
em（エム）
%（パーセント）
rem（ルートエムまたはレム）

…では順番に見ていきましょう。

基本となるpx（ピクセル）

コンピューターのディスプレイは、小さな点が無数に集まっており、「1px」はその小さな点の1つ分の大きさなんです。さらに「1px」の大きさは、ディスプレイによって異なるので、表示されるフォントのサイズというものは、まちまちなんです。

最近では、PC向けには14〜16px程度で、モバイル向けには16px以上とするのが一般的なようです。

em（エム）と%（パーセント）の注意点

cssでフォントサイズを指定するときfont-sizeプロパティは、親要素に指定されている値を継承します。例えば親要素に16pxと指定している場合、その値を1emとして、子要素のフォントサイズが決まります。子要素に0.8emと指定している場合、「16pxの0.8文字分」で約13pxで表示されるのです。さらにその子要素（孫要素）がある場合、約13pxの値からの相対値となるんです。というように、子要素へ順々に値が継承されていく形になります。

このように単位にemを使用していると、孫要素やひ孫要素などがあるときなど、構造によっては非常にややこしくなる場合があるので、注意が必要です。また「%」も同じです。実は私も長年、このemを使用していました。どこかの記事に「emがオススメだー」みたいなのを見かけて、それ以来当たり前のように使ってました。でも、レスポンシブでスマホ用サイトのフォントサイズを変更していると、ややこしくなっきて、だんだんと見た目の感覚とかになってくるんです。「あーこれじゃダメだなー」って思いました。では、何かいい方法はないのでしょうか？

タグごとにフォントサイズを指定する

emや%のように制御がややこしくなるのを回避し、シンプルな構造にするためには、単位にpxを使い、タグごとにフォントサイズを指定すれば、非常にシンプルでわかりやすいんですね。

body {
   font-size: 14px;
}

h1 {
   font-size: 20px;
}

h2 {
   font-size: 16px;
}

私はいつからかフォントサイズにpxを使わなくなっていたのですが、なんかダサいみたいなー、そんな風潮があったので…。ですが、とっても分かりやすくていいんですよね。継承の問題もないし、一目瞭然なんですよ。

remって何？

ではremという単位はなんなんでしょうか。このremのシンプルな使い方は、まず基準となる親要素のフォントサイズをpxで指定しておいて、各要素のフォントサイズをremの相対値で決めるという方法です。

html {
   font-size: 14px;
}

h1 {
   font-size: 1.3rem;
}

h2 {
   font-size: 1.15rem;
}

上記のように、html要素に基準となるサイズをpxで決めます。そして<h1>と<h2>にはrem（ルートエム）を指定します。ルートとはすべての要素の親要素のことで、常に<html>を指すのです。なのでemと違って常に<html>の相対値となるので、継承の問題を気にすることなく指定できるのです。ということは、レスポンシブでスマホ向けのcssに切り替わるときに、<html>のフォントサイズを変更するだけで、一括で大きくしたり、小さくしたり変更可能なんです。これは便利ですね。

私としてはremが使いやすいですね。もっともシンプルなのはpxをタグごとに指定してやる方法です。またはemや%が使いやすいって人もいるでしょうし、自分が使いやすい単位を使っていけばいいと思います。大切なのは、きっちりとcssで単位を把握しておくことなので、自分で制御できないようなら、emや%を使用するのは避け、pxやremを使うことをオススメします。