概要
line-heightプロパティは、CSSでテキストの行間（行の高さ）を調整するための重要なプロパティです。適切な行間設定は、テキストの可読性とページ全体のデザインバランスに大きく影響します。
この記事では、line-heightの基本的な使い方から、実践的な設定方法、アクセシビリティを考慮したベストプラクティスまで詳しく解説します。
line-heightの基本構文
/* キーワード値 */
line-height: normal;
/* 単位なしの数値（推奨） */
line-height: 1.5;
/* 長さの値 */
line-height: 24px;
line-height: 1.5em;
line-height: 1.5rem;
/* パーセンテージ */
line-height: 150%;
/* グローバル値 */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: unset;各指定方法の詳細
単位なしの数値（推奨）
最も推奨される指定方法です。フォントサイズに対する倍率として計算されます。
p {
font-size: 16px;
line-height: 1.5; /* 16px × 1.5 = 24pxの行の高さ */
}メリット:
- フォントサイズが変わっても、比率が維持される
- 子要素にも適切に継承される
- レスポンシブデザインに最適
/* 親要素で設定すると子要素に正しく継承される */
.article {
font-size: 16px;
line-height: 1.6;
}
.article h2 {
font-size: 24px;
/* line-heightは1.6が継承され、24px × 1.6 = 38.4pxになる */
}パーセンテージ
フォントサイズに対するパーセンテージで指定します。
p {
font-size: 16px;
line-height: 150%; /* 16px × 1.5 = 24px */
}注意点: パーセンテージは計算結果が継承されるため、子要素で問題が発生する場合があります。
/* 問題のある例 */
.parent {
font-size: 16px;
line-height: 150%; /* 計算結果24pxが継承される */
}
.parent h2 {
font-size: 32px;
/* 親から継承された24pxがそのまま適用され、行間が狭くなる */
}長さの値（px, em, rem）
固定値で行間を指定します。
/* ピクセル指定 */
p {
font-size: 16px;
line-height: 24px;
}
/* em指定 */
p {
font-size: 16px;
line-height: 1.5em; /* 16px × 1.5 = 24px */
}
/* rem指定 */
p {
line-height: 1.5rem; /* ルート要素のfont-sizeに対する倍率 */
}normal
ブラウザのデフォルト値を使用します。通常はフォントによって異なりますが、約1.2程度です。
p {
line-height: normal;
}実践的な使用例
本文テキストの設定
/* 読みやすい本文スタイル */
.body-text {
font-size: 16px;
line-height: 1.8;
letter-spacing: 0.05em;
color: #333;
}
/* 日本語に最適化した設定 */
.japanese-text {
font-size: 16px;
line-height: 1.9; /* 日本語はやや広めが読みやすい */
font-feature-settings: "palt"; /* プロポーショナルメトリクス */
}見出しの設定
/* 見出しは本文より行間を狭く */
h1 {
font-size: 36px;
line-height: 1.2;
font-weight: bold;
}
h2 {
font-size: 28px;
line-height: 1.3;
font-weight: bold;
}
h3 {
font-size: 22px;
line-height: 1.4;
font-weight: bold;
}
/* 複数行になる可能性がある見出し */
.multi-line-heading {
font-size: 32px;
line-height: 1.4;
max-width: 600px;
}垂直方向の中央揃え
line-heightは単一行テキストの垂直中央揃えにも使用できます。
/* ボタンのテキストを中央揃え */
.button {
height: 48px;
line-height: 48px; /* 高さと同じ値 */
text-align: center;
padding: 0 24px;
}
/* アイコン付きボタン */
.icon-button {
display: inline-flex;
align-items: center;
height: 48px;
line-height: 1; /* flexboxを使う場合はnormalでOK */
padding: 0 24px;
}カードコンポーネントでの使用
.card {
padding: 24px;
border-radius: 8px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.card__title {
font-size: 20px;
line-height: 1.3;
font-weight: bold;
margin-bottom: 12px;
}
.card__description {
font-size: 14px;
line-height: 1.7;
color: #666;
}
.card__meta {
font-size: 12px;
line-height: 1.5;
color: #999;
margin-top: 16px;
}フォームラベルと入力欄
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 14px;
line-height: 1.5;
font-weight: 500;
margin-bottom: 6px;
color: #333;
}
.form-input {
width: 100%;
height: 44px;
padding: 0 12px;
font-size: 16px;
line-height: 44px;
border: 1px solid #ddd;
border-radius: 4px;
}
.form-textarea {
width: 100%;
min-height: 120px;
padding: 12px;
font-size: 16px;
line-height: 1.6;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical;
}コンテンツタイプ別の推奨値
| コンテンツ | 推奨line-height | 理由 |
|---|---|---|
| 見出し（h1-h3） | 1.1 - 1.3 | 大きな文字は行間が広いと間延びする |
| 本文（日本語） | 1.7 - 2.0 | 日本語は複雑な文字が多く、広めが読みやすい |
| 本文（英語） | 1.4 - 1.6 | アルファベットは比較的コンパクト |
| リスト項目 | 1.5 - 1.8 | 項目間の区切りを明確に |
| ボタン | 要素の高さと同値 | 垂直中央揃えのため |
| キャプション | 1.4 - 1.5 | 補足情報はコンパクトに |
レスポンシブ対応
.responsive-text {
font-size: 16px;
line-height: 1.6;
}
/* モバイルではやや広めの行間 */
@media (max-width: 480px) {
.responsive-text {
font-size: 15px;
line-height: 1.8;
}
}
/* 大画面では標準的な行間 */
@media (min-width: 1200px) {
.responsive-text {
font-size: 18px;
line-height: 1.7;
}
}clamp()を使った流動的な設定
.fluid-text {
font-size: clamp(16px, 2vw, 20px);
line-height: clamp(1.5, 2vw, 1.8);
}アクセシビリティの考慮
WCAG ガイドライン
WCAG（Web Content Accessibility Guidelines）では、本文テキストの行間は少なくともフォントサイズの1.5倍以上を推奨しています。
/* WCAGに準拠した設定 */
.accessible-text {
font-size: 16px;
line-height: 1.5; /* 最低限の推奨値 */
letter-spacing: 0.12em; /* 文字間隔も考慮 */
word-spacing: 0.16em; /* 単語間隔も考慮 */
}
/* より読みやすさを重視した設定 */
.highly-readable {
font-size: 18px;
line-height: 1.8;
max-width: 70ch; /* 1行あたりの文字数を制限 */
}視覚障害者への配慮
/* ズーム時も崩れないレイアウト */
.zoom-friendly {
line-height: 1.6; /* 単位なしで指定 */
max-width: 45em; /* emで制限することでズームに対応 */
padding: 1em;
}よくある問題と解決策
問題1: 継承による予期しない行間
/* 問題のあるコード */
.parent {
font-size: 16px;
line-height: 24px; /* 固定値 */
}
.parent h2 {
font-size: 32px;
/* line-height: 24pxが継承され、行間が詰まる */
}
/* 解決策 */
.parent {
font-size: 16px;
line-height: 1.5; /* 単位なしの数値を使用 */
}問題2: インライン要素での行間の乱れ
/* 問題: インライン要素により行間が乱れる */
p span.large {
font-size: 24px;
}
/* 解決策: インライン要素にもline-heightを設定 */
p span.large {
font-size: 24px;
line-height: inherit; /* または親と同じ比率 */
}問題3: 画像との組み合わせ
/* 問題: 画像の下に余計な隙間ができる */
.image-container img {
display: block; /* インライン要素のベースライン問題を解決 */
}
/* または */
.image-container {
line-height: 0;
font-size: 0;
}
.image-container img {
width: 100%;
height: auto;
}実装のベストプラクティス
1. 基本設定はbodyで行う
body {
font-size: 16px;
line-height: 1.6;
font-family: 'Noto Sans JP', sans-serif;
color: #333;
}2. コンポーネントごとに調整
/* 記事本文 */
.article-content {
line-height: 1.9;
}
/* サイドバー */
.sidebar {
font-size: 14px;
line-height: 1.6;
}
/* フッター */
.footer {
font-size: 13px;
line-height: 1.5;
}3. ユーティリティクラスの活用
/* 行間ユーティリティ */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }ブラウザサポート
line-heightプロパティはすべてのブラウザで完全にサポートされています。
| ブラウザ | サポート状況 |
|---|---|
| Chrome | 全バージョン |
| Firefox | 全バージョン |
| Safari | 全バージョン |
| Edge | 全バージョン |
| Opera | 全バージョン |
| IE | 全バージョン |
まとめ
line-heightプロパティは、テキストの可読性とデザインの質を大きく左右する重要なプロパティです。
主なポイント:
- 単位なしの数値を使用することで、継承時の問題を回避できる
- 本文テキストは1.5〜1.8、日本語は1.7〜2.0が読みやすい
- 見出しは1.1〜1.4でコンパクトに
- アクセシビリティのため、最低でも1.5以上を確保
- レスポンシブデザインではデバイスごとに調整を検討
適切な行間設定により、ユーザーにとって読みやすく、美しいテキストレイアウトを実現しましょう。
