CSS ・ 文字・フォント
line-height
行の高さ
行の高さ（行間）を指定します。単位なしの数値で指定すると、文字サイズに対する倍率になります。
01
サンプルコード
HTML
1<p class="tight">行の高さが1.2の文章です。行と行の間が狭く、長い文章は少し読みにくく感じます。</p>
2<p class="loose">行の高さが1.9の文章です。行と行の間にゆとりがあり、日本語の長い文章が読みやすくなります。</p>
CSS
1p {
2 max-width: 22em;
3}
4.tight {
5 line-height: 1.2;
6}
7.loose {
8 line-height: 1.9;
9}
02
実行結果
ブラウザでの表示
03
解説
line-height は1行の高さを指定するプロパティです。文字の上下に、(行の高さ − 文字の大きさ) の半分ずつ余白が付きます。
1.8 のように単位なしで書くと「文字サイズの1.8倍」という倍率になります。子要素の文字サイズが変わっても倍率で計算し直されるため、単位なしが推奨されます。
日本語の本文は、1.7〜2 程度にすると読みやすくなります。見出しは 1.2〜1.4 程度に詰めるのが一般的です。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
1.8 | 文字サイズの1.8倍（推奨） |
normal | ブラウザの標準（約1.2） |
28px | 固定の高さ |
180% | その要素の文字サイズの180%（子要素には計算後の値が継承される） |
1行のボタンの文字を上下中央にする
高さと同じ line-height を指定すると、1行の文字が上下中央に配置されます。
HTML
1<a class="btn" href="#">予約する</a>
CSS
1.btn {
2 display: inline-block;
3 height: 44px;
4 line-height: 44px;
5 padding: 0 24px;
6}
注意点
- 01em や % で指定すると、子要素の文字サイズが違うときに行が重なることがあります。
- 02行の高さを狭くしすぎると、アクセントや下線が上下の行とぶつかります。