line-heightプロパティで単位のある値を使用する際の小技

ウェブページの文章の行の高さは、CSSのline-heightプロパティで設定しますが、emなどの単位がある値 (parcentageやlength) と、単位のない数値 (number) とでは、子孫要素に継承させた結果が異なります。一般的には、数値での設定が好ましいとされています。

今回は、em値を使用しても、数値を使用した場合と同様の結果を得る方法を紹介します。

line-heightプロパティの数値とem値を比較

数値はフォントサイズに乗算する数、em値はフォントサイズの文字数分です。

/* 行の高さは 1文字 16px 掛ける 2 */
.number {
  font-size: 16px;
  line-height: 2;
}

/* 行の高さは 1文字 16px の 2文字分 */
.length {
  font-size: 16px;
  line-height: 2em;
}

上記のCSSコードの .number と .length の行の高さは、いずれも 32px です。

しかし、これらの子孫要素に継承される行の高さは異なります。

数値は数値そのものが継承されるため、子孫要素のフォントサイズが 32px の場合、行の高さは 32px 掛ける 2 で 64px になります。

一方、em値は、line-heightプロパティを設定した要素 (.length) で計算された値が継承されるため、子孫要素のフォントサイズが 32px の場合でも 32px のままです。

em値を使用して、数値と同様の結果を得るためには、継承させた結果が異なるという問題をクリアする必要があります。

継承させた結果が問題なら継承させなければ良い

継承させた結果が問題なら継承させないというのが結論になります。つまり、子孫要素にもline-heightプロパティを設定します。

しかし、この方法だと、継承させることで可能になる、要素内の行の高さを一括で変更できるという利便性が無くなってしまいます。

そこで、継承させることで得られるメリットと、継承させないことで得られるメリットの両方を享受するためにカスタムプロパティ (CSS変数) を使用します。

.parent {
  --line-height: 2em;
  font-size: 16px;
  line-height: var(--line-height);
}
.parent * {
  line-height: var(--line-height);
}
.parent .descendant {
  --line-height: 1.5em;
}

上記のCSSコードの親要素 (.parent) とすべての子孫要素 (*) にline-heightプロパティを設定します。その値は、––line-heightカスタムプロパティで設定した値を使用します。

行の高さを変更したい場合は、line-heightプロパティを上書きするのではなく、––line-heightカスタムプロパティを設定します。

こうすることで、数値で継承させた場合と同様の結果がem値でも得られるようになり、継承による利便性は、カスタムプロパティで代替させることができます。

line-heightプロパティでem値を使用したいケース

line-heightプロパティにem値を使用したくなるケースとしては、行内の文字列の上下にpxやremといった単位を使用したい場合です。

/* 文字列の上下に 0.5rem の余白、行間は 1rem */
.rem {
  --line-height: calc(1em + 1rem);
}

CodePen

〆

カスタムプロパティをうまく活用すると、それまで出来なかったことが出来るようになるという好例じゃないでしょうか。