CSS line-height 属性を徹底解説：行間を操り、読みやすいWebページを実現
Webページのテキストの読みやすさを向上させる上で、行間は非常に重要な要素です。CSSの`line-height`属性を用いることで、行間を思い通りに調整し、美しいタイポグラフィを実現することができます。
この記事では、`line-height`属性について、基本的な定義から具体的な使い方、そして応用例までを網羅的に解説します。
line-heightの基本：定義と役割
`line-height`属性は、テキストの行の高さを指定するために使用されます。具体的には、行ボックス（line box）の高さを指定します。行ボックスとは、インライン要素を含む行を囲む仮想的なボックスのことです。
適切な行間を設定することで、テキストの可読性を向上させ、文章全体の見やすさを格段に向上させることができます。行間が狭すぎると圧迫感を与え、読みにくくなります。反対に行間が広すぎると、行間のつながりが希薄になり、これもまた読みにくくなります。
<p style="line-height: 1.5;">この段落は、行の高さが1.5倍に設定されています。</p>
<p>こちらはデフォルトの行間です。</p>
line-heightの値の設定方法：数値、パーセンテージ、単位
`line-height`属性には、下記のように様々な値を設定することができます。
1. 数値
現在のフォントサイズに対する倍率として行の高さを指定します。例えば、`line-height: 1.5;`と指定すると、現在のフォントサイズの1.5倍の高さの行が設定されます。
<p style="font-size: 16px; line-height: 1.5;">フォントサイズは16px、行間はフォントサイズの1.5倍です。</p>
2. パーセンテージ
数値と同様に、現在のフォントサイズに対するパーセンテージで指定することもできます。例えば、`line-height: 150%;`と指定すると、`line-height: 1.5;`と同じ結果になります。
<p style="font-size: 16px; line-height: 150%;">フォントサイズは16px、行間はフォントサイズの150%です。</p>
3. 単位付きの長さ
`px`、`em`、`rem`などの単位を用いて、具体的な行の高さを指定することができます。この場合、フォントサイズに関係なく、指定した長さの行が設定されます。
<p style="line-height: 24px;">この段落の行間は、常に24pxです。</p>
4. inherit
親要素の`line-height`の値を継承します。
5. normal
`line-height`のデフォルト値です。ブラウザがフォントに応じて適切な行の高さを自動的に設定します。一般的には、フォントサイズの約1.2倍の値が設定されます。
line-heightの計算方法：行ボックスの高さの決定
行ボックスの高さは、`line-height`の値だけでなく、下記の要素も考慮して決定されます。
- フォントサイズ
- 行内の画像やフォーム要素などの高さ
- 上下の行ボックスとの間の上下マージン、ボーダー、パディング
`line-height`で指定した値よりも、これらの要素の高さの合計の方が大きい場合、行ボックスの高さは、これらの要素の高さの合計になります。
line-heightの活用例：垂直方向のセンタリング、段落間の調整
1. 単一行テキストの垂直方向のセンタリング
`line-height`の値を行ボックスの高さと同じに設定することで、単一行のテキストを垂直方向の中央に配置することができます。
<div style="height: 100px; line-height: 100px; border: 1px solid black;">
中央揃えされたテキスト
</div>
2. 段落間の調整
段落間の余白を調整したい場合は、`line-height`の値を調整することで、視覚的に快適な間隔を作ることができます。
<p style="line-height: 1.8;">
この段落は、行間が広めに設定されています。
</p>
<p>
こちらはデフォルトの行間です。
</p>
注意点
- 行間が狭すぎたり広すぎたりすると、可読性が低下します。適切な行間は、フォントの種類やサイズ、テキストの長さなどによって異なってきますので、状況に応じて調整することが大切です。
- ブラウザやフォントによって、`line-height`のデフォルト値や計算方法が異なる場合があります。そのため、異なるブラウザで表示を確認し、必要に応じて調整する必要があります。
参考資料
よくある質問
Q1. line-heightはどのように計算されますか？
A1. line-heightは、指定された値と、テキストのフォントサイズ、行内要素の高さ、上下のマージン、ボーダー、パディングなどを考慮して計算されます。詳細については、上記の「line-heightの計算方法」のセクションを参照してください。
Q2. line-heightとfont-sizeの違いは何ですか？
A2. `font-size`は文字の高さを指定するのに対し、`line-height`は行の高さを指定します。 `line-height`は、フォントサイズと行間を含めた高さになります。
Q3. line-heightを指定する際に推奨される値はありますか？
A3. 一般的に、本文テキストの場合は1.5〜1.8程度の値が推奨されます。ただし、フォントの種類やサイズ、テキストの長さなどによって適切な値は異なるため、状況に応じて調整することが大切です。