記事内に商品プロモーションが含まれる場合があります
文章の行間は、デザイン性と読みやすさに大きな影響を与えます。Webサイトやブログを作るときには必ず指定しておくべきでしょう。
この記事では、初心者の方でも分かるように、CSSの行間の調整方法とおすすめの値をまとめます。
CSSで行間（行高）を指定する方法
{line-height: 値}
CSSではline-heightプロパティで行間を決めます。
line-heightではこの図のようにそれぞれの行の高さを指定します。line-height自体は行間ではなく、行高を指定するものなのです。
line-heightの値
値の指定には数パターンの方法があります。
取ることのできる値
- normal←初期値→ ブラウザが自動的に行高（行間）を決めてくれる
- 数値+px→ 決まったpx数を指定
- 数値+em→ 相対的な比率を決めておくと、フォントサイズに応じて行高が決まる
- 数値+%→ 相対的な比率を決めておくと、フォントサイズに応じて行高が決まる
- 単位なし（数値のみ）←オススメ！→ 相対的な比率を決めておくと、フォントサイズに応じて行高が決まる。line-height: 1.5のように値だけで書く。
pxでは「line-height: 24px」というように決まった値を指定します。em、%、単位なし指定は、文字の高さ（フォントサイズ）に応じて行高を調整してくれるものです。
px指定よりも相対指定がオススメ
pxで指定すると、フォントサイズが異なる文字に対して、いちいちline-heightを指定し直さなければなりません（でないと不自然な行高になってしまいます）。
一方で、em、%、単位なし指定であれば、フォントサイズを考慮した行高になるので、異なる文字サイズに対しても基本的に指定をし直す必要がありません。
そのためpxで指定するよりもスマートだと言えるでしょう。
単位なし指定が１番オススメ
emや%よりも「単位なし指定」がオススメです。なぜかというとemや%だと親要素で計算された行高が、子要素にそのまま引き継がれてしまうからです。つまり、親要素のフォントサイズが40px、子要素のフォントサイズが20pxの場合にも、子要素には親要素と同じ行間が適用されてしまうのです。 一方で単位なし指定の場合、子要素のフォントサイズに応じて行高を計算し直してくれます。【参考】CSSのline-heightで単位を指定しない理由
なんにせよ、line-heightは単位なし（数値のみ）で指定をするようにしておけば間違いありません。
行間の作られる仕組み
では単位なし指定の場合、どのように行間が決まるのでしょうか。
line-height:1の場合、行の高さ＝文字の高さとなります。上下に余白はできません。
たとえばフォントサイズが24pxでline-height:1の場合、行の高さは24pxになります。
line-height: 2の場合、この図のように文字の上下にスペースができます。2のうちの1は文字自体占めます。残りの1は、上下に0.5ずつ割り振られます。
たとえばフォントサイズが20pxでline-height:2の場合、行の高さは40pxです。このうち、上下には10pxずつのスペースができています。
つまりline-height: 2の場合、前後の行とは「1」の分だけの行間ができることになります。
おすすめのline-heightの値
読みやすさとデザイン性を考えると、line-heightは1.5〜2.0くらいがベストです。それより小さいと窮屈に見え、それより大きいとスカスカに見えてしまいます。実際にコードを書いて見てみましょう。
line-height:1.5の場合
<p>これは１行目です。<br>これは２行目です。</p>CSSコード
p {
line-height: 1.5;
}
これは１行目です。
これは２行目です。
ちょうど良いくらいですね。
line-height:1.7の場合
<p>これは１行目です。<br>これは２行目です。</p>CSSコード
p {
line-height: 1.7;
}
これは１行目です。
これは２行目です。
↑少し余裕があります。個人的にはこのくらいが好きです。
line-height:2.0の場合
<p>これは１行目です。<br>これは２行目です。</p>CSSコード
p {
line-height: 2.0;
}
これは１行目です。
これは２行目です。
↑少し広すぎる気はしますが、このあたりは好みですね。1.5〜2.0くらいの間で自分のWebサイトやブログにマッチする行間を見つけると良いでしょう。
行高をpタグに対して指定する
行間は文章に対して指定したい場合が多いと思います。というわけで段落を表すpタグに対して最低限line-heightを指定しておくべきですね。
p {
line-height: 1.7;
}
このコードをCSSに書けば、ウェブサイトの段落全てに1.7の行高が適用されます。
実際にWebサイトやブログで指定するときには、いくつかの値を入れてみて、どれがベストか吟味すると良いでしょう。
