MENU
  1. ホーム
  2. CSS
  3. 【CSS】行間を調整：line-heightの使い方と詰める・広げる方法

【CSS】行間を調整：line-heightの使い方と詰める・広げる方法

CSS
css-line-height

Webサイトの文章の読みやすさは、「行間（line-height）」と「余白（margin）」のコントロールによって決まります。

本記事では、単位指定の基本ルール、タグ別（段落・見出し・リスト等）の最適化、効かない時の解決策を解説します。

また、CSSに関するカテゴリーページから学びたい内容を決めたい人は、以下のCSSページをご確認ください。

CSS | Code Stock
目次

line-heightの使い方：行間調整

Webサイトの文章の読みやすさ（可読性）を決定づける要素が「行間・行間隔）」です。

文字がぎっしり詰まったページは読者にストレスを与え、離脱の原因になります。

行間の余白をコントロールするには、CSSの基本プロパティであるline-heightの理解が欠かせません。

ここでは、CSSにおける行間指定のルール、CSSにおける行間調整を解説します。

line-heightの使い方：行間調整
  • line-heightの指定方法
  • 行間と文字間の違い

line-heightの指定方法

「文字の行間」や「テキスト行間」を設定する際、実務においてルールが存在します。

line-heightの値には「px」や「em」などの単位をつけず、数値のみ（単位なし）で指定するというルールです。（例：line-height: 1.6;）

よくやる失敗がline-height: 24px;のようにピクセル（固定値）で指定してしまうことです。

固定値にしてしまうと、スマホ表示などで文字サイズ（font-size）が大きくなった際に行間が広がらなくなり、上の行と下の行の文字が重なって読めなくなるというバグを引き起こします。

また、%やemを使うと、親要素で計算された固定値が子要素に引き継がれるため、文字の重なりが発生するリスクがあります。

「単位なし」の指定を推奨しています。

単位なし（例：1.5）で指定すると、「font-sizeに対して1.5倍の行間にする」という柔軟な計算がリアルタイムで行われるため、文字サイズが変わってもレイアウトが崩れません。

実務では1.5〜1.8前後が読みやすいとされています。

📐 line-heightの正しい指定（単位なし vs px指定）

※どちらも親要素で大きな文字サイズ（24px）に変更されたと仮定したシミュレーションです。

❌ 失敗：px指定（文字が重なる）

行間を「24px」で固定してしまったため、
文字サイズが大きくなった途端に
上下の文字が重なって読めなくなります。

⭕️ 正解：単位なし指定（綺麗に広がる）

行間を「1.6」と単位なしで指定しているので、
文字サイズがどれだけ大きくなっても
自動で美しい行間が保たれます。

/* ❌ pxなどの固定値で指定する */
.text-wrong {
  font-size: 24px;
  line-height: 24px; /* 行間が広がらず文字が衝突する */
}

/* ⭕️ 単位なし（実数）で指定する */
.text-correct {
  font-size: 24px;
  line-height: 1.6; /* フォントサイズの1.6倍に自動計算される */
}
HTMLコード表示
<div class="lh-sec1-wrapper">
  <div class="lh-sec1-demo-area">
    <div class="lh-sec1-box">
      <div class="lh-sec1-label">📐 line-heightの正しい指定（単位なし vs px指定）</div>
      
      <div class="lh-sec1-visual">
        <p style="font-size:12px; color:#555; margin-bottom:15px;">
          ※どちらも親要素で大きな文字サイズ（24px）に変更されたと仮定したシミュレーションです。
        </p>

        <div class="lh-sec1-item">
          <p class="lh-sec1-title" style="color:#dc3545;">❌ 失敗：px指定（文字が重なる）</p>
          <p class="lh-sec1-text lh-sec1-wrong">
            行間を「24px」で固定してしまったため、<br>
            文字サイズが大きくなった途端に<br>
            上下の文字が重なって読めなくなります。
          </p>
        </div>

        <div class="lh-sec1-item">
          <p class="lh-sec1-title" style="color:#198754;">⭕️ 正解：単位なし指定（綺麗に広がる）</p>
          <p class="lh-sec1-text lh-sec1-correct">
            行間を「1.6」と単位なしで指定しているので、<br>
            文字サイズがどれだけ大きくなっても<br>
            自動で美しい行間が保たれます。
          </p>
        </div>
      </div>

      <div class="lh-sec1-code">
        /* ❌ pxなどの固定値で指定する */<br>
        <span class="lh-hl-blue">.text-wrong</span> {<br>
          <span class="lh-hl-green">font-size: 24px;</span><br>
          <span class="lh-hl-red">line-height: 24px;</span> /* 行間が広がらず文字が衝突する */<br>
        }<br><br>

        /* ⭕️ 単位なし（実数）で指定する */<br>
        <span class="lh-hl-blue">.text-correct</span> {<br>
          <span class="lh-hl-green">font-size: 24px;</span><br>
          <span class="lh-hl-green">line-height: 1.6;</span> /* フォントサイズの1.6倍に自動計算される */<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.lh-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.lh-sec1-demo-area {
  display: flex;
  justify-content: center;
}

.lh-sec1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}

.lh-sec1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.lh-sec1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.lh-sec1-item {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  margin-bottom: 20px;
}

.lh-sec1-item:last-child {
  margin-bottom: 0;
}

