2019/11/02 (更新日: 2019/11/16)

CSSのフォント単位【px・rem・em】の違いとオススメの単位

今回の記事では、CSSのフォントサイズ【px・rem・em】それぞれの違いremをオススメする理由について詳しく解説します。

『remとemの違いがよく分からない』『結局どの単位がいいの?』という悩みをお持ちの方は是非お読みください。

それぞれの単位の違い

px

ピクセル単位で値を指定する場合に使用します。 親要素など他の要素の値などとは関係なく指定したピクセル数の値となります。 

rem

html要素のfont-sizeを基準に大きさを計算する単位です。つまり、remの値は【html】または【*(すべての要素を指定)】のfont-sizeに影響されます。

1remが基準サイズとなります。もしhtml要素のfont-sizeが16pxの場合は、1rem=16px、2rem=32pxとなります。

em

親要素のfont-sizeを基準に大きさを計算する単位です。【%】と同じ挙動になります。こちらもremと同様1emが基準サイズです。

remとemの違いを下記に表示しています。上は親要素に【font-size】を指定していない場合、下の枠内は親要素に【font-size】を30pxに指定している場合です。

See the Pen
jOOYGMx
by matsuo9749 (@matsuo9749)
on CodePen.

このように、親要素に【font-size】を指定しなかった場合、remとemの大きさは変わりません。しかし、親要素に【font-size】を指定している場合、『em』は指定している大きさが基準となるため【1em=30px・2em=60px】になります。

結局どれを使えばいいの?

私は『rem』をオススメします。その理由について説明します。

まず『px』ですが、スマホの登場により推奨されなくなりました。

例えば、スマホの時はPCの3分の2の大きさでフォントサイズを指定するとします。このときメディアクエリを使って各タグに書いたフォントサイズを3分の2の値に調整していかなければなりません。非常に大変な作業になります。

『em』や『rem』の場合は相対的な値のため、あらかじめ設計時に『〇〇の何倍』と決めておけば、画面サイズに合わせて勝手に拡大縮小してくれます。

『それならemとremどちらでもいいんじゃないの?』と思いますが、emにも問題点があります。

『em』で指定した場合、親要素の影響を受けてしまうので文字サイズの調整に手間がかかることがあります。

『rem』は、常にhtml要素を基準にしてくれますので、調整に手間かけることなく、安全に使うことができます。

以上のことから『rem』を使用することをオススメします!

まとめ

CSSのフォントサイズ指定【px・rem・em】それぞれの違いとremをオススメする理由について解説しました。

文字サイズはremで指定した方がなにかと便利なので、ぜひご活用ください。

 

おすすめ誰でもわかるWordPressブログの始め方【月額500円】

おすすめWeb系自社開発企業に内定をもらうために実践したこと

Webエンジニアについて詳しく知りたい方はこちら
Webエンジニアの仕事内容・年収・将来性
本気でWebエンジニアになりたい方はこちら
未経験からWebエンジニアに転職する方法
フリーランスに興味ある方はこちら
フリーランス言語別案件数ランキング