CSSのline-heightプロパティ：行の高さを自由に調整しよう

Posted on by

CSSのline-heightプロパティは、テキストの行間を調整するための重要なプロパティです。
行の高さを適切に設定することで、テキストの視認性や全体のデザインを向上させることができます。
本記事では、line-heightの基本的な使い方から応用的な設定方法、
ベストプラクティスを具体例とともに解説します。

line-heightプロパティとは？

line-heightプロパティは、テキストの各行の高さを指定するために使用されます。
この値は、行の間隔（行間）を制御し、視認性の向上やデザインの調整に役立ちます。

基本構文

selector {
  line-height: value;
}

指定可能な値

  • 数値（例：1.5）: 相対値として指定。フォントサイズを基準に計算されます。
  • 長さの単位（例：20px）: 絶対値として指定。
  • パーセント（例：150%）: 親要素のフォントサイズに基づく割合。
  • キーワード（例：normal）: ブラウザのデフォルト値。

基本的な使い方

デフォルト値を使用

normalはブラウザのデフォルト値を意味し、適切な行間が自動的に設定されます。

コード例

p {
  line-height: normal;
}

結果

ブラウザごとに異なりますが、通常はフォントサイズの1.2～1.5倍程度の行の高さが設定されます。

数値で指定

数値を使うと、親要素のフォントサイズを基準にした相対値として計算されます。

コード例

p {
  font-size: 16px;
  line-height: 1.5;
}

結果

行の高さは16px × 1.5 = 24pxになります。

ピクセルで指定

固定値を指定したい場合に使用します。

コード例

p {
  line-height: 24px;
}

結果

行の高さが固定で24pxになります。

パーセントで指定

親要素のフォントサイズに基づく割合で行の高さを設定します。

コード例

p {
  line-height: 150%;
}

結果

行の高さはフォントサイズの150%になります。

応用例と実践

視認性を向上させる行間設定

テキストが詰まりすぎていると読みにくくなるため、適切な行間を設定します。

コード例

body {
  font-size: 16px;
  line-height: 1.6;
}

結果

読みやすい余白を持つテキストが表示されます。

タイトルと本文で異なる行間を設定

見出しや本文に異なる行間を適用して、階層を強調します。

コード例

h1 {
  font-size: 32px;
  line-height: 1.2;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

3.3 複数行のリンクで行間を調整

リンクテキストが複数行にわたる場合でも美しく整えることができます。

コード例

a {
  line-height: 1.5;
  text-decoration: none;
  color: blue;
}

レスポンシブデザインで行間を調整

画面サイズに応じて行間を変更し、読みやすさを確保します。

コード例

body {
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  body {
    line-height: 1.8;
  }
}

ベストプラクティス

相対値を優先的に使用

line-heightは、数値で指定することで、フォントサイズ変更時にも自動調整されるため、
相対値を使うことを推奨します。

コード例

p {
  font-size: 14px;
  line-height: 1.6;
}

フォントサイズに応じたバランスを保つ

小さなフォントサイズでは行間を広めに、大きなフォントサイズでは行間を狭めに設定すると、視認性が向上します。

例

  • 小さいフォントサイズ: line-height: 1.8
  • 大きいフォントサイズ: line-height: 1.3

デザインガイドラインを活用

Webサイト全体で統一感を持たせるため、以下のガイドラインを参考にすることをおすすめします。

  • テキスト：1.4～1.6
  • 見出し：1.2～1.4
  • ナビゲーションリンク：1.5

よくある質問

Q1. line-heightのデフォルト値は？

ブラウザのデフォルト値はnormalで、通常はフォントサイズの1.2～1.5倍程度です。

Q2. フォントサイズが異なる要素で統一された行間を設定するには？

remやemを使用して一貫性を持たせることができます。

コード例

body {
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, p {
  line-height: 1.5;
}

まとめ

line-heightプロパティを活用することで、テキストの行間を調整し、
読みやすいウェブデザインを実現できます。
本記事で紹介した基本的な使い方や応用例を参考にして、
視認性とデザイン性の高いウェブサイトを作成してみてください。

特に、相対値やレスポンシブデザインを活用することで、
さまざまなデバイスや画面サイズに適した行間を提供できます。