CSSのline-heightで行間を調整し、テキストの可読性を向上させる方法をわかりやすく解説

2024.09.14
スポンサーリンク

CSSのline-heightプロパティは、行間（行の高さ）を指定するために使用されます。このプロパティは、テキストの可読性を向上させるために重要です。行間の調整によって、デザインがより視覚的に整ったものになります。

スポンサーリンク

line-heightプロパティの値とその効果の一覧

  • 1 – 行間が狭く、文字が密集して表示されます。
  • 1.5 – 標準的な行間で、読みやすい配置です。
  • 2 – 行間が広がり、スペースが多くなります。
  • 30px – ピクセル単位での行間指定です。

注意点や関連情報

line-heightは数値、パーセンテージ、または固定値（ピクセル）で指定できます。数値指定の場合、フォントサイズに対して倍率で計算され、line-height: 1.5;はフォントサイズの1.5倍の行間を意味します。行間が狭すぎると読みづらくなるため、適切な値を選ぶことが重要です。

line-heightプロパティが効かない時の原因と対策

ブロック要素ではない

line-heightプロパティは、主にブロックレベルの要素（例: div、pなど）に適用されますが、インライン要素やインラインブロック要素に対しても効果があります。しかし、インライン要素に適用すると、行間の効果が見えにくい場合があります。
対策: ブロック要素やインラインブロック要素にline-heightを適用して、行間の効果を確認します。例えば、display: block;やdisplay: inline-block;を使用して効果を確認しましょう。

paddingやmarginとの競合

line-heightは、paddingやmarginなどのスペース調整プロパティと一緒に使用すると、行間の調整が期待通りに機能しないことがあります。特に、要素に過剰なpaddingやmarginが設定されていると、行間の効果が隠れてしまう場合があります。
対策: 要素のpaddingやmarginが過剰に設定されていないか確認し、適切に調整します。例えば、padding: 0;やmargin: 0;を使用して、行間のスペースを正確に反映させます。

共通するCSSコード

.css-sample-container {
      width: 100%;
      margin: 20px 0;
    }

    .css-sample-item {
      width: 300px;
      background-color: #f0f8ff;
      padding: 10px;
      margin: 10px auto;
    }

line-height: 1;

行間が非常に狭い設定です。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item css-sample-line-height-1">
        これは行間が1の設定です。文字が密集して表示されます。
      </div>
    </div>

CSSコード

.css-sample-line-height-1 {
      line-height: 1;
    }

表示結果

これは行間が1の設定です。文字が密集して表示されます。

line-height: 1.5;

標準的な行間の設定です。読みやすく表示されます。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item css-sample-line-height-1_5">
        これは行間が1.5の設定です。読みやすい間隔で表示されます。
      </div>
    </div>

CSSコード

.css-sample-line-height-1_5 {
      line-height: 1.5;
    }

表示結果

これは行間が1.5の設定です。読みやすい間隔で表示されます。

line-height: 2;

行間が広く、余白が多くなります。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item css-sample-line-height-2">
        これは行間が2の設定です。スペースが多く、余裕を持った表示です。
      </div>
    </div>

CSSコード

.css-sample-line-height-2 {
      line-height: 2;
    }

表示結果

これは行間が2の設定です。スペースが多く、余裕を持った表示です。

line-height: 30px;

ピクセル単位で指定した行間です。

HTMLコード

<div class="css-sample-container">
      <div class="css-sample-item css-sample-line-height-30px">
        これは行間が30pxの設定です。ピクセル単位で厳密に行間を指定します。
      </div>
    </div>

CSSコード

.css-sample-line-height-30px {
      line-height: 30px;
    }

表示結果

これは行間が30pxの設定です。ピクセル単位で厳密に行間を指定します。

まとめ

  • line-heightプロパティは、行間を調整するために使われます。
  • 行間を適切に設定することで、テキストの可読性が向上します。
  • 数値、パーセンテージ、固定値（ピクセル）で指定可能です。
  • 行間が狭すぎるとテキストが読みづらくなるため、適切なバランスが重要です。
スポンサーリンク