rem 単位と em 単位

rem 単位と em 単位は、どちらも特定の要素の文字サイズである font-size を基準としてサイズや長さを指定する相対的な長さの単位です。

  • rem 単位はルート要素（root element）である <html> 要素の文字サイズが基準です。
  • em 単位は、基準となる要素の文字サイズです。
    • 指定しようとする font-size 属性では、親要素（parent element）の文字サイズが基準です。
    • 指定しようとする属性が font-size ではない場合には、現在の要素の文字サイズが基準です。

このような rem 単位と em 単位の概念について学習します。

rem 単位

rem は root element（ルート要素）の略称で、この単位はルート要素である <html> 要素の font-size を 1rem とする相対的な長さの単位です。

例えば、1rem は <html> 要素の文字サイズの1倍、1.5rem は1.5倍になります。
例題を通じて確認してみましょう。

CSS 
html {
    font-size: 20px;
}
h1 {
    font-size: 2rem;
    /* 2rem = 2 * 20px = 40px
        html要素のfont-sizeである20pxが1rem */
}

この例題では、h1 要素の font-size をルート要素である <html> 要素の font-size の2倍に設定します。この場合、<html> 要素の font-size が 20px なので、h1 要素の実際の font-size は 2 * 20px = 40px になります。

<html> 要素の font-size を指定しなかった場合

もしルート要素である <html> 要素の font-size を指定しなかった場合、 1rem はどのように決定されるのでしょうか？

この場合にルート要素である <html> 要素の font-size を指定しなかった場合、これはユーザーが設定したブラウザの既定の文字サイズに基づいて決定されます。ほとんどのユーザーは、ブラウザの既定の文字サイズを設定（変更）しない場合が多いです。ブラウザメーカーによって設定されている既定の文字サイズは主に 16px であり、この場合 1rem は 16px になります。

rem 単位は主にどのような時に使用するのか

rem 単位は <html> 要素の font-size を基準としてサイズを指定する相対的な長さの単位です。rem の比率に従ってサイズに関するスタイルを指定すれば、グローバルな比率に合わせてスタイルを一括で管理し、メンテナンス（Maintenance）を行うのに非常に便利です。

グローバルスタイル設定

Webページ全体のスタイル、特に基本のフォントサイズや余白といった要素を設定する際に `rem` を活用します。

CSS 
html {
    font-size: 16px;
}
body {
    font-size: 1rem; /* 1rem = 16px */
    margin: 1rem;    /* 1rem = 16px */
}
h1 {
    font-size: 2rem; /* 2rem = 2 * 16px = 32px */
}
メディアクエリとの併用

レスポンシブWebデザインにおいて、画面サイズに合わせてスタイルを調整する際、rem とメディアクエリを組み合わせて使用することがあります。

CSS 
html {
    font-size: 16px;
}

....

@media (min-width: 768px) {
    body {
        font-size: 1.25rem; /* 20px */
        /* 1.25rem = 1.25 * 16px = 20px
            現在の html 要素の font-size である 16px が 1rem */
    }
}

rem はネストされた要素の継承に影響されないため、グローバルスタイルを一括で管理し、メンテナンスを容易にするのに適しています。

em 単位

em は element（要素）の略語で、基準となる要素のフォントサイズのことです。

  • font-size 属性に適用する場合、親要素の font-size を 1em の基準とします。
  • font-size 以外の属性では、指定しようとする現在の要素の font-size を 1em の基準とします。

font-size 属性への適用する

font-size 属性の値として em 単位を使用すると、親要素のフォントサイズが 1em になります。

例えば、font-size: 1em は親要素のフォントサイズの1倍、font-size: 1.5em は親要素のフォントサイズの1.5倍になります。
例を見てみましょう。

CSS 
h1 {
    font-size: 30px;
}
h1 > span {
    font-size: 0.7em; /* 21px */
    /* 0.7em = 0.7 * 30px = 21px;
        親要素(h1)の font-size である 30px が 1em */
}

font-size 以外の属性への適用する

font-size 以外の属性の値として em 単位を使用すると、現在の要素のフォントサイズが 1em になります。

例えば、line-height: 1em は現在の要素のフォントサイズの1倍、line-height: 1.5em は現在の要素のフォントサイズの1.5倍になります。
例を見てみましょう。

CSS 
h1 {
    font-size: 30px;
    line-height: 1.5em; /* 45px */
    /* 1.5em = 1.5 * 30px = 45px
        現在のこの要素の font-size である 30px が 1em */
}

em 単位は主にどのような時に使用するのか

em 単位は、主に相対的な長さを指定したい時に使用されます。

タイポグラフィ関連のスタイル

現在の要素の font-size を基準に、サイズや長さを設定する際に活用されます。この場合、現在の要素のフォントサイズに対する比率でサイズや長さを指定するため、（現在の要素の正確なフォントサイズを把握していなくても）文字サイズに比例して相対的なバランスを調整するのに非常に便利です。

代表的な例として、line-height や letter-spacing 属性などの場合には、現在の要素のフォントサイズに比例した値を使用するために、em 単位が多く使われます。

CSS 
h1 {
    font-size: 30px;
    line-height: 1.5em; /* 45px */
    /* 1.5em = 1.5 * 30px = 45px
        現在のこの要素の font-size である 30px が 1em */
    letter-spacing: -0.1em; /* -3px */
    /* -0.1em = -0.1 * 30px = -3px
        現在のこの要素の font-size である 30px が 1em */
}
現在のフォントサイズの比率に合わせたレイアウトおよび余白関連のスタイル

現在のフォントサイズ比に合わせたレイアウトや余白などを調整することで、フォントサイズとレイアウトや余白などの相対的な比率を推し量り、便利に調整することができます。特に現在のフォントサイズがレスポンシブウェブなどの実装によって大きくなったり小さくなったりする時、その比率通りにレイアウトや余白などが自動的に調整されるため、CSSの実装において非常に効率的です。

CSS 
div {
    font-size: 30px;
    padding: 1.5em;
    margin-left: 1em;
}

ブラウザ互換性

rem単位とem単位のブラウザ互換性
単位
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
rem はい はい はい はい
em はい はい はい はい

仕様書

rem単位とem単位の仕様書
仕様書
rem CSS Values and Units Module Level 4
#rem
em CSS Values and Units Module Level 4
#em

参考資料

関連項目