Yugien - 遊戯苑
テーマ

CSS

この記事では「CSS」について、基本の意味と使い方を初心者向けにやさしく説明します。

Controls how tall each line of text is; start with a unitless value around 1.5 to make body text easier to read.

line-height

文字サイズを含む「行の高さ」を決めて読みやすさを整えるプロパティで、まずは単位なし 1.5 前後を目安にすると本文がスッと読みやすくなります。

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

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

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

このテキストは広い行間で表示されています。line-height が 2 に設定されているため、テキストの行間が広がります。

HTML

<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>

CSS

/* 最大幅の設定 */
.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 が目安です。

CSS

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

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

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

避けたい書き方

中級のコツ

上級メモ

よくある質問（FAQ）

単位なしと px の違いは？
単位なしは子にも“数値”で継承され、子の文字サイズに合わせて再計算。px は“固定の長さ”で継承され、子の文字サイズが変わっても高さは固定。
normal はどのくらい？
目安はおよそ 1.2 前後ですが、フォントやブラウザに依存。本文の既定解には向きません。
おすすめ値は？
本文 1.5 前後、見出し 1.2〜1.4。まずは単位なしで。

よくあるエラー早見表

親に px 固定、子だけ文字サイズ変更
行の高さが合わずガタつく → 親も子も単位なしに揃える
normal を鵜呑みにする
可読性が足りないことがある → 本文は 1.4〜1.8 を試す
負の値を指定
仕様的に不可 → 0 以上で設計する
見出しがスカスカ
見出しだけ 1.2〜1.4 に詰める