CSS

2020.12.16

CSSで使うフォントサイズ(px/em/rem)の違いとは?

cssでfont-sizeを指定する方法はいくつかあるのですが、どれを使っていいか迷ってしまうこともあると思います。
今回はその中でもコーディングするときに特に使われるpx、em、remなどの違いについて解説いたします!
各フォントの指定の方法を理解することで効率のいいコーディングができるようになりますので、ぜひ参考にしてみてください!

各単位の違い

①px

pxは親要素の大きさや画面の幅に影響を受けずにフォントサイズを指定できる絶対指定です。
大きさを変えたくない場合や、基準となるフォントサイズを指定する時はpxで指定することがおすすめです!

【例】

html{
font-size:16px;
}

p{
font-size:20px;
}

この場合のpは20pxになります。

②em

emは親要素の大きさに影響される相対指定です。

【例】

html{
font-size:16px;
}

p{
font-size:20px;
}

p span{
font-size:0.8em;
}

この場合、spanタグは親要素pの20pxを基準として0.8文字分の大きさになるため、16pxになります。
レスポンシブの際、親要素のフォントサイズだけ変えるだけでspanタグもサイズが変わるのでpxで指定するより記述が少なくなります。

③rem

remはルート要素(通常はhtml)を基準とする相対指定です。

【例】

html{
font-size:16px;
}

p{
font-size:20px;
}

p span{
font-size:0.5rem;
}

この場合、spanタグはhtmlの16pxを基準としているので8pxになります。
emのように単位が入れ子になっていてもhtmlを基準とするので親要素の影響を受けずに指定ができます。

④%

%をフォントサイズの単位で使うときはemを同じく親要素を基準とする相対指定となります。

【例】

html{
font-size:16px;
}

p{
font-size:20px;
}

p span{
font-size:0.8%;
}

emと同じ相対指定になるため、今回のspanタグも16pxになります。

⑤vw、vh

vwとvhはブラウザ(ビューポート)の幅に応じてフォントサイズが変わる相対指定です。

【例】

  • ブラウザの横幅が1000pxのときの1vwは10px
  • ブラウザの縦幅が1000pxのときの1vhは10px

LPのファーストビューのキャッチコピーを絶対に1画面に収めたい場合など、画面の幅に合わせてフォントサイズを可変させたいときに便利です。
可変に強い反面、コンテンツの見出しをvw、本文をpxなどで指定すると画面幅によって見出しと本文のバランス感が変ってしまうので使い方には注意が必要です。

まとめ

どのフォントサイズの指定方法が正解、この場合にはこれを使うべき、という明確な判断をするのは難しいですが、それぞれのメリットを踏まえたうえで使い分けていけるといいでしょう。
フォントサイズの指定方法で作業の効率も上がるため、ぜひ使ってみてください!

おすすめ記事はこちら!

関連記事

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.08.03

    【コピペOK】パンくずリストの設置方法(便利なプラグインも紹介)

    CSS

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

おすすめ記事

  • 2021.06.08

    簡単!蛍光ペンっぽいアンダーラインを引く方法

    CSS

    WordPress

  • 2021.09.10

    JavaScriptの基礎をスピーディーに学べる!初心者におすすめの教本を紹介

    JavaScript

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!