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

公開日: 2022.02.17
更新日: 2024.01.03
line-heightで行の高さを指定するには

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

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

  • line-heightとは
  • line-heightの計算方法について
  • 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、%などの単位の指定ができます。

  • normal(初期値):ブラウザが自動的に指定
  • 数値+px:フォントサイズに関わらず、単位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の使い方について解説してきました。

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

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

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5