.lh-sec1-title {
  font-size: 13px;
  font-weight: bold;
  margin: 0 0 10px 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.lh-sec1-text {
  font-weight: bold;
  margin: 0;
  background-color: #e9ecef;
  /* デモ用に大きめの文字サイズを指定 */
  font-size: 24px;
}

/* ❌ px指定の失敗例 */
.lh-sec1-wrong {
  line-height: 24px;
}

/* ⭕️ 単位なしの成功例 */
.lh-sec1-correct {
  line-height: 1.6;
}

.lh-sec1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.lh-hl-green {
  color: #98c379;
  font-weight: bold;
}

.lh-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.lh-hl-red {
  color: #e06c75;
  font-weight: bold;
}

行間と文字間の違い

「cssにおける行間と文字間」の区別が曖昧になりがちです。

  • line-height（行間）： 文章の「縦（上下）」の隙間を調整するプロパティ。
  • letter-spacing（文字間）： 文字と文字の「横（左右）」の隙間を調整するプロパティ。

letter-spacingを広げすぎると文字がバラバラに見えてしまい可読性が低下します。

日本語の文章の場合、letter-spacingは0.05em〜0.1em程度のわずかな値に留めるのがコツです。

↔️↕️ 行間（line-height）と 文字間（letter-spacing）

① 標準のテキスト

見やすいWebサイトを作るためには、
適切な余白のコントロールが必要です。

② 行間（line-height）を広げた場合 ↕️

見やすいWebサイトを作るためには、
適切な余白のコントロールが必要です。

③ 文字間（letter-spacing）を広げた場合 ↔️

見やすいWebサイトを作るためには、
適切な余白のコントロールが必要です。

/* ↕️ 上下の隙間を調整する（単位なし） */
.text-line-height {
  line-height: 2.5;
}

/* ↔️ 左右の隙間を調整する（emなどの単位が必要） */
.text-letter-spacing {
  letter-spacing: 0.5em;
  line-height: 1.6; /* ベースの行間は保つ */
}
HTMLコード表示
<div class="lh-sec2-wrapper">
  <div class="lh-sec2-demo-area">
    <div class="lh-sec2-box">
      <div class="lh-sec2-label">↔️↕️ 行間（line-height）と 文字間（letter-spacing）</div>
      
      <div class="lh-sec2-visual">
        
        <div class="lh-sec2-item">
          <p class="lh-sec2-title">① 標準のテキスト</p>
          <p class="lh-sec2-text lh-sec2-normal">
            見やすいWebサイトを作るためには、<br>
            適切な余白のコントロールが必要です。
          </p>
        </div>

        <div class="lh-sec2-item">
          <p class="lh-sec2-title" style="color:#0d6efd;">② 行間（line-height）を広げた場合 ↕️</p>
          <p class="lh-sec2-text lh-sec2-line-height">
            見やすいWebサイトを作るためには、<br>
            適切な余白のコントロールが必要です。
          </p>
        </div>

        <div class="lh-sec2-item">
          <p class="lh-sec2-title" style="color:#198754;">③ 文字間（letter-spacing）を広げた場合 ↔️</p>
          <p class="lh-sec2-text lh-sec2-letter-spacing">
            見やすいWebサイトを作るためには、<br>
            適切な余白のコントロールが必要です。
          </p>
        </div>

      </div>

      <div class="lh-sec1-code">
        /* ↕️ 上下の隙間を調整する（単位なし） */<br>
        <span class="lh-hl-blue">.text-line-height</span> {<br>
          <span class="lh-hl-green">line-height: 2.5;</span><br>
        }<br><br>

        /* ↔️ 左右の隙間を調整する（emなどの単位が必要） */<br>
        <span class="lh-hl-blue">.text-letter-spacing</span> {<br>
          <span class="lh-hl-green">letter-spacing: 0.5em;</span><br>
          <span class="lh-hl-green">line-height: 1.6;</span> /* ベースの行間は保つ */<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.lh-sec2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.lh-sec2-demo-area {
  display: flex;
  justify-content: center;
}

.lh-sec2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}

.lh-sec2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.lh-sec2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.lh-sec2-item {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  margin-bottom: 20px;
}

.lh-sec2-item:last-child {
  margin-bottom: 0;
}

.lh-sec2-title {
  font-size: 13px;
  font-weight: bold;
  margin: 0 0 10px 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.lh-sec2-text {
  margin: 0;
  font-size: 14px;
  background-color: #e9ecef;
}

/* ① 標準（リセット） */
.lh-sec2-normal {
  line-height: 1.2;
  letter-spacing: normal;
}

/* ② 行間を広げた場合 */
.lh-sec2-line-height {
  line-height: 2.5; /* 上下が開く */
}

/* ③ 文字間を広げた場合 */
.lh-sec2-letter-spacing {
  line-height: 1.2;
  letter-spacing: 0.5em; /* 左右が開く */
}

行間を広げる・空ける＆狭める・詰める方法

Webデザインにおいて、すべてのテキストに同じ行間を設定するのは間違いです。

本文のようにじっくり読ませる文章は行間を広げる設定が必要であり、逆にパッと見でひとつの塊として認識させたい見出し（タイトル）などは行間を狭める設定が必要です。

ここでは、実務で使い分ける「行間を広げる・狭める」テクニックとレイアウト崩れの原因を解説します。

行間を広げる・空ける＆狭める・詰める方法
  • 文章を読みやすく行間を広げる設定
  • タイトルや改行の行間を狭くする

文章を読みやすく行間を広げる設定

ブログ記事や会社の案内文など、長文のテキストエリアでは、デフォルトの行間（大体1.2程度）では文字が詰まりすぎてしまいます。

「行間を空ける」ことで文章に余白が生まれ、ユーザーの離脱率を下げられます。

日本語のWebサイトにおいて、本文の読みやすい行間（line-height）は1.5から1.8の間がよいです。

SWELLなどの優れたWordPressテーマも、本文の行間はこの数値の間に設定されています。

📖 本文の行間（line-height）比較

❌ 1.2（狭すぎて息苦しい）

Webサイトの文章を読みやすくするためには、適切な行間の設定が不可欠です。行間が狭すぎると、文字の黒い面積が多くなりすぎてしまい、ユーザーに「読むのが面倒だ」という心理的ストレスを与えてしまいます。

⭕️ 1.7（黄金比・読みやすい）

Webサイトの文章を読みやすくするためには、適切な行間の設定が不可欠です。行間が狭すぎると、文字の黒い面積が多くなりすぎてしまい、ユーザーに「読むのが面倒だ」という心理的ストレスを与えてしまいます。

❌ 2.5（広すぎて内容が入ってこない）

Webサイトの文章を読みやすくするためには、適切な行間の設定が不可欠です。行間が狭すぎると、文字の黒い面積が多くなりすぎてしまい、ユーザーに「読むのが面倒だ」という心理的ストレスを与えてしまいます。

/* ❌ 狭すぎる */
.text-narrow {
  line-height: 1.2;
}

/* ⭕️ プロのスタンダード（黄金比） */
.text-ideal {
  line-height: 1.7;
}

/* ❌ 広すぎる（箇条書きに見える） */
.text-wide {
  line-height: 2.5;
}
HTMLコード表示
<div class="lh-sec3-wrapper">
  <div class="lh-sec3-demo-area">
    <div class="lh-sec3-box">
      <div class="lh-sec3-label">📖 本文の行間（line-height）比較</div>
      
      <div class="lh-sec3-visual">
        <div class="lh-sec3-item">
          <p class="lh-sec3-title" style="color:#dc3545;">❌ 1.2（狭すぎて息苦しい）</p>
          <p class="lh-sec3-text lh-sec3-narrow">
            Webサイトの文章を読みやすくするためには、適切な行間の設定が不可欠です。行間が狭すぎると、文字の黒い面積が多くなりすぎてしまい、ユーザーに「読むのが面倒だ」という心理的ストレスを与えてしまいます。
          </p>
        </div>

        <div class="lh-sec3-item">
          <p class="lh-sec3-title" style="color:#198754;">⭕️ 1.7（黄金比・読みやすい）</p>
          <p class="lh-sec3-text lh-sec3-ideal">
            Webサイトの文章を読みやすくするためには、適切な行間の設定が不可欠です。行間が狭すぎると、文字の黒い面積が多くなりすぎてしまい、ユーザーに「読むのが面倒だ」という心理的ストレスを与えてしまいます。
          </p>
        </div>

        <div class="lh-sec3-item">
          <p class="lh-sec3-title" style="color:#dc3545;">❌ 2.5（広すぎて内容が入ってこない）</p>
          <p class="lh-sec3-text lh-sec3-wide">
            Webサイトの文章を読みやすくするためには、適切な行間の設定が不可欠です。行間が狭すぎると、文字の黒い面積が多くなりすぎてしまい、ユーザーに「読むのが面倒だ」という心理的ストレスを与えてしまいます。
          </p>
        </div>
      </div>

      <div class="lh-sec3-code">
        /* ❌ 狭すぎる */<br>
        <span class="lh-hl-blue">.text-narrow</span> {<br>
          <span class="lh-hl-green">line-height: 1.2;</span><br>
        }<br><br>

        /* ⭕️ スタンダード */<br>
        <span class="lh-hl-blue">.text-ideal</span> {<br>
          <span class="lh-hl-green">line-height: 1.7;</span><br>
        }<br><br>

        /* ❌ 広すぎる */<br>
        <span class="lh-hl-blue">.text-wide</span> {<br>
          <span class="lh-hl-green">line-height: 2.5;</span><br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.lh-sec3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.lh-sec3-demo-area {
  display: flex;
  justify-content: center;
}

.lh-sec3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}

.lh-sec3-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.lh-sec3-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.lh-sec3-item {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  margin-bottom: 20px;
}

.lh-sec3-item:last-child {
  margin-bottom: 0;
}

.lh-sec3-title {
  font-size: 13px;
  font-weight: bold;
  margin: 0 0 10px 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.lh-sec3-text {
  margin: 0;
  font-size: 14px;
  color: #333;
  background-color: #e9ecef;
}

/* 行間の比較用クラス */
.lh-sec3-narrow {
  line-height: 1.2;
}

.lh-sec3-ideal {
  line-height: 1.7;
}

.lh-sec3-wide {
  line-height: 2.5;
}

.lh-sec3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.lh-hl-green {
  color: #98c379;
  font-weight: bold;
}

.lh-hl-blue {
  color: #61afef;
  font-weight: bold;
}

タイトルや改行の行間を狭くする

本文では1.7などの広い行間が最適ですが、大きな文字で表示される「見出し」、意図的に<br>タグで折り返したキャッチコピーなどは別です。

これらはひとつのブロックとしてユーザーに認識させたいため、行間を狭くする・間隔を詰める処理が必要になります。

見出しタグ（h1〜h6）や、キャッチコピーを囲む箱に対して個別にline-height: 1.2;〜1.4;程度を上書き指定して行間をリセットしてください。

※<br>の行間を詰めたい場合は、<br>を包んでいる親要素（<p>や<h1>）に対してline-heightを指定するのがよいです。

🗜 見出し・改行の行間（line-height）を詰める

※大枠（body）に `line-height: 1.8;` が設定されている環境をシミュレートしています。

❌ 失敗：本文の広い行間（1.8）を引き継いでしまった見出し

【重要なお知らせ】
年末年始の営業日と
休業期間について

行間が開きすぎて、3つの別の文章のように見えてしまいます。

⭕️ 正解：行間を「1.3」に上書きして詰めた見出し

【重要なお知らせ】
年末年始の営業日と
休業期間について

ひとつの塊として視覚的にまとまり、タイトルとして認識しやすくなりました。

/* ⚠️ ベースのCSS（本文用） */
body {
  line-height: 1.8;
}

/* ❌ 初心者のミス：見出しの行間をそのままにしてしまう */
h2.wrong {
  font-size: 24px;
  /* 1.8が引き継がれ、巨大な隙間ができる */
}

/* ⭕️ プロの鉄則：見出しや改行(br)を多用する部分は詰める */
h2.correct {
  font-size: 24px;
  line-height: 1.3; /* 💡 本文より狭い数値を上書き指定する！ */
}
HTMLコード表示
<div class="lh-sec4-wrapper">
  <div class="lh-sec4-demo-area">
    <div class="lh-sec4-box">
      <div class="lh-sec4-label">🗜 見出し・改行の行間（line-height）を詰める</div>
      
      <div class="lh-sec4-visual">
        <p style="font-size:12px; color:#555; margin-bottom:15px; line-height:1.5;">
          ※大枠（body）に `line-height: 1.8;` が設定されている環境をシミュレートしています。
        </p>

        <div class="lh-sec4-item">
          <p class="lh-sec3-title" style="color:#dc3545;">❌ 失敗：本文の広い行間（1.8）を引き継いでしまった見出し</p>
          <div class="lh-sec4-bg">
            <div class="lh-sec4-heading lh-sec4-inherit">
              【重要なお知らせ】<br>
              年末年始の営業日と<br>
              休業期間について
            </div>
          </div>
          <p style="font-size:11px; color:#666; margin-top:5px;">行間が開きすぎて、3つの別の文章のように見えてしまいます。</p>
        </div>

        <div class="lh-sec4-item">
          <p class="lh-sec3-title" style="color:#198754;">⭕️ 正解：行間を「1.3」に上書きして詰めた見出し</p>
          <div class="lh-sec4-bg">
            <div class="lh-sec4-heading lh-sec4-compressed">
              【重要なお知らせ】<br>
              年末年始の営業日と<br>
              休業期間について
            </div>
          </div>
          <p style="font-size:11px; color:#666; margin-top:5px;">ひとつの塊として視覚的にまとまり、タイトルとして認識しやすくなりました。</p>
        </div>
      </div>

      <div class="lh-sec3-code">
        /* ⚠️ ベースのCSS（本文用） */<br>
        <span class="lh-hl-blue">body</span> {<br>
          <span class="lh-hl-green">line-height: 1.8;</span><br>
        }<br><br>

        /* ❌ 初心者のミス：見出しの行間をそのままにしてしまう */<br>
        <span class="lh-hl-blue">h2.wrong</span> {<br>
          <span class="lh-hl-green">font-size: 24px;</span><br>
          <span class="lh-hl-comment">/* 1.8が引き継がれ、巨大な隙間ができる */</span><br>
        }<br><br>

        /* ⭕️ プロの鉄則：見出しや改行(br)を多用する部分は詰める */<br>
        <span class="lh-hl-blue">h2.correct</span> {<br>
          <span class="lh-hl-green">font-size: 24px;</span><br>
          <span class="lh-hl-red">line-height: 1.3;</span> /* 💡 本文より狭い数値を上書き指定する！ */<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.lh-sec4-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.lh-sec4-demo-area {
  display: flex;
  justify-content: center;
}

.lh-sec4-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}

.lh-sec4-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.lh-sec4-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.lh-sec4-item {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  margin-bottom: 20px;
}

.lh-sec4-item:last-child {
  margin-bottom: 0;
}

.lh-sec4-bg {
  background-color: #e9ecef;
  padding: 10px;
  border-left: 4px solid #adb5bd;
}

.lh-sec4-heading {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

/* ❌ 本文の行間（1.8など）を引き継いでしまった状態 */
.lh-sec4-inherit {
  line-height: 1.8;
}

/* ⭕️ 見出し用に上書きして詰めた状態 */
.lh-sec4-compressed {
  line-height: 1.3;
}

.lh-hl-comment {
  color: #6c757d;
  font-style: italic;
}

タグ別（p・li・table等）の行間調整

Webサイトのレイアウトを整えるには、テキストに一律の行間を設定するのではなく、HTMLの「タグの意味（役割）」に合わせて行間を個別に設定する必要があります。

ここでは、実務で調整が必要となる「段落（p）」「リスト（li）」「テーブル（table）」、特殊な「ルビ・縦書き」に焦点を当て、行間のコントロールを解説します。

タグ別（p・li・table等）の行間調整
  • pタグ（段落）の行間設定
  • リスト（li）や箇条書きの行間を整える
  • テーブル（table）内のテキスト行間設定
  • ルビ（ふりがな）や縦書きテキストの行間調整

pタグ（段落）の行間設定

文章のまとまりを表す<p>タグは、Webサイトにおいて最も読まれる要素です。

pタグの行間設定は、サイト全体の可読性を左右します。

1つの<p>タグ内の行間（line-height）は1.6〜1.8の読みやすい数値に設定します。

「次の<p>タグとの間の隙間」はmargin-bottomを使って余白を設けるのがよいです。

📝 pタグの行間（line-height）と余白（margin）

❌ 失敗：line-heightだけで段落を離そうとした例

これは1つ目の段落です。長めの文章が入ります。行間だけで段落の隙間を作ろうとすると、このように文章の中の隙間までスカスカになってしまいます。

これは2つ目の段落です。段落の中の行間と、段落同士の余白の区別がついていない悪い例です。

⭕️ 成功：line-heightとmargin-bottomを併用した例

これは1つ目の段落です。長めの文章が入ります。段落の中は「1.6」という読みやすい行間で統一されています。

これは2つ目の段落です。段落と段落の間にはmargin-bottomで適切な余白が空いているため、文章の塊がはっきりと認識できます。

/* ❌ 失敗：行間を広げすぎてしまう */
p.wrong {
  line-height: 2.5;
  margin-bottom: 0;
}

/* ⭕️ 正解：行間は最適に、段落間はmarginで空ける */
p.correct {
  line-height: 1.6; /* 💡 読みやすい行間 */
  margin-bottom: 24px; /* 💡 次の段落との距離 */
}
HTMLコード表示
<div class="tag-sec1-wrapper">
  <div class="tag-sec1-demo-area">
    <div class="tag-sec1-box">
      <div class="tag-sec1-label">📝 pタグの行間（line-height）と余白（margin）</div>
      
      <div class="tag-sec1-visual">
        <div class="tag-sec1-item">
          <p class="tag-sec1-title">❌ 失敗：line-heightだけで段落を離そうとした例</p>
          <div class="tag-sec1-bg">
            <p class="tag-sec1-p-wrong">
              これは1つ目の段落です。長めの文章が入ります。行間だけで段落の隙間を作ろうとすると、このように文章の中の隙間までスカスカになってしまいます。
            </p>
            <p class="tag-sec1-p-wrong">
              これは2つ目の段落です。段落の中の行間と、段落同士の余白の区別がついていない悪い例です。
            </p>
          </div>
        </div>

        <div class="tag-sec1-item">
          <p class="tag-sec1-title" style="color:#198754;">⭕️ 成功：line-heightとmargin-bottomを併用した例</p>
          <div class="tag-sec1-bg">
            <p class="tag-sec1-p-correct">
              これは1つ目の段落です。長めの文章が入ります。段落の中は「1.6」という読みやすい行間で統一されています。
            </p>
            <p class="tag-sec1-p-correct">
              これは2つ目の段落です。段落と段落の間にはmargin-bottomで適切な余白が空いているため、文章の塊がはっきりと認識できます。
            </p>
          </div>
        </div>
      </div>

      <div class="tag-sec1-code">
        /* ❌ 失敗：行間を広げすぎてしまう */<br>
        <span class="tag-hl-blue">p.wrong</span> {<br>
          <span class="tag-hl-green">line-height: 2.5;</span><br>
          <span class="tag-hl-green">margin-bottom: 0;</span><br>
        }<br><br>

        /* ⭕️ 正解：行間は最適に、段落間はmarginで空ける */<br>
        <span class="tag-hl-blue">p.correct</span> {<br>
          <span class="tag-hl-green">line-height: 1.6;</span> /* 💡 読みやすい行間 */<br>
          <span class="tag-hl-red">margin-bottom: 24px;</span> /* 💡 次の段落との距離 */<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.tag-sec1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.tag-sec1-demo-area {
  display: flex;
  justify-content: center;
}

.tag-sec1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}

.tag-sec1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.tag-sec1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.tag-sec1-item {
  margin-bottom: 20px;
}

.tag-sec1-item:last-child {
  margin-bottom: 0;
}

.tag-sec1-title {
  font-size: 13px;
  font-weight: bold;
  color: #dc3545;
  margin: 0 0 10px 0;
}

.tag-sec1-bg {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

/* ❌ 失敗例 */
.tag-sec1-p-wrong {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 2.5;
}

/* ⭕️ 成功例 */
.tag-sec1-p-correct {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.6;
}

.tag-sec1-p-correct:last-child {
  margin-bottom: 0;
}

.tag-sec1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.tag-hl-green {
  color: #98c379;
  font-weight: bold;
}

.tag-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.tag-hl-red {
  color: #e06c75;
  font-weight: bold;
}

リスト（li）や箇条書きの行間を整える

箇条書き（リスト）は情報を整理して伝えるパーツです。

リストの行間は、本文（pタグ）とは異なる考え方で調整する必要があります。

リスト（<li>）のline-heightは、本文よりも少し狭い1.4〜1.5程度に設定してまとまり感を強めます。

その上で、各項目の隙間はmargin-bottomを使って少し広めに取ると、視認性の高い箇条書きになります。

☑️ リスト（li）の行間調整

❌ 本文の行間（1.8）を引き継いだリスト

  • 短い項目です。
  • 文字数が多くてスマホ等の画面で2行以上に折り返されてしまった長い項目です。行間が広すぎて別の項目に見えます。
  • 短い項目です。

⭕️ 行間を詰め、marginで項目を離したリスト

  • 短い項目です。
  • 文字数が多くてスマホ等の画面で2行以上に折り返されてしまった長い項目です。ひとつの塊として読み取れます。
  • 短い項目です。
/* ⭕️ リスト調整 */
li {
  line-height: 1.4; /* 💡 折り返した時にバラけないよう詰める */
  margin-bottom: 12px; /* 💡 項目ごとの距離はmarginで離す */
}
HTMLコード表示
<div class="tag-sec2-wrapper">
  <div class="tag-sec2-demo-area">
    <div class="tag-sec2-box">
      <div class="tag-sec2-label">☑️ リスト（li）の行間調整</div>
      
      <div class="tag-sec2-visual">
        <div class="tag-sec2-item">
          <p class="tag-sec1-title">❌ 本文の行間（1.8）を引き継いだリスト</p>
          <ul class="tag-sec2-ul tag-sec2-wrong">
            <li>短い項目です。</li>
            <li>文字数が多くてスマホ等の画面で2行以上に折り返されてしまった長い項目です。行間が広すぎて別の項目に見えます。</li>
            <li>短い項目です。</li>
          </ul>
        </div>

        <div class="tag-sec2-item">
          <p class="tag-sec1-title" style="color:#198754;">⭕️ 行間を詰め、marginで項目を離したリスト</p>
          <ul class="tag-sec2-ul tag-sec2-correct">
            <li>短い項目です。</li>
            <li>文字数が多くてスマホ等の画面で2行以上に折り返されてしまった長い項目です。ひとつの塊として読み取れます。</li>
            <li>短い項目です。</li>
          </ul>
        </div>
      </div>

      <div class="tag-sec1-code">
        /* ⭕️ リスト調整 */<br>
        <span class="tag-hl-blue">li</span> {<br>
          <span class="tag-hl-green">line-height: 1.4;</span> /* 💡 折り返した時にバラけないよう詰める */<br>
          <span class="tag-hl-red">margin-bottom: 12px;</span> /* 💡 項目ごとの距離はmarginで離す */<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.tag-sec2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.tag-sec2-demo-area {
  display: flex;
  justify-content: center;
}

.tag-sec2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}

.tag-sec2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.tag-sec2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.tag-sec2-item {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  margin-bottom: 20px;
}

.tag-sec2-item:last-child {
  margin-bottom: 0;
}

.tag-sec2-ul {
  padding-left: 20px;
  margin: 0;
  font-size: 14px;
}

/* ❌ 失敗：行間が広すぎる */
.tag-sec2-wrong li {
  line-height: 1.8;
  margin-bottom: 5px;
}

/* ⭕️ 成功：行間を詰め、余白を取る */
.tag-sec2-correct li {
  line-height: 1.4;
  margin-bottom: 15px;
}

.tag-sec2-correct li:last-child {
  margin-bottom: 0;
}

テーブル（table）内のテキスト行間設定

料金表や会社概要など、データを整理して見せるテーブル（表）においても「tableの行間」の調整は必須です。

テーブルは「じっくり読む」ものではなく「データをサッと探す」ためのパーツです。

セル内のline-heightは1.3〜1.4程度に狭く上書きしてリセットします。

セルの高さや余白は、padding（内側の余白）を使って調整してください。

📊 テーブル（table）の行間と余白

⭕️ 行間を狭め、paddingで高さを出したテーブル

会社名 株式会社サンプルWebデザイン
事業内容 Webサイトの企画・制作・運用
自社メディアの運営・SEO対策
/* ⭕️ テーブルセルの正しい設定 */
th, td {
  line-height: 1.4; /* 💡 表はデータを読むため行間を狭める */
  padding: 15px 20px; /* 💡 セルの広さは必ずpaddingで作る */
  vertical-align: middle; /* 文字の縦位置を中央に */
}
HTMLコード表示
<div class="tag-sec3-wrapper">
  <div class="tag-sec3-demo-area">
    <div class="tag-sec3-box">
      <div class="tag-sec3-label">📊 テーブル（table）の行間と余白</div>
      
      <div class="tag-sec3-visual">
        <p class="tag-sec1-title" style="color:#198754; margin-bottom:10px;">⭕️ 行間を狭め、paddingで高さを出したテーブル</p>
        <table class="tag-sec3-table">
          <tbody>
            <tr>
              <th>会社名</th>
              <td>株式会社サンプルWebデザイン</td>
            </tr>
            <tr>
              <th>事業内容</th>
              <td>
                Webサイトの企画・制作・運用<br>
                自社メディアの運営・SEO対策
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="tag-sec1-code">
        /* ⭕️ テーブルセルの正しい設定 */<br>
        <span class="tag-hl-blue">th, td</span> {<br>
          <span class="tag-hl-green">line-height: 1.4;</span> /* 💡 表はデータを読むため行間を狭める */<br>
          <span class="tag-hl-red">padding: 15px 20px;</span> /* 💡 セルの広さは必ずpaddingで作る */<br>
          <span class="tag-hl-green">vertical-align: middle;</span> /* 文字の縦位置を中央に */<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.tag-sec3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.tag-sec3-demo-area {
  display: flex;
  justify-content: center;
}

.tag-sec3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}

.tag-sec3-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.tag-sec3-visual {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.tag-sec3-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tag-sec3-table th,
.tag-sec3-table td {
  border: 1px solid #ced4da;
  /* 💡 ここ */
  line-height: 1.4;
  padding: 12px 15px;
  vertical-align: middle;
}

.tag-sec3-table th {
  background-color: #f1f3f5;
  width: 30%;
  text-align: left;
}

ルビ（ふりがな）や縦書きテキストの行間調整

難しい漢字にふりがなを振るルビの行間や和風デザインで使われる縦書きの行間は、通常の横書きテキストとは異なる配慮が必要です。

ルビ（ふりがな）を多用する記事（子供向けや専門用語の多いサイト）では、ルビの高さが追加されることを前提として、ベースのline-heightを通常より広い2.0前後に設定してください。

縦書きデザインにおいても、列と列の隙間を確保するためにline-height: 2.0;前後を指定するのがよいです。

🇯🇵 ルビ（ふりがな）と縦書きの行間

⭕️ ルビを考慮して広め（2.0）にとった行間

本日は晴天せいてんなり。
和風わふうのデザインを制作する際は、余白よはくの美しさが重要です。
上の行にルビが衝突していません。

💡 縦書きの行間（列同士の隙間）

縦書きの場合、ラインハイトは
「列と列の間の広さ」として
機能します。広めが美しいです。

/* 🇯🇵 ルビ（ふりがな）がある文章の行間 */
.text-with-ruby {
  line-height: 2.0; /* 💡 ルビの分だけ通常より広くとる */
}

/* 🎋 縦書きテキストの行間 */
.text-vertical {
  writing-mode: vertical-rl; /* 縦書き指定 */
  line-height: 2.0; /* 💡 縦書き時の「列の隙間」になる */
  letter-spacing: 0.1em; /* 縦方向の文字間隔 */
}
HTMLコード表示
<div class="tag-sec4-wrapper">
  <div class="tag-sec4-demo-area">
    <div class="tag-sec4-box">
      <div class="tag-sec4-label">🇯🇵 ルビ（ふりがな）と縦書きの行間</div>
      
      <div class="tag-sec4-visual">
        <div class="tag-sec4-item" style="margin-bottom: 30px;">
          <p class="tag-sec1-title" style="color:#198754;">⭕️ ルビを考慮して広め（2.0）にとった行間</p>
          <div class="tag-sec4-ruby-box">
            <p class="tag-sec4-ruby-text">
              本日は<ruby>晴天<rt>せいてん</rt></ruby>なり。<br>
              <ruby>和風<rt>わふう</rt></ruby>のデザインを制作する際は、<ruby>余白<rt>よはく</rt></ruby>の美しさが重要です。<br>
              上の行にルビが衝突していません。
            </p>
          </div>
        </div>

        <div class="tag-sec4-item">
          <p class="tag-sec1-title" style="color:#0d6efd;">💡 縦書きの行間（列同士の隙間）</p>
          <div class="tag-sec4-vertical-box">
            <p class="tag-sec4-vertical-text">
              縦書きの場合、ラインハイトは<br>
              「列と列の間の広さ」として<br>
              機能します。広めが美しいです。
            </p>
          </div>
        </div>
      </div>

      <div class="tag-sec1-code">
        /* 🇯🇵 ルビ（ふりがな）がある文章の行間 */<br>
        <span class="tag-hl-blue">.text-with-ruby</span> {<br>
          <span class="tag-hl-red">line-height: 2.0;</span> /* 💡 ルビの分だけ通常より広くとる */<br>
        }<br><br>

        /* 🎋 縦書きテキストの行間 */<br>
        <span class="tag-hl-blue">.text-vertical</span> {<br>
          <span class="tag-hl-green">writing-mode: vertical-rl;</span> /* 縦書き指定 */<br>
          <span class="tag-hl-green">line-height: 2.0;</span> /* 💡 縦書き時の「列の隙間」になる */<br>
          <span class="tag-hl-green">letter-spacing: 0.1em;</span> /* 縦方向の文字間隔 */<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.tag-sec4-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.tag-sec4-demo-area {
  display: flex;
  justify-content: center;
}

.tag-sec4-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}

.tag-sec4-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.tag-sec4-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.tag-sec4-ruby-box {
  background-color: #fff;
  border: 1px solid #ced4da;
  padding: 15px;
  border-radius: 4px;
}

.tag-sec4-ruby-text {
  margin: 0;
  font-size: 14px;
  /* 💡 ルビ用の広い行間 */
  line-height: 2.0;
}

.tag-sec4-vertical-box {
  background-color: #fff;
  border: 1px solid #ced4da;
  padding: 20px;
  border-radius: 4px;
  /* 縦書き要素を右寄せにするためのコンテナ設定 */
  display: flex;
  justify-content: flex-end;
  height: 150px;
}

.tag-sec4-vertical-text {
  margin: 0;
  font-size: 14px;
  /* 💡 縦書き指定と行間 */
  writing-mode: vertical-rl;
  line-height: 2.0;
  letter-spacing: 0.1em;
}

行間のトラブル解決と上下の余白との違い

CSSで行間を調整する際、基本のline-heightだけでは解決できないレイアウトの悩みやトラブルが発生します。

行間と余白の違いを理解していないと、意図した通りのデザインにならないだけでなく修正が困難なコードになります。

ここでは、余白との使い分け、指定した行間が効かない時の解決策などを解説します。

行間のトラブル解決と上下の余白との違い
  • 上下の余白との使い分けと下だけ空ける指定
  • line-heightが効かない：行間が変わらない時の原因と対策
  • CSSを使わずにHTMLだけで行間を調整する方法

上下の余白との使い分けと下だけ空ける指定

line-heightは文章の行と行の隙間を広げますが、同時に行間の上下に均等な余白を作るという特徴があります。

行間の下だけを空けたい場合や別の要素（見出し、画像、次の段落など）と距離を取りたい場合は、line-height は使わずmargin-bottomを使用してください。

line-heightは「自分自身の文字を読みやすくする内部の隙間」、marginは「別の要素との距離をとる外部の隙間」と使い分けるのがよいです。

📦 行間（上下）と 余白（下だけ）の違い
上の画像要素
❌ 失敗の見出し（line-height: 3.0）

見出しの「line-height」を大きくして下の段落との隙間を作ろうとすると、画像（上の要素）との間にも不要な隙間ができてしまいます。

上の画像要素
⭕️ 正解の見出し（margin-bottom: 20px）

見出しの行間は適度に抑え、「margin-bottom」で下だけ隙間を作ることで、上の要素との距離を美しく保つことができます。

/* ❌ 行間で要素間の余白を作ろうとする */
.heading-wrong {
  line-height: 3.0; /* 💡 上下両方に巨大な隙間ができる */
}

/* ⭕️ 要素間の余白はmarginを使う */
.heading-correct {
  line-height: 1.3; /* 行間はタイトルに最適な狭さに */
  margin-bottom: 20px; /* 💡 下だけを空ける！ */
}
HTMLコード表示
<div class="lh-trb1-wrapper">
  <div class="lh-trb1-demo-area">
    <div class="lh-trb1-box">
      <div class="lh-trb1-label">📦 行間（上下）と 余白（下だけ）の違い</div>
      
      <div class="lh-trb1-visual">
        <div class="lh-trb1-item">
          <div class="lh-trb1-dummy-img">上の画像要素</div>
          
          <div class="lh-trb1-heading lh-trb1-wrong">
            ❌ 失敗の見出し（line-height: 3.0）
          </div>
          
          <p class="lh-trb1-text">
            見出しの「line-height」を大きくして下の段落との隙間を作ろうとすると、画像（上の要素）との間にも不要な隙間ができてしまいます。
          </p>
        </div>

        <div class="lh-trb1-item">
          <div class="lh-trb1-dummy-img">上の画像要素</div>
          
          <div class="lh-trb1-heading lh-trb1-correct">
            ⭕️ 正解の見出し（margin-bottom: 20px）
          </div>
          
          <p class="lh-trb1-text">
            見出しの行間は適度に抑え、「margin-bottom」で下だけ隙間を作ることで、上の要素との距離を美しく保つことができます。
          </p>
        </div>
      </div>

      <div class="lh-trb1-code">
        /* ❌ 行間で要素間の余白を作ろうとする */<br>
        <span class="lh-trb-hl-blue">.heading-wrong</span> {<br>
          <span class="lh-trb-hl-red">line-height: 3.0;</span> /* 💡 上下両方に巨大な隙間ができる */<br>
        }<br><br>

        /* ⭕️ 要素間の余白はmarginを使う */<br>
        <span class="lh-trb-hl-blue">.heading-correct</span> {<br>
          <span class="lh-trb-hl-green">line-height: 1.3;</span> /* 行間はタイトルに最適な狭さに */<br>
          <span class="lh-trb-hl-red">margin-bottom: 20px;</span> /* 💡 下だけを空ける！ */<br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.lh-trb1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.lh-trb1-demo-area {
  display: flex;
  justify-content: center;
}

.lh-trb1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}

.lh-trb1-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.lh-trb1-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.lh-trb1-item {
  background-color: #fff;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  margin-bottom: 20px;
}

.lh-trb1-item:last-child {
  margin-bottom: 0;
}

.lh-trb1-dummy-img {
  background-color: #e9ecef;
  color: #adb5bd;
  text-align: center;
  padding: 10px;
  font-size: 12px;
  font-weight: bold;
  border: 1px dashed #adb5bd;
}

.lh-trb1-heading {
  font-size: 16px;
  font-weight: bold;
  background-color: #ffeeba; /* 隙間がわかりやすいように背景色を追加 */
  margin-top: 0;
}

.lh-trb1-text {
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

/* ❌ line-heightで余白を作った失敗例 */
.lh-trb1-wrong {
  line-height: 3.0;
  margin-bottom: 0;
}

/* ⭕️ margin-bottomを使った成功例 */
.lh-trb1-correct {
  line-height: 1.3;
  margin-bottom: 20px;
}

.lh-trb1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}

.lh-trb-hl-green {
  color: #98c379;
  font-weight: bold;
}

.lh-trb-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.lh-trb-hl-red {
  color: #e06c75;
  font-weight: bold;
}

外側の余白であるmarginの使い方を詳しく知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番

line-heightが効かない：行間が変わらない時の原因と対策

CSSファイルにline-height: 2.0;と書いたのに行間が変わらないと悩むケースは実務でも発生します。

この現象には、いくつかの原因があります。

例えば、カード型のデザインなどを作る際に、箱（親要素）にheight: 100px;のように固定の高さを指定しているケースです。

箱の高さが固定されている状態で、中のテキストのline-heightを広げると行間は広がろうとしますが、箱の高さに制限され、文字が箱からはみ出したり、不自然に切れたりして「行間が効いていない」ように見えます。

もう一つよくある原因が「CSSの優先順位（詳細度）負け」です。

自分が書いたクラスよりも、WordPressのテーマ（SWELL等）が元々持っているリセットCSSやID（#）を使った強力なCSSが優先され、指示が打ち消されている状態です。

  1. テキストが入る箱には、原則としてheightは使わず中身に合わせて伸びるようにするか、min-heightを使用します。
  2. デベロッパーツール（F12キー）を開き、自分が書いたline-heightに打ち消し線が入っていないか確認します。
    入っていた場合は、強いセレクタ（クラス名を複数繋げるなど）で書き直します。
🚨 行間が変わらない・はみ出す原因

❌ 失敗：height（高さ）を固定している

親要素の高さを固定したまま行間を広げると、
文字が箱から大きくはみ出してしまい、
レイアウトが完全に崩壊します。

⭕️ 正解：高さを指定しない（auto）

高さを固定しなければ、行間を広げても
箱が自動で下に伸びてくれるため、
中身がはみ出すことはありません。

/* ❌ 箱の高さをpxで縛ってしまう */
.card-wrong {
  height: 60px; /* 💡 行間が広がれずにはみ出す原因 */
  padding: 15px;
}

/* ⭕️ テキストが入る箱の高さは自動(auto)に */
.card-correct {
  height: auto; /* 💡 書かなくてもデフォルトはautoです */
  padding: 15px;
}
HTMLコード表示
<div class="lh-trb2-wrapper">
  <div class="lh-trb2-demo-area">
    <div class="lh-trb2-box">
      <div class="lh-trb2-label">🚨 行間が変わらない・はみ出す原因</div>
      
      <div class="lh-trb2-visual">
        
        <div class="lh-trb2-item">
          <p class="lh-trb2-title" style="color:#dc3545;">❌ 失敗：height（高さ）を固定している</p>
          <div class="lh-trb2-card lh-trb2-height-fixed">
            <p class="lh-trb2-text-wide">
              親要素の高さを固定したまま行間を広げると、<br>
              文字が箱から大きくはみ出してしまい、<br>
              レイアウトが完全に崩壊します。
            </p>
          </div>
        </div>

        <div class="lh-trb2-item" style="margin-top: 40px;">
          <p class="lh-trb2-title" style="color:#198754;">⭕️ 正解：高さを指定しない（auto）</p>
          <div class="lh-trb2-card">
            <p class="lh-trb2-text-wide">
              高さを固定しなければ、行間を広げても<br>
              箱が自動で下に伸びてくれるため、<br>
              中身がはみ出すことはありません。
            </p>
          </div>
        </div>
      </div>

      <div class="lh-trb1-code">
        /* ❌ 箱の高さをpxで縛ってしまう */<br>
        <span class="lh-trb-hl-blue">.card-wrong</span> {<br>
          <span class="lh-trb-hl-red">height: 60px;</span> /* 💡 行間が広がれずにはみ出す原因 */<br>
          <span class="lh-trb-hl-green">padding: 15px;</span><br>
        }<br><br>

        /* ⭕️ テキストが入る箱の高さは自動(auto)に */<br>
        <span class="lh-trb-hl-blue">.card-correct</span> {<br>
          <span class="lh-trb-hl-green">height: auto;</span> /* 💡 書かなくてもデフォルトはautoです */<br>
          <span class="lh-trb-hl-green">padding: 15px;</span><br>
        }
      </div>
    </div>
  </div>
</div>
CSSコード表示
.lh-trb2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.lh-trb2-demo-area {
  display: flex;
  justify-content: center;
}

.lh-trb2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}

.lh-trb2-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.lh-trb2-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 1px solid #dee2e6;
}

.lh-trb2-item {
  margin-bottom: 20px;
}

.lh-trb2-title {
  font-size: 13px;
  font-weight: bold;
  margin: 0 0 10px 0;
}

.lh-trb2-card {
  background-color: #fff;
  border: 2px solid #0d6efd;
  padding: 15px;
  border-radius: 4px;
}

/* ❌ 高さを固定した失敗例 */
.lh-trb2-height-fixed {
  height: 60px;
}

/* 中身のテキスト（行間を広くとっている） */
.lh-trb2-text-wide {
  margin: 0;
  font-size: 13px;
  line-height: 2.0; /* 行間を広げている */
  color: #333;
}

CSSの優先順位について詳しく知りたい人は「CSSの優先順位はどう決まる？どこに書くかと外部CSSの読み込み＆インラインの記述」を一読ください。

CSSの優先順位はどう決まる？どこに書くかと外部CSSの読み込み＆インラインの記述

CSSを使わずにHTMLだけで行間を調整する方法

WordPressの制限や、HTMLメールの作成、あるいは一時的なLPの修正などで「CSSファイルが触れない」という状況に陥ることがあります。

CSSを使わずHTMLで行間を調整しなければならない場面です。

外部のCSSファイルが使えなくても、HTMLタグの中に直接CSSを書き込む「インラインスタイル（style 属性）」を使用すれば、HTMLファイルだけで行間を調整できます。

<br>連打などは絶対にやめましょう。

🛠 HTMLのstyle属性を使った行間調整

index.html

<!– ❌ 悪手：brタグの連打 –>
<p>
第一段落のテキストです。
<br><br>
第二段落のテキストです。
</p>
<!– ⭕️ 正解：style属性でインラインCSSを記述 –>
<p style=”line-height: 1.8; margin-bottom: 24px;“>
第一段落のテキストです。行間も余白も自由自在です。
</p>
<p style=”line-height: 1.8;“>
第二段落のテキストです。
</p>
HTMLコード表示
<div class="lh-trb3-wrapper">
  <div class="lh-trb3-demo-area">
    <div class="lh-trb3-box">
      <div class="lh-trb3-label">🛠 HTMLのstyle属性を使った行間調整</div>
      
      <div class="lh-trb3-visual">
        <div class="lh-trb3-mock-editor">
          <p style="font-size:12px; color:#adb5bd; margin: 0 0 10px 0;">index.html</p>
          
          <div class="lh-trb3-code-line">
            <span class="lh-hl-comment"><!-- ❌ 悪手：brタグの連打 --></span><br>
            <span class="lh-trb-hl-blue"><p></span><br>
            第一段落のテキストです。<br>
            <span class="lh-trb-hl-red"><br><br></span><br>
            第二段落のテキストです。<br>
            <span class="lh-trb-hl-blue"></p></span>
          </div>

          <div class="lh-trb3-code-line" style="margin-top: 20px;">
            <span class="lh-hl-comment"><!-- ⭕️ 正解：style属性でインラインCSSを記述 --></span><br>
            <span class="lh-trb-hl-blue"><p</span> <span class="lh-trb-hl-green">style="</span><span class="lh-trb-hl-red">line-height: 1.8; margin-bottom: 24px;</span><span class="lh-trb-hl-green">"</span><span class="lh-trb-hl-blue">></span><br>
            第一段落のテキストです。行間も余白も自由自在です。<br>
            <span class="lh-trb-hl-blue"></p></span><br>
            
            <span class="lh-trb-hl-blue"><p</span> <span class="lh-trb-hl-green">style="</span><span class="lh-trb-hl-red">line-height: 1.8;</span><span class="lh-trb-hl-green">"</span><span class="lh-trb-hl-blue">></span><br>
            第二段落のテキストです。<br>
            <span class="lh-trb-hl-blue"></p></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
CSSコード表示
.lh-trb3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}

.lh-trb3-demo-area {
  display: flex;
  justify-content: center;
}

.lh-trb3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 25px;
  width: 100%;
  max-width: 600px;
  border-radius: 4px;
}

.lh-trb3-label {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.lh-trb3-visual {
  background-color: #f1f3f5;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.lh-trb3-mock-editor {
  background-color: #282c34;
  color: #abb2bf;
  padding: 20px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
}

.lh-trb3-code-line {
  border-left: 3px solid #6c757d;
  padding-left: 10px;
}

.lh-trb-hl-green {
  color: #98c379;
  font-weight: bold;
}

.lh-trb-hl-blue {
  color: #61afef;
  font-weight: bold;
}

.lh-trb-hl-red {
  color: #e06c75;
  font-weight: bold;
}

.lh-hl-comment {
  color: #6c757d;
  font-style: italic;
}

CSSはどこに書けるか詳しく知りたい人は「【初心者のCSS入門】CSS（スタイルシート）とは？書き方と装飾方法まとめ」を一読ください。

【初心者のCSS入門】CSS（スタイルシート）とは？書き方と装飾方法まとめ

まとめ

分かりやすいようにまとめを記載します。

本記事のまとめ
  • line-heightは「px」や「%」などの単位を使用せず、数値のみ（単位なし）で指定する。
  • 本文（pタグ）の行間は「1.5〜1.8」を基準とする。
  • 見出し（h1〜h6）やテーブルセル（th, td）の行間は「1.2〜1.4」に狭めて上書きする。
  • リスト（li）は行間を少し詰め（1.4程度）、項目間の距離はmargin-bottomで空ける。
  • ルビ（ふりがな）や縦書きテキストの行間は「2.0」前後と広めに設定する。
  • 文字間の左右の隙間を調整する場合はletter-spacingを使用する。
  • 別の要素との距離（上下の余白）を作る場合は、line-heightではなくmargin-bottomを使用する。
  • 行間が効かない・文字がはみ出す場合は、親要素に固定のheightが指定されていないか確認する。
  • 外部CSSが編集できない場合は<br>タグを連打せず、HTMLタグに直接style属性（インラインスタイル）を記述する。

よくある質問（FAQ）

読みやすい行間のおすすめの数値はいくつですか？

日本語のWebサイトの本文（長文のテキスト）においては、1.5〜1.8の間が最も読みやすい「黄金比」とされています。

これより狭い（1.2など）と文字が詰まって息苦しい印象を与え、逆に広すぎる（2.5など）と文章の繋がりがわかりにくくなり、箇条書きのように見えます。

line-heightに「px」や「%」などの単位をつけない方が良いのはなぜですか？

文字サイズを変更した際に、上下の文字が重なってしまうレイアウト崩れ（バグ）を防ぐためです。

pxで固定してしまうと、スマホなどで文字サイズ（font-size）だけが大きくなった時、行間がそれに合わせて広がってくれません。

単位なし（例：1.6）で指定すれば、「常にその時の文字サイズの1.6倍の行間にする」という柔軟な自動計算が行われるため、どんなデバイスでも表示されます。

line-heightを指定したのに行間が広がりません。原因は何ですか？

最も多い原因は、テキストを囲んでいる親要素（箱）にheight（固定の高さ）が指定されていることです。

箱の高さが固定された状態で行間だけを広げようとすると、行間は箱のサイズに制限され、文字がはみ出したり、変わっていないように見えます。

テキストを入れる箱にはheightではなくmin-heightを使うか、高さをauto（指定しない）にするのがよいです。

段落（pタグ）と段落の間の隙間も、line-heightで広げるべきですか？

いいえ、段落同士の隙間はmargin-bottomで空けるのが正しいCSSの書き方です。

line-heightはあくまで「1つの段落の中にある文章の改行幅」を調整するプロパティです。

要素と要素の間の距離をとるためにline-heightを使ってしまうと、画像や見出しなど他の要素との距離感も狂わせてしまうため注意が必要です。

本文の行間を「1.8」に設定しました。見出しやリストもこれで大丈夫ですか？

見出し（h1〜h6）や箇条書きのリスト（li）、テーブル（table）の中のテキストは個別に狭い行間（1.2〜1.4 程度）に上書きして設定し直す必要があります。

CSSは親要素の設定を子要素に引き継ぐため、大枠に設定した広い行間が見出しにも適用されます。

見出しは「ひとつの塊」としてパッと見で認識させる必要があるため、行間が広すぎると間延びして読みにくくなります。

CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次