【CSS基礎】emと%とpxとremフォントサイズ指定方法の違いと使い方

CSSの基礎でもあるフォントサイズを指定するときみなさんは何を使用していますか?em,rem,%,pxのうちのどれかだと思いますがそれぞれのメリットやデメリットは理解して使っているのでしょうか?

僕自身よくわからないままemを使ったりしていたので、振り返りの意味を込めてそれぞれの違いと使い方、メリットデメリットを書いていきたいと思います。

目次

  • フォントサイズ指定の種類
  • pxによるサイズ指定
  • emによるサイズ指定
  • remによるサイズ指定
  • まとめ

フォントサイズ指定の種類

em : 相対指定 デフォルトでは1em = 16px 1文字という意味
rem: 相対指定 デフォルトでは1rem = 16px
% : 相対指定 デフォルトでは100% = 16px
px : 絶対指定

上記の違いがあるのですが、「em」と「%」は相対指定なので比べる基準に対してどのくらいの大きさかということになります。「px」は絶対指定なのでそのままです。

pxによるサイズ指定

ピクセル(px) を単位として用いる事で、よりピクセル精度の高いフォントサイズ指定出来ます。ピクセル値は静的な値であり、OS にも依存せず、クロスブラウザで同じピクセルサイズでの文字のレンダリングを実現出来ます。ブラウザによって、同じ効果を得るのに別のアルゴリズムが使われている可能性があるため、少し結果が異なるかもしれません。
font-size – CSS|MDN

絶対指定なので16pxは16pxなのですが、以前ブラウザで文字を大きくした際にIEでpx指定している場合、大きくならなかったようです。そのような理由からpxによるサイズ指定は避けられていましたが、ただ最近のバージョンのIEでは大丈夫なので特にpx指定を避ける理由はないと思います。

emによるサイズ指定

em 値の大きさは動的です。font-size プロパティを定義するとき、1em はその要素の親要素で用いられているフォントサイズと一致します。font-size – CSS|MDN

下記サンプルコードにコメントで計算式は書いてあるので省きますが、bodyで基本となるフォントサイズの指定(ここでは12px)をして、他の要素はそれと比較してどれくらいかという書き方になっています。

サンプルコード

ただ、問題が一点ありましてこの指定方法だと複利計算をされてしまうことです。つまり下記サンプルコードのようにリストなど入れ子になっている状態で各要素にem指定をしていると複利でフォントサイズが大きくなっていきます。僕は「em」をちゃんと理解せずに利用していたのでたまにこういう問題に直面してました。。。

remによるサイズ指定

先ほどの「em」でサイズを指定する際に生じる複利計算問題を解決する「rem」というサイズ指定方法がCSS3から使用できるようになりました。
「em」との違いは「em」は親のフォントサイズを参照しますが、「rem」はルート(またはhtml)を参照するという点です。下記コードのように常にhtmlのフォントサイズと比較してなので「あれ親のフォントサイズいくつだっけ」みたいなことがなくなります。

サンプルコード

まとめ

「em」か「px」かという議論はよくされますが、どちらとも甲乙つけがたいので好きな方を使用していいと思います。CSSでremがでてきてemよりも便利になった?し、最近IEの古いバージョンのサポートも終了というニュースも出たので僕はremを使用していこうかなーと思います。今まではpx指定をしてきたのでちょっとremに浮気してみます。しばらくしてまた感想をこの記事に載せますので興味ある方はみてくださいね。

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。