WEBTODESIGN

CSSでemとremを曖昧に使っていた件

CSSでfont-sizeやline-heightや余白など、かなりの頻度で単位にemを使っていたのですが…。たまたまremを使っている人を見つけて、あれ、なんか違いがあるのかな…？と思って調べてみるとなんと、全くの別物！なんですと〜〜〜！（そりゃそうだ。）

ということで、emとremの違いをまとめてみました。

emとremで共通している部分

emもremも基準の文字サイズに対する倍数となります。

font-size: 1em;
font-size: 1rem;

例えば、基準となる文字サイズが16pxだとしたら、1emも1remも16pxを表します。2em・2remの場合は32pxです。

では、その基準となる文字サイズはどこからきているのでしょう？

emとremの基準は違う

emとremの違いはズバリ、基準となる文字サイズが違う点です！

emは親要素に対しての倍数、remはhtmlタグに対しての倍数になります。

<p><span>この中の文字サイズは？</span></p>

試しに、pタグの中のspanタグで見てみましょう。spanタグの中の文字の文字サイズはどうなるでしょうか？

emの場合

html{
    font-size: 16px
}
p{
    font-size: 2em;
}
span{
    font-size: 2em; /* pタグの2倍なので、64px */
}

emは親要素に対しての倍数です。

spanタグの親はpタグですよね。pタグは16pxの2倍の32px。spanタグはその更に2倍になるので、64pxとなります。

remの場合

html{
    font-size: 16px
}
p{
    font-size: 2rem;
}
span{
    font-size: 2rem; /* htmlタグの2倍なので、32px */
}

対してremはhtmlタグに対しての倍数です。単純に16pxの2倍をして32pxとなります。pタグも32pxです。

ワオ！emとremで全く違う結果になりましたね…！

emとremの使い分けが大事

ちなみに、%も親要素に対しての割合です。階層の深いところで%やemを使う時、サイズ調整が難しいときがあったんですよね。それは、親要素のサイズを継承していたからだったんですね～…！

は～悩みスッキリ！

基本的には親要素に振り回されないremを活用して、親要素のサイズを継承したいときはemを使うのが良さげですね👍

RECOMMENDATION

NEWEST