【完全保存版】emとremの違いを理解する

はじめに

cssで文字サイズを指定するには、2つの方法があります。

① px指定の絶対指定

② em/rem/%による相対指定

多くの方はpx指定による絶対指定が多いかと思います。

ほぼ問題にはなりませんが、案件で細かいところまで対応していると、実はpxだとブラウザによって微妙に表示サイズが異なる問題が起きます。

そのため、em/rem/%などによる相対指定を使うケースが多くなってきています。

ただ、emとremって言葉も似てるし、違いがよくわからないですよね。

なので、今回は分かりやすく解説していきます。

emは親要素のfont-sizeを基準にする

相対指定であるemは、親要素のfont-sizeを基準にします。

これはどういうことか、実際のコードを見たほうが早いので見てみましょう。

<p class="p-em">
 これは2em(64px)です
 <span class="span-em">これは0.5em(32px)です</span></p>

html {
 font-size: 32px;
}
/** em 指定 **/
.p-em {
 font-size: 2em; /* -> 64px; */
}
.span-em {
 font-size: 0.5em; /* -> 32px; */
}

この場合の関係を見てみます。

spanタグから見た時の親 👉 pタグのfont-sizeを基準 (font-size: 32px (64px x 0.5))

pタグから見た時の親 👉 htmlタグのfont-sizeを基準 (font-size : 64px (32px x 2))

これが実行結果です。

rem(root em)はルート(一番上の親(html))要素のfont-sizeを基準にする

では全く同じことをremを使ってやってみましょう。

<p class="p-rem">
 これは2rem(64px)です
 <span class="span-rem">これは0.5rem(16px)です</span></p>

html {
 font-size: 32px;
}

/** rem 指定 **/
.p-rem {
 font-size: 2rem; /* -> 64px */
}
.span-rem {
 font-size: 0.5rem; /* -> 16px */
}

remを使うと、基準値が親とか関係なく、HTML要素のfont-sizeになるので、全て32pxを基準に考えられます。

よってｍ今回はこのようになります。

spanタグから見た時の親 👉 htmlタグのfont-sizeを基準 (font-size: 16px (32px x 0.5))

pタグから見た時の親 👉 htmlタグのfont-sizeを基準 (font-size : 64px (32px x 2))

先程と違うのは、spanはpタグの子要素ですが、親のfont-sizeは関係なく、htmlのfont-sizeである32pxを基準に考えられているとこです。

結局emとremはどっちの方が良いの？

ときと場合によりますが、分かりやすいのはremです。

emを使うと、入れ子構造が深くなってきた時に、想定外のfont-sizeになってきたりします。

その時、どの親要素が影響してるのか？がわかりづらくなってくるので、原因調査に時間がかかったりするので、remの方がシンプルで分かりやすいです。

62.5%ってなに？

よく、こんな表記を見かけませんか？

html {
 font-size: 62.5%; /* -> 10px */ 
}

これは、ブラウザのデフォルトfont-sizeである、16pxを利用したテクニックです。

16pxの62.5%は10pxになりますが、こうすることで、以下の様にremで指定する時もpx指定する時と同じ感覚で、無駄な計算をせずに直感的に指定できるようになります。

16px > 1.6rem

32px > 3.2rem

という感じですね。

HTMLのfont-sizeを62.5%にしておいて、他のfont-sizeはrem指定。

が一番無難で分かりやすいですね！