皆さんはWEBサイトを制作する時に、どのような形式でフォントのサイズを指定していますか？

p {
 font-size: 18px;
}

一般的な単位は皆さんご存知の「 px 」だと思いますが、他にも「 % 」「 em 」「 rem 」などサイズの指定方法は様々です。今回は、使い分けがよく分からない、なんとなく感覚で指定してきたなぁ、という方にこれらの単位の違いや使い分けについて詳しくご説明したいと思います。

【目次】
1．絶対値と相対値
2．pxについて
3．%について
4．emについて
5．remについて
6．まとめ

1．絶対値と相対値

px ・ % ・ em ・rem サイズ指定の種類は色々とありますが、大きく分けると２種類しかありません。そう考えるとなんとなく取っつきやすくなりませんか？

px %
絶対値
親要素基準の相対値
em rem
親要素基準の相対値
ルート要素基準の相対値

つまり px は絶対値、それ以外の % ・ em ・ rem は相対値となります。

前知識として絶対値と相対値についてざっくり説明すると

● 絶対値・・・他の要素に左右されない値
● 相対値・・・他の要素を基準にして可変する値

ひとまず、これだけ頭に入れておけば以下の説明がすんなり入ってくるかと思います！

2．pxについて

上でも説明した通り、絶対値とは他の要素に左右されない値の事です。
親要素のフォントサイズが何であれ、pxで指定した文字サイズはその影響を受けません。

分かりやすく例をあげると、親要素のboxがfont-sizeを20pxと指定していても、子要素のfontの文字サイズは親要素の影響を受けず「15px」で表示されます。

<div class="box">
　 <div class="font">
       hello world!
    </div>
 </div>
.box {
  font-size: 20px;
  background: #9ac5ea;
  width:200px;
  height: 200px;
}
.font {
  font-size: 15px;
}

3．%について

％は相対値で、親要素を基準にして可変します。

例えば以下のような場合、親要素のboxがfont-sizeを26pxと指定していた時、子要素のfontはfont-sizeを50%と指定しています。

「hello world!」のfont-sizeは何pxになると思いますか？

<div class="box">
  <div class="font">
    hello world!
  </div>
</div>
.box {
    font-size: 26px;
    background: #9ac5ea;
    width:200px;
    height: 200px;
  }
.font {
   font-size: 50%;
  }

％で指定した場合、font-sizeは親要素を基準にするので、26pxの50%で「13px」となります。

4．emについて

続いてem、こちらは％がマスター出来ていれば簡単です。書き方が異なるだけで考え方としては％と同じ、相対値で親要素を基準として可変します。
100％→1em、50％→0.5emに該当します。

例えば以下の場合、親要素のboxがfont-sizeを20pxと指定していた時、子要素のfontはfont-sizeは2emと指定しています。

「hello world!」のfont-sizeは何pxになると思いますか？

<div class="box">
  <div class="font">
    hello world!
  </div>
</div>
.box {
    font-size: 20px;
    background: #9ac5ea;
    width:200px;
    height: 200px;
  }
  .font {
    font-size: 2em;
  }

%と同様に親要素を基準として可変するので、20pxの”2em→200％”で「40px」となります。

豆知識

emの読み方は”エム”

5．remについて

考え方としてはemや%と同じなのですが、ひとつ違うのが”ルート要素”を基準にして可変するということです。remは”root em”の略でroot（ルート）とは”html”を指します。

つまりhtmlで指定したfont-sizeを基準にして可変するということです。

例えば以下のような場合、htmlがfont-sizeを10pxに指定している時、親要素のboxはfont-sizeを16pxに、子要素のfontはfont-sizeを2remに指定しています。

「hello world!」のfont-sizeは何pxになると思いますか？

<div class="box">
  <div class="font">
    hello world!
  </div>
</div>
  html {
    font-size:10px;
  }
  .box {
    font-size: 16px;
    background: #9ac5ea;
    width:200px;
    height: 200px;
  }
  .font {
    font-size: 2rem;
  }

remはhtmlのfont-sizeにのみに影響を受けるので、親要素のboxで指定した16pxには影響を受けません。htmlで指定された10pxの2rem（200%）で「20px」となります。

豆知識

remの読み方は”レム”

6．まとめ

今回はフォントサイズの指定の種類についてご紹介しました。
絶対値なのか、相対値なのか、そしてどの要素のfont-sizeに影響を受けるのか、これさえ理解出来ればOKです！

なんとなくpxしか使ったことがなかったという方にも、挑戦して頂けたらなと思います。