px、em、％、rem、フォントサイズに使える単位の違い

レスポンシブサイトの制作時にcssで指定する大きさや長さの単位について調べなおす機会があったので、今回はこれについてまとめます。相対的な指定をする単位はきちんとした意味を把握していないと、cssの重複や継承によって思ってもいないフォントサイズで表示され、制御に頭をひねることになってしまいます。それぞれの単位がどういった挙動をしているか、今回は紹介します。

文字に使える単位の種類

px

パソコンなどの画面に表示できる最小単位の意味で、絶対的なサイズ指定です。親要素などの影響を受けず、指定したとおりのフォントサイズで表示されます。

%（パーセント）

相対的なサイズ指定です。指定する要素に適応されているサイズ・大きさに対しての割合で表示されます。

em

相対的なサイズ指定です。指定する要素に適応されているfont-sizeを1として、その倍数で表示されます。

rem

相対的なサイズ指定です。ルート要素（典型的にはhtmlタグ）に適応されているfont-sizeを1として、その倍数で表示されます。

文章だけではわかりにくいので以下に例を制作しました。
ルート要素に10pxを指定したhtmlの中で、それぞれの単位がどんな挙動をするのかご覧ください。

See the Pen A Web Maker experiment by hoshu_t (@hoshu_t) on CodePen.

上の図で、文字に対してはそれぞれ同じサイズ指定を行っていますが、親要素にサイズ指定があった場合、相対的なサイズ指定であるパーセントとemは影響を受けて見た目のサイズが変わってしまいます。ただしremは相対的なサイズ指定でもルート要素に対しての倍率なので、親要素の影響を受けていません。

vw

相対的なサイズ指定です。viewportの横幅を100として、その倍数で表示されます。

vh

相対的なサイズ指定です。viewportの縦幅を100として、その倍数で表示されます。

See the Pen A Web Maker experiment by hoshu_t (@hoshu_t) on CodePen.

vwとvhについては是非、上図の右上のedit on CODEPENリンクに飛んで、ブラウザサイズを調節したりして挙動を確認してみてください。

まとめ

当たり前のように使っていましたが、意味がわかるとより正しく使い分けることができそうです。そもそもfont-sizeの継承が起きないようにコーディングすることも大事ですが、使っている要素の意味も正しく覚えてより効率的なコーディングを目指せるといいですね。