Webサイトのタイポグラフィにおいて、行間は可読性とデザインの質を左右する極めて重要な要素です。
適切な行間が設定されていない文章は、ユーザーに圧迫感を与え、情報を正しく伝えることが困難になります。
CSSのline-heightプロパティは、単純に数字を指定するだけではなく、継承の仕組みや計算方法を深く理解することで、その真価を発揮します。
本記事では、2026年現在の最新ブラウザ環境に基づいた最適な指定方法から、アクセシビリティに配慮した実戦的なテクニックまでを詳しく解説します。
意図した通りのデザインを実装するためのスキルを、この機会にマスターしましょう。
line-heightの基本概念と計算の仕組み
line-heightは、テキストの1行の高さを指定するためのプロパティです。
フォントサイズとline-heightの差分は「レディング」と呼ばれ、行の上下に均等に振り分けられます。
例えば、フォントサイズが16pxでline-heightが24pxの場合、上下に4pxずつの余白が生まれる計算になります。
この仕組みを理解しておくことは、マージンやパディングによるレイアウト調整を行う際に非常に重要です。
指定可能な値の種類
line-heightには複数の指定方法が存在します。
| 指定方法 | 記述例 | 特徴 |
|---|---|---|
| 数値（推奨） | line-height: 1.5; | フォントサイズに対する倍率で指定。継承時に再計算されるため最も安全。 |
| 単位付き数値 | line-height: 24px; | 絶対値で固定。フォントサイズを変更した際に応答しないリスクがある。 |
| パーセント | line-height: 150%; | 親要素のフォントサイズに基づき計算される。子要素での継承に注意が必要。 |
| normal | line-height: normal; | ブラウザやフォントに依存するデフォルト設定。通常は1.2前後。 |
なぜ「単位なし数値」で指定すべきなのか
CSS設計において、line-heightは単位なしの数値で指定することが推奨されます。
単位を付けた場合、計算された後の固定値が子要素へと継承されてしまいます。
一方、単位なしで指定すると、子要素それぞれのフォントサイズに応じて「倍率」として再計算されるのが特徴です。
この挙動の違いを理解するために、以下のコード例を確認してみましょう。
/* 単位あり（px）の場合 */
.parent-px {
font-size: 20px;
line-height: 30px; /* 固定値30pxが継承される */
}
.child-px {
font-size: 10px;
/* line-heightは30pxのままになり、行間が空きすぎる */
}
/* 単位なしの場合 */
.parent-unitless {
font-size: 20px;
line-height: 1.5; /* 1.5という倍率が継承される */
}
.child-unitless {
font-size: 10px;
/* line-heightは 10px * 1.5 = 15px と適切に計算される */
}このように、メンテナンス性と柔軟性を考慮すると、単位なしの指定が最適解となります。
アクセシビリティを考慮した行間の設定基準
Webコンテンツのアクセシビリティ・ガイドライン（WCAG）では、多くのユーザーにとって読みやすい行間の基準が示されています。
本文テキストにおいては、フォントサイズの少なくとも1.5倍（1.5）以上の行間を確保することが推奨されています。
行間が狭すぎると、視覚障害を持つユーザーや読字障害を持つユーザーが次の行へ目を移す際に、行を見失いやすくなります。
逆に、見出し（h1〜h6）などの大きな文字では、1.5倍だと行間が広すぎてバラバラな印象を与えてしまうことがあります。
見出しでは1.2から1.4程度に抑えることで、情報のまとまりを強調しやすくなります。
2026年における最新の行間制御テクニック
近年のCSS進化により、従来のline-heightだけでは難しかった細かい制御が可能になっています。
lh / rlh 単位の活用
lh単位は、その要素のline-heightの値を基準とした長さの単位です。
また、rlhはルート要素（html）のline-heightを基準にします。
これらを使用することで、アイコンのサイズを行間の高さと完全に一致させることが容易になります。
.icon {
/* 行間の高さと同じサイズに設定 */
width: 1lh;
height: 1lh;
display: inline-block;
vertical-align: middle;
}text-box-trim による余白の除去
これまで、line-heightによって生じる「上下の半端な余白」は、デザイナーが意図した正確なマージン設定を妨げる要因でした。
最新のCSSでは、text-box-trimプロパティ（旧名 leading-trim）の導入により、テキストの上下にある空きスペースをカットできるようになりました。
これにより、コンポーネント内の整列がより厳密に行えるようになっています。
.button {
font-size: 1rem;
line-height: 1.5;
/* テキストの上下の余分なスペースを削除 */
text-box-trim: both;
text-box-edge: cap alphabetic;
padding: 12px 24px;
}実戦で役立つ状況別のベストプラクティス
デザインの要件に応じて、line-heightの最適な値は変化します。
フォーム入力要素とボタン
入力フォームやボタン内では、line-heightだけで高さを調整するのではなく、paddingと組み合わせるのが一般的です。
line-height: 1;を指定して行間の余白をゼロにし、上下のpaddingでボタンの高さを担保すると、中央配置が崩れにくくなります。
ただし、ボタン内で複数行のテキストが発生する可能性がある場合は、1.2程度の最小限の数値を設定しておくのが安全です。
多言語対応（日本語と欧文の混在）
日本語は欧文に比べて1文字の情報量が多く、漢字の画数も多いため、広めの行間が必要とされる傾向にあります。
英語サイトで「1.4」が適切な場合でも、日本語サイトでは「1.6から1.8」程度が最も読みやすいと感じられることが多いです。
フォントファミリーの種類によっても「見た目の行間」は変わるため、ブラウザでの実機確認は欠かせません。
レスポンシブデザインにおける動的な行間
画面サイズに応じてフォントサイズを大きくする場合、行間も連動して調整する必要があります。
clamp()関数を使用してフォントサイズを可変にする手法が一般的ですが、その際のline-heightは単位なし数値で指定していれば、自動的に適切に追従します。
body {
/* 最小16px、推奨値2vw、最大24px */
font-size: clamp(1rem, 2vw, 1.5rem);
/* 単位なし指定なら、どのフォントサイズになっても1.7倍を維持 */
line-height: 1.7;
}トラブルシューティング：行間が効かない原因
line-heightを指定しているにもかかわらず、意図した通りに表示されない場合があります。
よくある原因の一つは、インライン要素に対して指定しているケースです。
line-heightはブロックレベル要素（またはinline-block）に対して適用されるべきプロパティです。
また、fontショートハンドプロパティを使用している場合、記述順序によってはline-heightが上書きされてしまうことがあります。
/* 誤ったショートハンドの例 */
.error {
line-height: 2;
font: 16px "Arial", sans-serif; /* ここでline-heightがnormalにリセットされる */
}
/* 正しいショートハンドの例 */
.correct {
font: 16px / 2 "Arial", sans-serif; /* size / line-height の順で記述 */
}まとめ
CSSのline-heightは、単なる数値以上の意味を持つプロパティです。
「単位なしの数値で指定する」という基本原則を守ることで、予期せぬ継承バグを防ぎ、保守性の高いコードを実現できます。
アクセシビリティの観点からは、本文に1.5以上の値を確保し、見出しではデザインバランスを考慮して数値を調整することが重要です。
また、2026年のWeb制作においては、lh単位やtext-box-trimといった最新機能を活用することで、さらに精緻なタイポグラフィ制御が可能になっています。
ユーザーにとって心地よい読書体験を提供するために、プロジェクトごとの最適な行間設定を追求してみてください。
日々の実装の中でこれらのテクニックを意識的に使い分けることが、プロフェッショナルなコーディングへの第一歩となります。