【CSS】line-heightで行の高さを指定するには？実際の使い方を詳しく解説

CSSプロパティのline-heightを使うと、テキストの行の高さを指定することができます。

今回は、CSSプロパティのline-heightの使い方を学びたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSプロパティのline-heightの使って行の高さを設定する方法がわかるようになります。

line-heightとは？

line-heightは、行の高さを指定するプロパティです。

文字の上下に空白を作り、文章を読みやすくする効果があります。

line-heightには、マイナスの値は指定はできません。

line-height:1のときに、行の高さと文字の高さ（フォントサイズ）が同じになり、2のときには行の高さは2倍になります。

文字の上下に均等に空白が作られるため、2の場合には、上下に0.5だけの文字の高さの空白ができます。

具体的には以下のように記述します。

<p>line-heighを使うと行の高さを指定することができます。</p>
<p>文章の上下に均等に空白ができます。</p>

p {
  line-height: 1.6;
}

上記コードでは、文章の上下にフォントサイズを0.3倍した高さの空白が生まれます。

2行の間には、足し合わせた0.6倍の空白ができます。

line-heightは、単位なしの数値の他に、pxやem、%などの単位の指定ができます。

次項で解説しますが、それぞれ計算方法が異なるので使用には注意が必要です。

line-heightを使う際に気をつけること

基本的な特徴と使い方がわかっていただけたでしょうか。

ここでは、実際に使う際の注意点を解説していきます。

どの値を使うべき？

値の指定方法はいくつかあります。どの方法を使用するのが良いのでしょうか。

まず、line-height:20pxのようにpxで指定する方法を考えてみます。

この方法の場合、フォントサイズに合わせて、いちいち別のline-heightを指定する必要があり面倒です。

単位なしやem、%は、フォントサイズに対する相対的なサイズで計算してくれるため、フォントサイズを考慮してバラバラの数値を入れなくて済むようになります。

その中でも単位なしの方法を利用することをおすすめします。

理由は、具体的に次のようなHTMLコードを使って解説します。

<div class="parent">
  <p>親要素です。親要素のフォントサイズは25pxで、ここにline-heightを指定します</p>
  <div class="child">
    <p>子要素です。子要素のフォントサイズは20pxです</p>
    <div class="grandchild">
      <p>孫要素です。孫要素のフォントサイズは15pxです</p>
    </div>
  </div>
</div>

これに対して、%を使った場合のCSSを記述します。

.parent{
  font-size: 25px;
  line-height: 200%;
}
 .child{
  font-size: 20px;
}
 .grandchild{
  font-size: 15px;
}

親要素の行の高さは、25pxの200%であるため、50pxとなります。

ただし、子要素・孫要素は、フォントサイズが異なっていても親要素から値が継承され、行の高さが50pxになります。

子要素・孫要素でも「line-height:200%」と指定すれば、それぞれのフォントサイズで再計算されますが、pxの時と同じように設定が面倒になってしまいます。

emでも同様に親要素から値が継承されます。

今度は単位なしで指定してみましょう。

.parent{
  font-size: 25px;
  line-height: 2;
}
 .child{
  font-size: 20px;
}
 .grandchild{
  font-size: 15px;
}

こちらを試してみると、子要素・孫要素にline-heightを指定していないにも関わらず、行の高さがフォントサイズの2倍の大きさになります。

このようにコードが短く管理しやすくなるため、単位なしで指定することをおすすめします。

p要素に対して指定していれば、フォントサイズが異なる場合に、その要素に指定されたフォントサイズで計算してくれるので、作業がぐっと楽になります。

line-heightの値の大きさについて

line-heightの値は、基本的に1.5～2.0程度が丁度いい大きさです。

1.5より小さくしてしまうと、読みにくくデザイン性も損なわれてしまいます。

大きくした場合にも文章が複数行にわたる際に、空間が空いて読みづらくなります。

デザインとして間を開けたいのであれば、要素を分けてmarginなどの余白のプロパティを使用した方が良いでしょう。

まとめ：値は単位なしがおすすめ

今回は、CSSプロパティのline-heightの使い方について解説してきました。

単位によって計算方法が異なるので注意が必要ということでしたね。

値の指定方法のおすすめについても紹介しました。

今回の記事が参考になれば幸いです。