はじめに
目的
この文書は、Webサイトの行間を調整するCSSのline-heightプロパティについて分かりやすく解説します。読みやすさを高める方法や実務で使える指定例、関連するデザイン上の注意点までを扱います。
なぜ重要か
行間は文章の読みやすさや視線の移動に大きく影響します。適切な行間は読み疲れを減らし、情報の受け取りやすさを向上させます。アクセシビリティやレスポンシブ対応でも重要な役割を果たします。
この文書で学べること
- 基本的な指定方法と意味
- 値の指定パターンと使い分け
- 読みやすい行間の目安
- 実用的なコード例
- 関連するデザインのポイント
対象読者
コーダー、デザイナー、サイト運営者など、Webの本文をより読みやすくしたい方に向けた内容です。専門用語は最小限にして丁寧に説明します。
基本の指定方法
概要
行間を変えたい要素に対して、line-heightを指定します。line-heightは文字のサイズと上下の余白を含む「行の高さ」を決めます。例: p { line-height: 1.8; }。
指定の基本例
- 数値（単位なし）:
line-height: 1.6;文字サイズに対する倍率です。継承時に使いやすく、推奨されます。 - 長さ（pxなど）:
line-height: 24px;正確な高さを指定できますが、フォントサイズが変わると調整が必要です。 - キーワード:
line-height: normal;ブラウザ既定の間隔になります。
継承と適用範囲
line-heightは親要素から子要素へ継承されます。親に単位なしの数値を指定すると、子で異なるフォントサイズでも期待通りの比率が保たれます。逆にpx指定は固定の高さになります。
実用上の注意
段落やリストなど、ブロック要素に対して指定することが多いです。段落間の余白はマージンで調整する方が分かりやすい場合があります。短い文字列やバランスを重視する見出しには、個別に微調整してください。
具体例
body { font-size: 16px; line-height: 1.6; }
h1 { font-size: 28px; line-height: 1.3; }
p { line-height: 1.8; }
このように親にベースを置き、必要な箇所だけ上書きすると管理しやすいです。
値の指定パターン
単位なしの数値（例: line-height: 1.5;）
単位なしは「フォントサイズの倍率」を指定します。たとえば1.5はフォントサイズの1.5倍の行間です。子要素でフォントサイズを変えても比率が保たれるため、レスポンシブや可読性を重視する場面でよく使います。推奨される基本設定です。
px指定（例: line-height: 24px;）
pxは絶対値で固定の行間を作ります。デザインを厳密に揃えたいカードや見出しで有効です。ただしフォントサイズが拡大されたときに比率が崩れるので、可変レイアウトでは注意します。
パーセント（例: line-height: 150%;）
パーセントはフォントサイズに対する割合を指定します。単位なしの数値と似ていますが、書き方が違うだけで相対調整を行えます。ブラウザや継承の挙動により微差が出ることがあるため、特に理由がなければ単位なしを優先すると分かりやすいです。
実用的な使い分けのコツ
- 文章本文：単位なし（1.4〜1.8）で可読性を保つ。
- コンポーネントや固定高さの要素：pxで整列を優先する。
- 微調整やデザイン起点の調整：パーセントで試す。
コード例：
– body { font-size:16px; line-height:1.6; }
– .card-title { font-size:20px; line-height:24px; }
この3種類を目的に応じて使い分けると、見た目と可読性を両立しやすくなります。
読みやすい行間の目安
基本の考え方
一般的に本文の行間は「フォントサイズの約1.5〜2.0倍」が読みやすい目安です。行間が適度にあると視線が次の行に移りやすくなり、長文でも疲れにくくなります。
具体的な例
- 本文フォント14px：line-height: 1.6 程度
- 本文フォント16px：line-height: 1.6〜1.8（長文は1.8寄り）
- 本文フォント18〜20px：line-height: 1.5〜1.75
例として16pxならまず1.6で試し、読みづらければ1.8にしてみてください。
実務でのポイント
- CSSでは単位なし（unitless）のline-heightを推奨します。フォントサイズに対して相対的に動作し、継承で安定します。
- 段落間はmarginで調整し、行間と混同しないようにします。
- モバイルでは画面幅が狭く行数が増えるため、やや広めにすると読みやすくなります。
- フォントの種類で見え方が変わるので、実際の本文で確認して微調整してください。
チェック方法
ブラウザで実際に長文を読んで目の疲れや行の追いやすさを確かめます。デベロッパーツールでline-heightを動かし、複数デバイスで確認すると効果的です。
おすすめの実用コード例
基本の全体設定
ページ全体に対してまずは標準を決めます。読みやすさの目安として次のようにします。
body {
font-size: 16px;
line-height: 1.6; /* 本文は1.5〜2.0が目安 */
}
この設定で本文の行間が安定します。
見出しと本文のバランス
見出しは本文よりやや詰めます。
h1, h2, h3 {
line-height: 1.25; /* 見出しは少し詰めて詰まり感を抑える */
}
見出しを詰めるとまとまりが良くなります。
注釈や小さい文字
注釈や脚注は文字が小さいため行間を広めにとります。
.small, .note {
font-size: 0.85rem;
line-height: 1.8;
}
小さい文字は行間を広くすると可読性が上がります。
レスポンシブ調整（実用例）
画面幅で文字サイズを調整すると全体のバランスが保ちやすいです。
html { font-size: clamp(14px, 1.2vw, 18px); }
狭い画面では文字を小さく、広い画面では大きくします。
実装のポイント
- CSS変数で基準値をまとめると修正が楽になります。
- 見出しと本文、注釈で行間に差をつけると全体が整います。
- まずは上記の基本を当てはめ、必要に応じて微調整してください。
関連するデザインのポイント
行の長さと読みやすさ
1行あたりおよそ40〜70文字にすると、目線の移動が楽になります。文字数が多すぎると目の移動が疲れ、少なすぎると読み取りにくくなります。実務では60文字前後（幅を約60chに設定）を基準に調整すると良いです。
デバイス別の行間調整
画面幅によって行間（行の高さ）を少し変えると読みやすくなります。例として、モバイルではやや狭め（1.3〜1.45）、PCではやや広め（1.5〜1.8）にします。CSSのメディアクエリで切り替えると便利です。
フォント選びとコントラスト
明瞭な字形のフォントを選ぶと読みやすくなります。本文は中程度の太さで、文字色と背景のコントラストを十分に確保してください。読みやすさを最優先にし、凝った装飾は見出しなどに限ると良いです。
余白と段落の扱い
左右の余白（パディングやマージン）を十分にとると集中しやすくなります。段落間は少し広めにして文の切れ目をはっきりさせると読みやすさが上がります。
実用的なポイント
- 最大幅はコンテンツ幅を基準に決める（例: max-width: 60ch）。
- モバイルでは行長を短めに、PCでは適度に広げる。
- 行間、段落間、文字サイズは一緒に調整してバランスを取る。
これらを組み合わせると、どの画面でも読みやすい表示に近づきます。
