概要
CSSのline-heightプロパティは、行間（行と行の間のスペース）を調整するためのプロパティです。行間の設定は、テキストの読みやすさに大きく影響を与え、適切に調整することでデザイン性と可読性を向上させることができます。本記事では、line-heightの基本的な使い方や設定方法について詳しく解説します。
line-heightの基本構文
line-heightの基本的な構文は以下の通りです。
line-height: 値;
- 値には、数値、パーセンテージ、長さの単位（px、emなど）、またはキーワード（normal）を指定できます。
line-heightの指定方法
数値による指定
line-heightを数値で指定すると、フォントサイズに対する相対値として計算されます。この方法は、単位を指定せずにシンプルに行間を調整するため、多くの場面で推奨されます。
p {
font-size: 16px;
line-height: 1.5; /* 16px × 1.5 = 24pxの行間 */
}
数値指定の場合、指定した数値はフォントサイズに掛け合わされるため、サイズ変更時にも行間が自動で調整され、レスポンシブデザインにも適しています。
パーセンテージによる指定
パーセンテージで指定すると、フォントサイズに対する相対的な行間を設定できます。この指定方法も柔軟ですが、通常は数値指定の方が簡潔です。
p {
font-size: 16px;
line-height: 150%; /* 16px × 1.5 = 24pxの行間 */
}
単位付きの値による指定
行間を固定値で指定したい場合は、ピクセル（px）、emなどの単位を付けて指定します。ただし、この方法はフォントサイズが変わっても行間が変わらないため、デザインの一貫性を保ちづらい場合があります。
p {
font-size: 16px;
line-height: 24px; /* 固定の24pxの行間 */
}
キーワード「normal」による指定
line-height: normal;はデフォルトの行間を設定します。この値は、ブラウザやフォントによって異なり、一般的にフォントサイズの約1.2倍程度になります。
p {
line-height: normal; /* ブラウザのデフォルトの行間 */
}
line-height設定のベストプラクティス
読みやすさのための設定
行間が狭すぎると文字が詰まって見え、広すぎると視線が迷いやすくなるため、読みやすい行間を設定することが重要です。一般的には、line-heightはフォントサイズの1.4から1.6倍程度が読みやすいとされています。
body {
font-size: 16px;
line-height: 1.5; /* 読みやすい行間の目安 */
}
一貫性のあるデザイン
複数の要素に異なるline-heightを設定する際は、一貫性を保つことが重要です。特に、見出しや本文の間で大きな差がないように設定すると、全体のデザインが整った印象になります。
h1 {
font-size: 32px;
line-height: 1.2; /* 見出しは少しタイトに */
}
p {
font-size: 16px;
line-height: 1.6; /* 本文は少し広めに */
}
line-heightの注意点
- 単位付きと数値の違いに注意
単位を付けた場合、行間が固定されるため、異なるフォントサイズに対応できません。数値指定はフォントサイズに対して相対的に調整されるため、より柔軟です。 - フォントによる違い
各フォントはそれぞれデフォルトの行間が異なるため、フォントを変更した際はline-heightの再調整が必要になる場合があります。 - アクセシビリティの配慮
行間が狭すぎると視覚的な負担が増し、可読性が低下します。特に小さなフォントサイズの場合は、行間を広く取ることで読みやすさを向上させましょう。
まとめ
line-heightプロパティは、テキストの行間を調整するための重要なCSSプロパティです。適切な行間設定は、ウェブページ全体の読みやすさとデザインのバランスを大きく向上させます。数値指定を活用することで、レスポンシブなデザインにも対応できる柔軟な行間調整が可能になります。ぜひ、自分のサイトに最適な行間を見つけて、ユーザーにとって快適な読み心地を提供しましょう。