line-height
line-height は CSS のプロパティで、書字方向が水平の場合は、行ボックスの高さを設定します。書字方向が垂直の場合は、行ボックスの幅を設定します。これは主にテキストの行間を設定するために使用します。書字方向が水平のブロックレベル要素では、要素に含まれる行ボックスの推奨される高さを指定し、置換ではないインライン要素では、行ボックスの高さの計算に使われる高さを指定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
normal | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
body {
line-height: 1.6;
}
h1 {
line-height: 1.2;
}ライブデモ
実務での使いどころ
-
本文テキストの可読性向上
body要素にline-height: 1.6を設定し、日本語テキストの可読性を確保して長文でも読みやすいレイアウトを作ります。
注意点
- line-heightに単位付きの値（px、emなど）を指定すると、子要素で予期しない行間になる場合があります。単位なしの数値を推奨します。
アクセシビリティ
- WCAGでは行間を少なくともフォントサイズの1.5倍にすることが推奨されています。十分な行間を確保し、読みやすさを向上させてください。