HTMLの行間隔を詰めたり開けたりする方法を解説

公開：2024年9月3日更新：2025年10月27日

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

HTMLで行間を調整する基本的な方法
line-heightプロパティの書き方
行間が変わる仕組み
line-heightで行間を詰める・開ける方法
数値のみで指定する
pxで指定する
%で指定する
適切な行間の値とタグごとの推奨設定
適切な行間の値の目安
pタグでの推奨値
見出しタグでの推奨値

HTMLで行間を調整する基本的な方法

Webページを作成していると、テキストの行間が狭くて読みにくいと感じることはないでしょうか。HTMLで行間を調整することによって、文章の読みやすさを大きく改善できます。

基礎を理解することによって、適切な行間を設定ができるようになる為、まずは書き方や仕組みを簡単に解説していきます。

line-heightプロパティの書き方

line-heightプロパティは、CSSで行間を調整するためのプロパティです。プロパティとは、HTML要素のスタイルを定義するための設定項目のことで、このプロパティを使うことによって行間を自由に調整できます。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      line-height: 1.75;
    }
  </style>
</head>
<body>
  <p>
    この文章は行間を1.75に設定しています。<br>
    複数行になったとき行間が適切に開きます。<br>
    読みやすい文章になります。
  </p>
</body>
</html>

上記のコードでは、styleタグ内でpセレクタに対してline-heightプロパティを指定しています。この方法により、pタグ内のテキストの行間が調整されます。

行間が変わる仕組み

line-heightで指定した数値は、文字サイズを基準に行の高さを決定します。例えば、文字サイズが16pxでline-heightを2と指定した場合、行の高さは32pxになります。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font-size: 16px;
      line-height: 2;
      border: 1px solid #999;
    }
  </style>
</head>
<body>
  <p>
    文字サイズは16pxです。<br>
    line-heightを2に指定しています。<br>
    行の高さは32pxになります。
  </p>
</body>
</html>

上記のコードでは、16pxの文字サイズに対してline-heightを2と指定しているため、行の高さは16px × 2 = 32pxとなります。この計算により、文字の上下にそれぞれ8pxずつの余白が作られることになります。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

line-heightで行間を詰める・開ける方法

line-heightプロパティでは、さまざまな方法で値を指定できます。指定方法によって行間の計算方法や柔軟性が変わるため、用途に応じた使い分けが求められるでしょう。

行間を詰める・開ける方法として、以下3つがあります。

数値のみで指定する
pxで指定する
%で指定する

それぞれ異なる特徴があり、状況に応じて使い分けることが大切です。以下では、各方法について詳しく解説していきます。

数値のみで指定する

line-heightに数値のみを指定する方法は、最も推奨される記述方法です。数値のみで指定すると、その要素の文字サイズに対する倍率として行間が計算されます。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <p>
    数値のみで指定した場合、<br>
    文字サイズの1.5倍の行の高さになります。<br>
    16px × 1.5 = 24pxの行の高さです。
  </p>
</body>
</html>

上記のコードでは、line-heightを1.5と指定しているため、16pxの文字サイズに対して24pxの行の高さが確保されます。数値のみの指定では、子要素が異なる文字サイズを持つ場合でも適切な行間が維持されます。

pxで指定する

line-heightにpxを使って指定する方法では、文字サイズに関係なく行の高さを固定できます。ただし、文字サイズが変更された場合、行間が適切ではなくなる可能性があるため、注意しましょう。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font-size: 16px;
      line-height: 30px;
    }
  </style>
</head>
<body>
  <p>
    pxで指定した場合、<br>
    文字サイズに関係なく30pxの行の高さになります。<br>
    文字の上下にそれぞれ7pxずつの余白が作られます。
  </p>
</body>
</html>

上記のコードでは、line-heightを30pxと指定しているため、文字サイズが16pxの場合は上下に7pxずつの余白が作られます。しかし、文字サイズが20pxに変更された場合、上下に5pxずつしか余白が取れなくなり、行間が狭く見えてしまいます。

%で指定する

line-heightに%を使って指定する方法では、文字サイズに対する割合で行の高さを指定できます。数値のみの指定と似ていますが、計算結果が固定値として子要素に継承される点が異なります。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font-size: 16px;
      line-height: 150%;
    }
  </style>
</head>
<body>
  <p>
    %で指定した場合、<br>
    文字サイズの150%の行の高さになります。<br>
    16px × 150% = 24pxの行の高さです。
  </p>
</body>
</html>

上記のコードでは、line-heightを150%と指定しているため、16pxの文字サイズに対して24pxの行の高さが確保されます。%での指定は計算結果が固定値として扱われるため、子要素で文字サイズが変更された場合に適切な行間にならない可能性があります。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

適切な行間の値とタグごとの推奨設定

line-heightの値をどれくらいに設定すれば良いか、迷うことがあると思います。適切な行間の値は、要素の種類や用途によって異なります。

適切な行間を設定するためのポイントとして、以下3つがあります。

適切な行間の値の目安
pタグでの推奨値
見出しタグでの推奨値

それぞれの要素に適した値を設定することによって、読みやすく美しいWebページを作成できます。以下では、各要素における推奨値について詳しく解説していきます。

適切な行間の値の目安

line-heightの適切な値は、一般的に1.5から2の範囲が読みやすいとされています。値が小さすぎると文字が詰まって見えにくくなり、大きすぎると文章のまとまりが失われてしまいます。

<!DOCTYPE html>
<html>
<head>
  <style>
    p.tight {
      line-height: 1.25;
    }
    p.normal {
      line-height: 1.5;
    }
    p.loose {
      line-height: 1.75;
    }
    p.very-loose {
      line-height: 2;
    }
  </style>
</head>
<body>
  <p class="tight">line-height: 1.25の文章です。行間が狭めで、短い文章に適しています。</p>
  <p class="normal">line-height: 1.5の文章です。標準的な行間で、多くの場面で使用できます。</p>
  <p class="loose">line-height: 1.75の文章です。読みやすい行間で、長文に適しています。</p>
  <p class="very-loose">line-height: 2の文章です。ゆったりとした行間で、特に読みやすさを重視する場合に適しています。</p>
</body>
</html>

上記のコードでは、1.25から2までの4段階の行間を設定しています。1.5から1.75の範囲が最も読みやすく、多くのWebサイトで採用されている値になります。

pタグでの推奨値

pタグは文章を表示するために使用される要素であり、読みやすさが重要になります。pタグでは1.75の値が推奨され、この値によって文章が読みやすくなります。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      line-height: 1.75;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>
    pタグには1.75の行間を設定しています。<br>
    長文でも読みやすい行間になります。<br>
    ブログ記事や説明文など、読ませる文章に適しています。
  </p>
</body>
</html>

上記のコードでは、pタグにline-height: 1.75を指定しています。この値により、文字の上下に適度な余白が確保され、長文でも目が疲れにくくなります。

見出しタグでの推奨値

見出しタグ（h1からh6）は、通常2行から3行程度の短い文章になるため、pタグよりも狭い行間が適しています。見出しタグでは1.25から1.5の値が推奨されます。

<!DOCTYPE html>
<html>
<head>
  <style>
    h2 {
      line-height: 1.25;
      font-size: 24px;
    }
    h3 {
      line-height: 1.25;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h2>見出しには1.25の行間を設定しています</h2>
  <h3>行間を狭くすることで一塊感が出ます</h3>
</body>
</html>

上記のコードでは、h2タグとh3タグにline-height: 1.25を指定しています。見出しでは行間を狭めに設定することによって、見出し全体が一つのまとまりとして認識されやすくなります。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。