【CSS】line-height の使い方｜行間を調整して文章を読みやすくする方法

文章を画面に表示したとき、「なんだか行が詰まって読みにくい」「もう少し行のあいだを空けたい」と感じたことはないでしょうか。その行と行の間隔（行間）を調整するのが CSS の line-height プロパティです。この記事では line-height が何を指しているのか、単位なしの数値・px・em・% といった値の違い、そして初心者がつまずきやすい「子要素への継承」の挙動までを、表示を見比べながら解説します。なぜ単位なしの数値が推奨されるのかも具体例で説明します。

line-height は「1行分の高さ」を決めるプロパティ

line-height は、テキスト1行が占める高さ（行ボックスの高さ）を指定するプロパティです。日本語では「行間」と訳されることが多いのですが、正確には行と行のあいだの隙間そのものではなく、文字を含めた1行分の高さを表します。たとえば文字の高さ（フォントサイズ）が 16px で line-height が 24px なら、文字の上下に合計 8px の余白が均等に配られ、その結果として行と行のあいだに余白が生まれます。

この余白の取り方しだいで、文章の読みやすさは大きく変わります。行間が狭すぎると行がくっついて圧迫感が出ますし、広すぎると視線が次の行へ移りにくくなります。本文の読みやすさを整える基本的な手段として、line-height は必ず押さえておきたいプロパティです。

基本の使い方

line-height は、テキストを含む要素に対して指定します。本文全体の行間を整えたいときは、body や本文をまとめる要素にまとめて指定するのが一般的です。次の例では本文の行間を文字サイズの 1.7 倍に設定しています。

body {
  font-size: 16px;
  line-height: 1.7; /* 文字サイズの1.7倍を1行の高さにする */
}

このように単位なしの数値を書くと、「フォントサイズの何倍」という比率で行の高さが決まります。日本語の本文では 1.5〜2.0 程度がひとつの目安で、ここでは 1.7 を指定しています。まずはこの「単位なしの数値で指定する」書き方を基本形として覚えておきましょう。理由は後ほど詳しく説明します。

値の指定方法と効果の違い

line-height には、単位なしの数値のほかに px などの長さ、em・% といった相対値、そして初期値の normal を指定できます。それぞれ何を基準に高さが決まるのかが異なります。

ポイントは、単位なしの数値だけが「倍率そのもの」を子要素へ継承するのに対し、em・%・px は「計算後の長さ（px 値）」を継承するという点です。次に、同じ文章へ異なる line-height を当てたデモで見た目の違いを確認してみましょう。

<div class="demo">
  <div class="text lh-1">
    <span class="label">line-height: 1.0</span>
    <p>行間（line-height）は文章の読みやすさを大きく左右します。値が小さいと行と行がくっついて、文章が窮屈に見えてしまいます。</p>
  </div>
  <div class="text lh-15">
    <span class="label">line-height: 1.5</span>
    <p>行間（line-height）は文章の読みやすさを大きく左右します。1.5 前後にすると行どうしに適度な余白ができ、長い文章でも読みやすくなります。</p>
  </div>
  <div class="text lh-2">
    <span class="label">line-height: 2.0</span>
    <p>行間（line-height）は文章の読みやすさを大きく左右します。値を大きくしすぎると今度は行が離れすぎて、かえって読みにくくなることもあります。</p>
  </div>
</div>

.demo {
  font-family: sans-serif;
}

.text {
  background: #f0f2f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.label {
  display: block;
  font-size: 13px;
  color: #007bff;
  font-weight: bold;
  margin-bottom: 6px;
}

.text p {
  margin: 0;
}

/* ここが今回の主役。同じ文章に異なる line-height を当てて見比べる */
.lh-1 p  { line-height: 1.0; }
.lh-15 p { line-height: 1.5; }
.lh-2 p  { line-height: 2.0; }

CSS タブの .lh-1・.lh-15・.lh-2 の値を書き換えると、同じ文章でも行間の印象が大きく変わるのが分かります。1.0 では行が詰まりすぎて読みづらく、2.0 では余白が広すぎて間延びして見えます。多くの場面では 1.5〜1.8 あたりが読みやすさのバランスを取りやすい値です。

単位なしの数値が推奨される理由

値の中でも特に重要なのが、なぜ単位なしの数値が推奨されるのかという点です。これは line-height 特有の「継承のされ方」が関係しています。line-height はフォントサイズの異なる子要素を含むときに、単位の有無で結果が大きく変わるのです。

単位なしは「倍率」が継承される

