CSSのremとemは基準になるfont-sizeの違いで使い分ける

CSSのremはルート要素のfont-size、emはその長さを使う要素の算出済みfont-sizeを基準にします。ただし、要素自身のfont-sizeへemを書く場合は、親要素の算出済みfont-sizeが基準です。

ページ全体で同じ基準から文字や余白を決めたいならrem、部品の文字サイズに合わせて余白や寸法も変えたいならemが候補になります。単位の短さではなく、どのfont-sizeへ連動させるかで選びます。

remはルート要素のfont-sizeを基準にする

remのrはrootを表します。W3CのCSS Values and Units Module Level 3では、1remをルート要素の算出済みfont-sizeと定義しています。HTML文書なら、通常はhtml要素がルート要素です。

次のコードは計算関係を示す仮例です。

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

.note {
  margin-top: 1.5rem;
}

この例では、1remは16px、h1の文字サイズは32px、.noteの上余白は24pxになります。.noteがどの要素の中へ入っても、ルート要素のfont-sizeが同じなら1.5remの基準は変わりません。

ルート要素のfont-size自体へremを指定する場合は、循環を避けるため、そのプロパティの初期値を基準にします。通常の要素へ使う場合と同じように、ルート要素自身の計算後の値をもう一度掛けるわけではありません。

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

emは、原則として、その長さを使う要素の算出済みfont-sizeを基準にします。

.button {
  font-size: 20px;
  padding: 0.5em 1em;
}

この仮例では、上下のpaddingは10px、左右のpaddingは20pxです。.buttonの文字サイズを変えると、文字を囲む余白も同じ比率で変わります。

ボタン、見出し、注意書きのような部品では、文字だけを大きくして余白が狭いままになるのを避けたい場合があります。その部品の文字サイズへ寸法を連動させる目的なら、emが使えます。

一方、ページの階層にかかわらず、同じ見出し段階を同じ大きさにしたい場合は、ルート要素へ連動するremのほうが計算を追いやすくなります。

font-sizeへ書くemだけは親要素を基準にする

emをpaddingやmarginへ使う場合と、font-sizeへ使う場合では、基準を分けて考えます。

.section {
  font-size: 1.25em;
}

.section .summary {
  font-size: 1.2em;
  margin-top: 1em;
}

親の文字サイズを16pxとする説明用の条件では、.sectionの文字サイズは20pxです。.summaryのfont-size: 1.2emは親である.sectionの20pxを基準にするため、24pxになります。そのあと、.summaryのmargin-top: 1emは、.summary自身の算出済み文字サイズ24pxを基準にします。

このように、入れ子の各段階でfont-sizeへemを掛けると、文字サイズが段階的に増減します。emが不安定なのではありません。どの親要素の値から計算したかを見落とすと、結果を予想しにくくなります。

子要素は単位ではなく算出済みの値を継承する

相対単位を指定した親要素から、子要素がその文字列をそのまま受け取るとは限りません。仕様は、子要素が親の指定値ではなく算出済みの値を継承すると説明しています。

たとえば、親のfont-size: 1.25emが20pxに算出されたなら、何も指定していない子要素は、その20pxを継承します。子要素でもう一度1.25emを掛ける処理ではありません。子要素自身へ新しくfont-size: 1.25emを書いた場合に、継承した20pxを基準として再計算します。

CSSを調べるときは、指定された1.25emだけでなく、ブラウザーが算出したfont-sizeも確認します。親から順に見れば、入れ子で生じた大きさを逆算できます。

remとemのどちらか一方へ統一する必要はない

二つの単位には、向いている連動先が違います。

これは固定の規則ではなく、連動先を選ぶための判断例です。部品の文字を変えたとき、余白も一緒に変える必要があるか。親要素の文字サイズを変えたとき、子の文字も段階的に変える必要があるか。この二つを先に決めます。

remへ統一しても、ルート要素の値をむやみに変えればページ全体へ影響します。emへ統一しても、親子関係を記録していれば計算できます。単位だけで保守性が決まるのではなく、基準値と連動範囲を共有できるかで決まります。

基準値と計算結果を一つの部品で確認する

最初に、見出しやボタンなど一つの部品を選びます。ルート要素、親要素、対象要素のfont-sizeを確認し、その部品の文字、padding、marginがどの値へ連動すべきかを書き分けます。

ブラウザーでは、狭い画面と広い画面だけでなく、文字サイズを変えた場合も確認します。文字が大きくなったのに、固定した高さからはみ出していないか。emで連動させた余白が広がりすぎていないか。remでそろえた段階が意図した差を保っているかを見ます。

制作を委託する場合は、remやemを使ったCSSだけでなく、ルートの基準値、部品ごとの連動先、想定する文字サイズの変更範囲を受け取ります。数値だけを引き継ぐより、どの値を変えると何が連動するかを確認できます。

最初の一手は、対象要素のfont-sizeを親から順にたどり、1remと1emがそれぞれ何pxに算出されるかを一つだけ計算することです。