見出し画像

1分で分かるem,remの違い

斎藤諒　

webサイト制作の勉強をしていると見かける単位、emやrem。
「エミネムみたいな名前しやがって」
としか思ってませんでしたが、ちゃんと調べてみました。


emとは？

emはemphsisの略。
親要素のフォントサイズを基準に、大きさを指定するための単位です。

例えば親要素のフォントサイズが16pxなら、1em=16pxに、
親要素のフォントサイズが24pxなら、1em=24pxになります。

emを使えば、親要素の設定を変更するだけで子要素のサイズ指定を変更できます。

sectionやdiv等で囲んだグループで、sectionやdivのフォントサイズを基準として大きさを指定したいときに便利そうです。

remとは？

remはroot emの略。
その名の通り、ルート要素(≒HTML要素)のフォントサイズを基準に大きさを指定する単位です。

主要ブラウザのデフォルト設定では、フォントサイズは16pxになるようです。
つまり、1rem=16px、2rem=32pxとなります。

また、特にフォントサイズを指定していなければ、1em=1rem=16pxになるようです。

実際に試してみよう！

実際に見た方が早いので、以下の通りHTMLを書いてみました！

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    p{
      margin: 0;
    }

    .container{
      font-size: 32px;
    }

    .one-em {
      font-size: 1em;  /* 32px*/
    }

    .two-em {
      font-size: 2em;  /* 32の2倍で64px */
    }

    .one-rem {
      font-size: 1rem;
      /* デフォルトでは16px*/
    }

    .two-rem {
      font-size: 2rem;
      /* 16の2倍で32px */
    }
  </style>
  <title>CSS emとremの違い</title>
</head>

<body>

  <div class="container">
    <p class="one-em">これは1emです。</p>
    <p class="two-em">これは2emです。</p>

    <p class="one-rem">これは1remです。</p>
    <p class="two-rem">これは2remです。</p>
  </div>

</body>

</html>

このページをブラウザで開くと、以下のようになります。

親要素のcontainerクラスでフォントサイズを32pxとしているため、
1em=32px、2em=64pxとなります。

対してremは、親要素とは関係なくルートのフォントサイズを基準とするため、
1rem=16px、2rem=32pxとなります。

【参考】ブラウザごとのデフォルトサイズ

2024年2月時点で、ブラウザのシェア率top5は以下の通りです。

1. chrome 　65.4%
2. edge         21.8%
3. firefox 　    5.8%
4. safari 　     5.4%
5. opera 　     0.8%

【2024年2月版】世界・日本におけるブラウザシェア率ランキング

上記のほかIEを含めても、デフォルトのフォントサイズは16pxのようです。

まとめ

  • emもremも大きさを指定する単位の種類。

  • 1em＝親要素のフォントサイズ

  • 1rem＝ブラウザのデフォルトのフォントサイズ(≒16px)

  • emやremを使えば、ある基準をベースとして、色んな要素の大きさを指定できる。
    親要素などのフォントサイズを変更すれば、自動的にemで指定した箇所の大きさも調整される。

  • emはsectionタグ内など特定の範囲で、親要素のフォントサイズを基準に大きさを指定したいときに使う。

  • remは16pxを1単位として大きさを指定したいときに使う。



この記事が気に入ったらサポートをしてみませんか？