単位なしの数値を指定すると、その数値（倍率）そのものが子要素に継承されます。つまり子要素はそれぞれ自分のフォントサイズに倍率を掛け直して行の高さを計算します。次の例を見てください。

.parent {
  font-size: 16px;
  line-height: 1.5; /* 倍率 1.5 が子へ継承される */
}

.child {
  font-size: 32px;  /* 行の高さは 32px × 1.5 = 48px に再計算される */
}

親の font-size が 16px なので親の行の高さは 24px ですが、子は font-size が 32px なので、継承された倍率 1.5 を自分のサイズに掛け直して 48px になります。文字が大きい子要素にもちょうど良い行間が保たれる、という自然な結果です。

単位ありは「計算後の長さ」が継承される

一方、em・%・px のように単位を付けると、指定した要素の時点で計算された「長さ（px 値）」が固定され、その長さがそのまま子要素に継承されます。先ほどと同じ構成で line-height: 1.5em にすると次のようになります。

.parent {
  font-size: 16px;
  line-height: 1.5em; /* 16px × 1.5 = 24px が確定し、その24pxが子へ継承される */
}

.child {
  font-size: 32px;    /* 行の高さは24pxのまま。文字より行が低く重なってしまう */
}

この場合、親の時点で 1.5em が 24px に確定し、その 24px が子へ受け継がれます。子のフォントサイズは 32px なのに行の高さは 24px しかないため、行の高さが文字の高さを下回り、行どうしが重なって読みにくくなってしまいます。% でも同じことが起こります。

このように、見出しや大きな文字を含むページ全体に行間を指定する場合、単位なしの数値なら各要素が自分のフォントサイズに合わせて行間を再計算してくれるため、破綻が起きにくくなります。これが単位なしの数値が推奨される理由です。特別な事情がなければ line-height は単位なしで指定しましょう。

1行テキストを上下中央に置く

line-height には、行間を整えるほかにもうひとつ定番の使い方があります。要素の高さと同じ値の line-height を指定すると、その中の1行テキストを上下中央に配置できるというテクニックです。ボタンやバッジなど、高さの決まった要素の中で文字を縦中央にそろえたいときに便利です。

.button {
  height: 48px;
  line-height: 48px; /* 高さと同じ値にすると1行テキストが縦中央にそろう */
  text-align: center; /* 横方向も中央に */
}

行の高さが要素の高さいっぱいに広がり、その中で文字が縦方向の中央に配置されるため、結果として上下中央にそろって見えます。ただしこの方法が使えるのは、テキストが1行に収まる場合に限られます。2行以上になると行の高さが要素の高さを超えてはみ出してしまうため、複数行を中央寄せしたいときは Flexbox（display: flex と align-items: center）を使うほうが安全です。

line-height を指定しても行間が変わらないとき

子要素に別の line-height が指定されている

親要素に line-height を書いたのに一部のテキストだけ行間が変わらない場合、その要素やより内側の要素に別の line-height が直接指定されていないか確認してください。CSS では、より具体的に指定されたスタイルが優先されるため、内側の指定が親からの継承を上書きします。リセット CSS やフレームワークが見出しやボタンに line-height を設定していることも多いので、開発者ツールでどの指定が適用されているかを見ると原因をつかみやすくなります。

単位ありで指定して継承が固定されている

「親に行間を指定したのに、文字を大きくした子要素だけ行が詰まる」という場合は、前述の em や % による継承の固定が原因であることが多いです。親で line-height: 1.5em のように単位を付けていると、計算後の長さが子に引き継がれ、子のフォントサイズに合わなくなります。単位なしの数値（line-height: 1.5）に書き換えると、子要素が自分のサイズで再計算するようになり解決します。

まとめ

line-height は1行分の高さを決め、文章の行間と読みやすさを整えるプロパティです。要点を振り返ります。

• line-height は行と行のあいだの隙間ではなく「1行分の高さ」を指定する
• 単位なしの数値は倍率が継承され、子要素が自分のフォントサイズで再計算する（推奨）
• em・%・px は計算後の長さが継承され、文字サイズの違う子で行が詰まることがある
• 本文の行間は 1.5〜1.8 程度が読みやすさの目安
• 高さと同じ line-height で1行テキストを上下中央に置ける

まずは本文に単位なしの数値で line-height を指定するところから始めてみてください。それだけで文章の読みやすさがぐっと上がります。

参考ページ

• line-height – CSS: カスケーディングスタイルシート | MDN
• font-size – CSS: カスケーディングスタイルシート | MDN