【CSS】【line-height】行間を調整 – 文字の高さを指定する方法

2024年4月6日

Webサイトの文字の高さ、行間を調整するにはline-heightプロパティを使用します。

複雑なプロパティではないため、初心者の方もわかりやすいかと思います。

わからないといった方は本記事を読んでいただくことで、イメージをつかんでいただけると幸いです。

line-heightプロパティとは

上記の図のように、行の高さを調整するプロパティとなります。

フォントサイズ（px）に対して相対的に値を設定することが多く、主に数値（単位なし）や%を使用して指定します。

詳しくは以下をご覧ください。

line-heightプロパティの指定方法

数字での指定（単位なし）

<body>
  <p class="text">line-heightについて</p>
  <style>
    html {
    }

    .text {
      font-size: 16px;
      background-color: #eee;  /* 分かりやすいよう背景色を付ける */

      /* 数値のみで指定 */
      line-height: 1.5;
    }
</style>
</body>

グレーの背景色になっている部分がline-heightプロパティで指定している高さとなります。

1.5の指定はフォントサイズ（この場合は16px）に対する相対値となっており、16 * 1.5 = 24pxの高さが付与されております。

%での指定

<body>
  <p class="text">line-heightについて</p>
  <style>
    html {
    }

    .text {
      font-size: 16px;
      background-color: #eee;  /* 分かりやすいよう背景色を付ける */

      /* 数値のみで指定 */
      line-height: 150%;
    }
</style>
</body>

150%の指定は数値のみで指定した場合と同様にフォントサイズに対しての相対値となっております。

この場合、高さは24pxとなり、1.5と指定した場合と同様のレイアウトとなります。

line-heightプロパティの推奨値

制作するデザインにもよりますが、一般的に1.5～2.0（150%～200%）の間がよく使用されています。line-heightの単位をpxで設定することも可能ですが、レスポンシブ対応などでフォントサイズが変わった場合、line-heightの値も変更する必要がでてきます。

数値のみ、もしくは%での指定をするのがオススメです。

1.5～2.0よりも値が大きくなると、文章が読みづらくなるため、調整する際には注意しましょう。

デザインカンプからのline-heightプロパティの考え方

デザインカンプがPhotoshop、illustratorの場合はデザイン上、絶対値で設定されているため、デザインの行間を考慮して値を指定する必要があります。

Figmaについては%で指定することも可能ですが、pxで設定されている場合もあるため、コーディングを行う際にはあらかじめ確認しておきましょう。

行間以外での使い方

ボタンのレイアウトでline-heightプロパティを使用することもできます。

line-heightプロパティの特徴ですが、上下に均等に高さが生まれるため、自然と縦方向（垂直方向）に対して文字が真ん中になります。

この特徴を利用してボタンのレイアウトを作成します。

<body>
  <a href="#" class="btn">詳細はこちら</a>
  <style>
    .btn {
      background-color: #1925ae;
      color: #fff;
      display: inline-block;
      font-size: 14px;
      margin: 0 auto;
      padding-inline: 3em;

      /* line-heightで高さを指定 */
      line-height: 3;
    }
  </style>
</body>