CSS

2020.12.16

【CSS】フォントサイズのpx、em、remの違い

cssでフォントサイズを指定する方法はいくつかあるのですが、どれを使っていいか迷ってしまうこともあると思います。
各フォントの指定の方法を理解することで効率のいいコーディングができるようになります。

各単位の違い

①px

親要素の大きさや画面の幅に影響を受けずにフォントサイズを指定できる絶対指定です。

例)
html{
font-size:16px;
}

p{
font-size:20px;
}

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

②em

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

例)
html{
font-size:16px;
}

p{
font-size:20px;
}

p span{
font-size:0.8em;
}

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

③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

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

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

まとめ

どのフォントサイズの指定方法が正解、この場合にはこれを使うべき、という明確な判断をするのは難しいですがそれぞれのメリットを踏まえたうえで使い分けていけるといいでしょう。

関連記事

  • text-alignが効かない時に考えられること

    2021.02.24

    【CSS】text-alignが効かない時に考えられること

    CSS

  • 2021.02.23

    【CSS】三角形の装飾でコンテンツの境界を区切る方法

    CSS

  • 2021.02.22

    【CSS】IEだけ崩れてしまうフォント対策

    CSS

おすすめ記事

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • 2020.11.28

    Basic認証の設定方法と注意点

    その他

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design