◀ 7.

重心調整）

▶

編集

この記事の要点

line-height は行送り (行ボックスの高さ) を指定する CSS プロパティ — 行間の見た目を決める要
指定方法: normal / 単位なしの数値 (推奨) / px / % / em
単位なしの数値が推奨 — 子要素にフォントサイズ比で継承されるため
本文の推奨値は 1.5 〜 1.8 — 1.0 は密すぎる、2.0 を超えると間延び
行ボックスの余白は行の上下に均等に配分される (上半分・下半分)

line-height プロパティとは

line-height は要素内のテキストの行ボックスの高さを指定する CSS プロパティです。行間 = 行ボックスの高さからフォントサイズを引いた分が、行の上下に均等に配分されます。

値の種類

値	例	挙動
`normal` (初期値)	`normal`	ブラウザのデフォルト (おおむね 1.0〜1.2)
単位なしの数値	`1.5`	font-size の倍数 (推奨)
`px`	`24px`	固定値
`%`	`150%`	font-size に対する割合
`em`	`1.5em`	font-size 基準
`rem`	`1.5rem`	html font-size 基準

基本サンプル

body {
    font-size: 16px;
    line-height: 1.6;       /* = 25.6px に相当 */
}

h1 {
    font-size: 32px;
    line-height: 1.2;       /* = 38.4px */
}

.code-block {
    font-family: monospace;
    line-height: 1.4;       /* コードは少し詰めると見やすい */
}

なぜ単位なしの数値が推奨か

単位付きは固定値が継承されるのに対し、単位なしは係数として継承されて子要素のフォントサイズに合わせて再計算されます。これが致命的な差を生みます。

/* 悪い例: em で指定 */
body {
    font-size: 16px;
    line-height: 1.5em;     /* 24px が固定継承される */
}
h1 {
    font-size: 32px;
    /* line-height は 24px のまま -> 行が潰れる! */
}

/* 良い例: 単位なし */
body {
    font-size: 16px;
    line-height: 1.5;       /* 係数として継承 */
}
h1 {
    font-size: 32px;
    /* line-height は 32 * 1.5 = 48px に自動再計算 */
}

推奨値の目安

用途	推奨値	備考
本文 (日本語)	1.7 〜 1.9	漢字が密なので欧文より広めが読みやすい
本文 (欧文)	1.5 〜 1.7	標準的な範囲
見出し	1.1 〜 1.3	狭めて引き締める
キャプション	1.4	小さな文字なのでやや広めに
コード	1.4 〜 1.5	密集すると読みづらい
ボタン	1 〜 1.2	1 行に収めて高さ計算しやすく

行ボックスの構造 — 余白の配分

line-height が font-size より大きいとき、差分 (leading) は行の上下に均等に配分されます。これを half-leading と呼びます。

.demo {
    font-size: 20px;
    line-height: 30px;
    /* 行ボックスは 30px
       テキスト (em ボックス) は 20px
       余り 10px は上に 5px、下に 5px 配分される */
}

このため、最初の行の上と最後の行の下にも余白がついて見えます。要素の境界とテキストをピタッと合わせたい場合は line-height: 1 + padding で調整するか、新しい leading-trim プロパティ (実装は限定的) を使います。

ボタンを縦中央揃え (定番技)

1 行ボタンなら line-height = height で簡単に中央揃え。

.btn {
    height: 40px;
    line-height: 40px;     /* 高さと同じで縦中央に */
    padding: 0 16px;
    display: inline-block;
    background: #2563eb;
    color: white;
    text-align: center;
}

/* 複数行ある可能性があるなら Flexbox の方が安全 */
.btn-modern {
    height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

line-height とフォントサイズの関係

同じ line-height: 1.5 でもフォントによって見た目の行間が変わります。フォントによってx-height (小文字の高さ) や em ボックスのサイズが異なるためです。

Web フォントを変えたら line-height も微調整が必要なことが多い
日本語混じりの本文は 1.7 以上が読みやすい
狭い領域 (サイドバー等) は少し詰めると情報密度が上がる

レスポンシブな行間設計

モバイルとデスクトップでは画面幅が大きく異なり、最適な行間も変わります。clamp() を活用して滑らかに変化させる手法が定番です。

/* メディアクエリで切替 */
.article {
    line-height: 1.7;
}
@media (max-width: 480px) {
    .article { line-height: 1.6; }
}

/* clamp() で連続的に調整 */
.article-modern {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.7;
    /* line-height は単位なしなのでフォントサイズと連動 */
}

/* 段落間隔とのバランス */
.article p {
    line-height: 1.8;
    margin-block: 1em;   /* 行送りと段落間を分けて考える */
}

vertical-align との関係

インライン要素の垂直揃え (vertical-align) はline-height で作られる行ボックスを基準に計算されます。アイコンを文字の中央に揃えたいときの基準も行ボックスです。

.icon-text {
    line-height: 1.5;
}
.icon-text img {
    vertical-align: middle;   /* 行ボックスの中央に揃う */
    height: 1em;
}

FAQ

Q: line-height: 0 を指定するとどうなる？
A: 行ボックスが潰れて文字が重なる。line-height: 0 はインライン要素の謎の余白 (img の下隙間など) を消すテクニックとして使われることがある。

Q: なぜブラウザのデフォルトは normal で固定値じゃないのか
A: フォントの種類によって最適な行間が異なるため。ブラウザはフォントメトリクスから推奨値を算出する (おおむね 1.0〜1.2)。

Q: line-height: 1 だと文字が切れて見える
A: フォントのアセンダー / ディセンダーがクリップされる可能性。最低 1.1 程度は確保するのが安全。

Q: 段落間 (margin) と line-height の使い分けは？
A: line-height は行内の間隔、margin は段落同士の間隔。行間を空けたつもりで margin を増やすと段落の塊感が消えるので別物として設計する。

ページ一覧

その他