HTMLで行間を調整する方法｜line-heightの基本とデザインのコツ

はじめに

HTML で文章を作成すると、「行間が詰まりすぎる」「広がりすぎる」と感じることがあります。
行間（line-height）は、文章の読みやすさやデザイン印象を大きく左右する重要な要素です。

本記事では、HTML と CSS を使った行間調整の基本から、よくあるトラブルの原因と解決法、さらにデザインに応じた設定例までを、初心者にもわかりやすく解説します。

行間とは？基本の考え方

行間の定義と役割

行間とは、文章の行と行の間にある余白のことです。
この余白があることで、文章全体が見やすくなり、読むスピードや理解度にも影響を与えます。

行間が狭すぎると窮屈で読みにくくなり、逆に広すぎると文章が間延びして見えます。

適切な行間は、可読性の向上だけでなく、デザインの印象を整えるためにも欠かせません。

line-height の仕組みを理解する

CSS で行間を調整する際に使うのが、line-height プロパティです。

これは「行の高さ」を指定し、テキスト全体の縦方向の間隔を制御します。
たとえば、以下のように指定します。

単位なし（倍数指定）

p {
  line-height: 1.8;
}

この指定では、フォントサイズの 1.8 倍の高さを 1 行として計算します。 単位をつけずに数値だけ指定すると、 相対値（倍数） として適用され、より柔軟な調整が可能です。

単位あり（px・em など）

p {
  line-height: 24px; /* 絶対値で高さを指定 */
  line-height: 1.5em; /* フォントサイズに対する相対指定 */
}

px は完全固定、em はフォントサイズに連動して変化するため、用途に応じて使い分けられます。

HTML と CSS どちらで設定する？

HTML には直接的に行間を制御するタグは存在しません。
そのため、行間調整は CSS で指定するのが原則です。

かつては<br>タグや<p>の間に<br>を多用して空白を作る方法もありましたが、今は非推奨です。
レイアウトが崩れやすく、保守性も下がるため、必ず CSS でスタイルとして指定しましょう。

CSS で行間を調整する方法

基本の CSS コード例

行間を設定する最もシンプルな方法は、以下のように CSS で指定することです。

body {
  line-height: 1.6;
}

line-height を body に指定すると、原則としてページ全体のテキストに適用されます。
そのため、基本の行間設定として使われることが多い書き方です。

特定の要素だけ調整したい場合は、クラスを指定してコントロールします。

.article {
  line-height: 1.8;
}

px・em・rem の違い

line-height は、数値だけでなく単位付き（px, em, rem など）でも指定可能です。

一般的には、数値指定（例：1.6）または rem 指定を使用するケースが多いです。
理由は、レスポンシブに対応していて、フォントサイズ変更時にも自動的に行間が調整されるためです。

自分のデザイン目的に合わせて、最適な指定方法を選ぶことが大切です。

レスポンシブ対応での注意点

スマートフォンやタブレットでは、画面幅が狭いため行間を広めに取ることが多いです。
たとえば以下のようにメディアクエリで画面幅ごとに設定を分けると、デバイスに応じた最適な読みやすさを確保できます。

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

よくある行間の悩みと解決法

文章が詰まる・広がる原因

行間が思ったようにならない場合、原因の多くは親要素・子要素のフォント指定の不一致です。

異なるフォントサイズの要素が混在していると、計算上の行高がずれます。
また、ブラウザのデフォルト CSS が影響している場合もあるため、リセット CSS を導入するのが有効です。

指定の上書きが効かない場合の対処法

line-height を指定しても反映されないときは、スタイルの優先順位（Specificity） を確認しましょう。

!important が指定された CSSやインラインスタイルが上書きしているケースもあります。

開発者ツールで該当箇所を確認し、競合を解消することが重要です。

ブラウザ間の見え方の違い

Chrome、Safari、Edge などブラウザごとに微妙な差異があります。
特にモバイル環境では、OS によってレンダリング仕様が異なるため、必ず実際にデバイスを用いて確認しましょう。

デザイン別の line-height 設定例

見出し・本文の見え方

見出しは余白が狭い方が締まりが出て、本文は広い方が読みやすくなります。

ただし行間の最適値はデザインやフォントによって変わるため、実際の表示を確認しながら調整するのが重要です。

デザインに応じた余白調整

ビジュアルデザインでは、文字の高さだけでなく、上下の余白（margin や padding） とのバランスも重要です。
例えば、line-height を大きくしても、余白が狭いと窮屈に見えることがあります。

CSS 設計では、行間＋余白＝全体のリズムと捉えて調整しましょう。

line-height の値を動的に変更する

JavaScript や CSS 変数を使えば、行間を動的に切り替えることも可能です。

たとえば、テーマ変更やデザイン調整があっても、相対値で指定しておくと柔軟に対応できます。

:root {
  --base-line-height: 1.6;
}

p {
  line-height: var(--base-line-height);
}

初心者が失敗しやすいポイントと対処法

指定の優先順位と継承ルールの理解

line-height は継承プロパティのため、親要素の指定が子要素に影響します。
意図せずデザインが崩れる原因になるため、スタイルの適用範囲を明確にしましょう。

よくあるコピペによる誤設定の防止策

Web 上のサンプルコードをそのままコピー＆ペーストすると、フォントや単位の違いでズレが生じることがあります。

自分のプロジェクトに合った単位・指定方法を選ぶことが大切です。

実務で使えるチェックリストの紹介

line-height の調整は、見た目だけでなく実務での品質管理にも直結します。

コーディング後に「どこか違和感がある」と感じるときは、次のチェックリストを確認してみましょう。

まとめ

行間の調整は、単なるデザイン設定ではなく、ユーザー体験を左右する基本設計です。
line-height の理解と適切な設定を行うことで、Web ページ全体の印象が大きく向上します。

WEBMASTERS では、こうした CSS プロパティの正しい使い方や、実務で通用するデザイン調整の考え方を基礎から学ぶことができます。
初心者でも安心して HTML・CSS を学びながら、デザイン力とコーディング力を同時に高めることができます。

知識を積み重ねながら、理想的な Web デザインを実現していきましょう。