CSS

line-height とは？

想像してみてください。あなたが本を読んでいるとき、文字がぎゅうぎゅう詰めで書かれていたら、読みにくいですよね？でも、文字の間や行の間に適切なスペースがあると、ずっと読みやすくなります。これが line-height、つまり「行の高さ」がウェブページで果たす役割です。

line-heightは、文字が縦にどれくらいのスペースを取るかを決める CSSの設定です。この設定を使うと、行と行の間の空間（行間）を調整できます。例えば、行間を広げたい場合は line-heightを大きく設定します。逆に、行間を狭めたい場合は line-heightを小さくします。

ここで大切なのは、line-heightをどのように設定するかです。line-heightにはいくつか設定方法がありますが、基本的には３つの方法がよく使われます。

数値

例えば 1.5 のように設定します。これは、フォントサイズの 1.5倍の「行ボックスの高さ」を意味します。フォントサイズが 10px なら、行ボックスの高さは 15px になります。

パーセンテージ

要素の font-size に対する割合で「行ボックスの高さ」を指定します。150% のように設定すると、フォントサイズの 150% の行ボックスの高さになります（％で指定しても、継承時には長さとして伝わります）。

単位付きの値

px や em などの「長さ」で直接指定します（この場合は継承しても長さのまま伝わり、子の文字サイズが変わっても高さは変わりません）。2em や 24px のように設定できます。

行の高さとフォントサイズの関係ですが、 例えば line-height が 20px で font-size が 14px の場合、20px（行ボックスの高さ）− 14px（文字の高さ）＝ 6px の余りが、上 3px・下 3px に分配されます。

Sample

<div class="smpBox">
	<p class="normal-line-height">このテキストはデフォルトの行間で表示されています。line-heightが normal に設定されているため、ブラウザのデフォルトの行間が適用されます。</p>

	<p class="small-line-height">このテキストは狭い行間で表示されています。line-heightが 1.2 に設定されているため、テキストの行間が狭まります。</p>

	<p class="large-line-height">このテキストは広い行間で表示されています。line-heightが 2 に設定されているため、テキストの行間が広がります。</p>
</div>

/* 最大幅の設定 */
.smpBox {
	max-width: 400px;
}

/* デフォルトの行間 */
.normal-line-height {
	line-height: normal;
}

/* 行間を狭くする */
.small-line-height {
	line-height: 1.2;
}

/* 行間を広くする */
.large-line-height {
	line-height: 2;
}

まずはここから（おすすめ設定）

本文テキストは line-height: 1.5;（単位なし）をベースにすると、多くの環境で読みやすくなります。見出しはやや詰めて 1.2〜1.4 が目安です。

body {
    line-height: 1.5;    /* 単位なし：入れ子でも崩れにくい */
}
h1, h2, h3 {
    line-height: 1.25;   /* 見出しは少し詰める */
}

単位なしが推奨される理由

単位なしは継承時に「数値のまま」子へ伝わり、子要素の font-size に合わせて再計算されます。入れ子の small などが混ざっても行のリズムが壊れにくいのが利点です。

避けたい書き方

• line-height: 24px; を親で固定し、子で文字サイズだけ変える → 行の高さが合わずギクシャクしがち。
• line-height に負の値は不可。
• normal は一定値ではない（フォント/ブラウザ次第）。本文の既定解にはしない。

中級のコツ

• カードやボタン内の短文は、詰め気味（1.2〜1.4）でコンパクトに。
• 多言語サイトでは、和文はやや広め、欧文はやや狭めを目安にABテスト。
• calc() も利用可（％や長さ指定時）。ただしまずは単位なしを基本に。

上級メモ

• 「上・下の余り」が均等に配分されるため、アイコン付きテキストなどでは縦位置が気になることがある。必要なら行内要素のベースライン調整も検討。
• 巨大な見出しで行の食い込みが気になる場合、親コンテナでの余白設計（margin/padding）と合わせて調整。

よくある質問（FAQ）

単位なしと px の違いは？

単位なしは子にも“数値”で継承され、子の文字サイズに合わせて再計算。px は“固定の長さ”で継承され、子の文字サイズが変わっても高さは固定。

normal はどのくらい？

目安はおよそ 1.2 前後ですが、フォントやブラウザに依存。本文の既定解には向きません。

おすすめ値は？

本文 1.5 前後、見出し 1.2〜1.4。まずは単位なしで。

よくあるエラー早見表

親に px 固定、子だけ文字サイズ変更

行の高さが合わずガタつく → 親も子も単位なしに揃える

normal を鵜呑みにする

可読性が足りないことがある → 本文は 1.4〜1.8 を試す

負の値を指定

仕様的に不可 → 0 以上で設計する

見出しがスカスカ

見出しだけ 1.2〜1.4 に詰める