【CSS】line-heightで行間を調整する方法：おすすめの値は？

文章の行間は、デザイン性と読みやすさに大きな影響を与えます。Webサイトやブログでは、使う文字や幅に合った行高を確認するとよいでしょう。

CSSで行間（行高）を指定する方法

{line-height: 値}

CSSではline-heightプロパティで行高を指定し、行間を調整します。

line-heightではこの図のようにそれぞれの行の高さを指定します。line-height自体は行間ではなく、行高を指定するものなのです。

line-heightの値

値の指定には数パターンの方法があります。

pxでは「line-height: 24px」というように決まった値を指定します。emと%は指定した要素のフォントサイズを基に長さへ計算されます。単位なしは倍率のまま継承され、各要素のフォントサイズから行高を求めます。フォントサイズは、見えている字形そのものの高さとは限りません。

文字サイズが変わる文章には単位なし指定が便利

px指定は固定の行高です。図のように文字サイズだけを大きくすると、文字が重なることがあります。文字サイズを変える場合は行高も適切か確認します。

この図は単位なしの1.5を指定した例です。各要素のフォントサイズの1.5倍になるため、文字サイズの変化に合わせやすくなります。emや%は長さへ計算された後に継承されるので、子要素の文字サイズが違う場合は同じ結果にはなりません。

文字サイズが変わる本文では、単位なし指定を出発点にすると調整しやすいでしょう。

単位なし指定と継承の違い

emや%よりも「単位なし指定」がオススメです。なぜかというとemや%だと親要素で計算された行高が、子要素にそのまま引き継がれてしまうからです。つまり、親要素のフォントサイズが40px、子要素のフォントサイズが20pxの場合にも、親で計算した行高が子要素に継承されます。たとえば親に1.5emまたは150%を指定すると60pxになり、子のフォントサイズが20pxでも行高は60pxです。 一方、親に単位なしの1.5を指定すると、子は倍率1.5を継承します。子のフォントサイズが20pxなら行高は30pxです。【参考】CSSのline-heightで単位を指定しない理由

行間の作られる仕組み

では単位なし指定の場合、どのように行間が決まるのでしょうか。

図の「文字の上下に余白はできない」は厳密には正しくありません。line-height:1はフォントサイズと同じ値の行高を指定しますが、実際の字形の高さや見える余白はフォントによって異なります。図は模式図です。

たとえばfont-size:24px、line-height:1なら指定する行高は24pxです。ただし同じ行に大きな文字や画像などが混在すると、実際の行ボックスはそれより高くなる場合があります。

line-height:2はフォントサイズの2倍を指定します。図の「1」と「0.5」は仕組みを単純化した模式図です。行高とフォントのメトリクスから求めた高さとの差が上下に半分ずつ配分されますが、見える字形の上下に必ず0.5emずつ空くという意味ではありません。

たとえばfont-size:20px、line-height:2なら指定する行高は40pxです。見える字形から測った上下の空きが、それぞれ10pxになるとは限りません。

この図の行間「1」も模式的な表現です。実際に見える行間はフォントや文字、同じ行の要素によって変わります。

おすすめのline-heightの値

読みやすさとデザイン性を考えると、line-heightは1.5〜2.0くらいを本文の出発点にできます。ただし最適な値はフォント、文字サイズ、行の長さ、用途によって異なります。実際にコードを書いて見てみましょう。

line-height:1.5の場合

<p>これは１行目です。<br>これは２行目です。</p>

p {
  line-height: 1.5;
}

ちょうど良いくらいですね。

line-height:1.7の場合

<p>これは１行目です。<br>これは２行目です。</p>

p {
  line-height: 1.7;
}

↑少し余裕があります。個人的にはこのくらいが好きです。

line-height:2.0の場合

<p>これは１行目です。<br>これは２行目です。</p>

p {
  line-height: 2.0;
}

↑少し広すぎる気はしますが、このあたりは好みですね。1.5〜2.0に限定せず、自分のWebサイトやブログに合う行高を確認しましょう。

行高をpタグに対して指定する

行間は文章に対して指定したい場合が多いと思います。段落を表すpタグへ指定する方法のほか、bodyなどに単位なしの値を指定して継承させる方法もあります。

p {
  line-height: 1.7;
}

実際にWebサイトやブログで指定するときには、いくつかの値を入れてみて、どれがベストか吟味すると良いでしょう。