2018.01.08

2018.01.15

コーディング

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の継承が起きないようにコーディングすることも大事ですが、使っている要素の意味も正しく覚えてより効率的なコーディングを目指せるといいですね。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する