先生と生徒の会話形式で理解しよう

生徒

「文章がギュッと詰まっていて読みにくいんですが、どうすれば見やすくなりますか？」

先生

「それはCSSのline-heightというプロパティを使うことで、行間を調整して読みやすくできますよ。」

生徒

「line-heightってなんですか？どうやって使うんですか？」

先生

「ひとつずつ、やさしく説明していきますね！」

1. 行間（line-height）とは？初心者でもわかる基本の考え方

まず「行間（ぎょうかん）」とは、文字と文字の間のたての空間のことです。たとえば、本や新聞を読んでいて、文字がぎっしり詰まっていて読みにくいと感じたことはありませんか？これは行間がせまいからなんです。

CSSでは、この行間をline-height（ラインハイト）というプロパティで調整することができます。

line-heightは、「1行の高さ」を意味する言葉で、文字の大きさだけでなく上下のスペースも含んだものになります。

2. CSSでline-heightを設定する基本の書き方

それでは、実際にline-heightの書き方を見てみましょう。行間を広げて、読みやすい文章にするためのCSSの書き方は次のようになります。


<style>
p {
    line-height: 1.8;
}
</style>

<p>これはline-heightを1.8に設定した段落です。行間が広がることで、文字が読みやすくなります。目が疲れにくくなり、長文でもスムーズに読み進めることができます。</p>

ブラウザ表示

このように、pタグ（段落）に対してline-heightを設定するだけで、行間が自然に広がります。

3. 単位の違いを知ろう！数値・パーセント・pxの使い方

line-heightは、さまざまな単位で指定できます。初心者の方は少し混乱しやすいポイントなので、それぞれわかりやすく説明します。

数値（例: 1.5、2など）
フォントサイズに対しての倍率になります。たとえば文字サイズが16pxで、line-heightを2にすると、行の高さは32pxになります。
パーセント（例: 150%、180%）
これもフォントサイズに対する比率です。150%なら文字サイズの1.5倍の高さになります。
ピクセル（例: 24px、32px）
絶対的な高さを指定したいときに使います。ただし、画面サイズに応じて調整がしにくくなることがあります。

4. 実際にline-heightを変えて見た目を比べてみよう

line-heightの数値を変えると、どのように見た目が変わるか、実際に比較してみましょう。


<style>
.line-low {
    line-height: 1.2;
}
.line-normal {
    line-height: 1.6;
}
.line-high {
    line-height: 2;
}
</style>

<p class="line-low">これは行間が狭めに設定された文章です。文字が詰まっていて、少し読みづらい印象を受けるかもしれません。</p>
<p class="line-normal">これは一般的な読みやすさを意識した行間です。バランスが取れていて、多くのウェブサイトでこのくらいの設定が使われています。</p>
<p class="line-high">これは行間を広めに設定した例です。とても読みやすいですが、あまり広すぎると逆に空白が気になることもあるので注意が必要です。</p>

ブラウザ表示

5. 行間の調整は読みやすいWebデザインに欠かせない

Webサイトで文字を読むとき、実は「文字の大きさ」よりも「行間の広さ」のほうが読みやすさに大きく関係します。

line-heightを適切に設定することで、訪問者が快適に文章を読むことができ、長時間読んでも目が疲れにくくなります。

特にブログやニュース記事、商品の説明文など、文章が多いページではline-heightが重要なポイントになります。

6. スマホでも見やすくするには？line-heightの注意点

最近はスマートフォンでウェブサイトを見る人がとても多くなっています。スマホ画面はパソコンよりも小さいため、文字がぎゅうぎゅうに詰まっていると、読みにくくなってしまいます。

そのため、スマホでも読みやすくなるように、line-heightを広めに設定するのがおすすめです。

次のように、文字サイズと一緒にline-heightも設定すると、どの画面でも見やすくなります。


<style>
body {
    font-size: 16px;
    line-height: 1.8;
}
</style>

<p>これはスマホにも配慮した文字サイズと行間の設定です。文章が読みやすく、ストレスなく読めます。</p>

ブラウザ表示

7. 初心者がよくやる間違いとline-height設定のコツ

初心者の方がline-heightを設定する際によくある間違いは、「設定しないまま放置すること」です。line-heightをまったく指定しないと、ブラウザの初期設定に任されてしまい、文字が読みづらくなってしまいます。

また、line-heightをピクセル（px）で固定してしまうと、文字サイズとのバランスが合わなくなることもあるので注意が必要です。

おすすめは、数値で「1.6〜1.8」あたりに設定することです。文字サイズに応じて自動で調整され、読みやすさもアップします。

8. 覚えておきたいline-heightのポイント

line-heightは文字と文字の縦の間隔を調整するCSSプロパティ
1.5〜1.8の設定が一般的で読みやすい
pxよりも「1.6」などの数値設定が推奨される
文章が多いページではline-heightがとても重要
スマホでも読みやすさを意識して設定しよう

まとめ

この記事では、CSSのline-heightを使って行間を整え、文章を読みやすくするための基本から応用までを幅広く学びました。行間という要素は、画面上で文章を読むすべての人にとって大切であり、フォントサイズだけでなく、適切なline-heightの設定によって視認性と理解度が向上します。特に長文を扱うブログやニュース記事、教材ページでは、line-heightの調整が文章全体の印象を大きく変える役割を持ちます。数値による指定、パーセントによる柔軟な調整、ピクセル単位での明確な間隔指定など、用途に応じた設定方法を理解することで、より細やかなデザインが可能になります。

また、スマートフォン閲覧が主流である現代では、小さな画面でもストレスなく読めるようにline-heightを広めに設定する工夫が不可欠です。行間の詰まりは読みづらさにつながり、ユーザーがページを離れてしまう原因にもなりえます。そのため、bodyタグ全体に基本となるline-heightを設定し、読み物として自然で心地よいレイアウトを構築することが求められます。文章量が多い構成であればあるほど、その細やかな設定が読者の満足度に直接影響します。

実際のコード例でも示したように、line-heightをclassで分けて調整したり、スマホにも配慮した基本設定を加えたりすることで、読みやすいタイポグラフィを作成できます。特に初心者がつまずきやすいポイントとして、初期設定のまま放置してしまうことが多いため、自分のデザインに合わせてline-heightを積極的に設定していく姿勢が重要です。文章のバランスを大切にしながら適切な値を見つけていくことで、読み手にとって快適なページを提供できます。

line-heightのサンプルコード


<style>
.text-sample {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}
.text-tight {
    line-height: 1.2;
}
.text-wide {
    line-height: 2;
}
</style>

<p class="text-sample">この段落はline-heightを1.8に設定した例です。読みやすいバランスで多くの文章に適しています。</p>
<p class="text-tight">この段落はline-heightが狭めです。文字が密集しやすく、長文には不向きです。</p>
<p class="text-wide">この段落は行間を広く設定した例です。非常に読みやすいですが、広すぎると空白が目立つこともあります。</p>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「今日学んだline-heightって、文章の読みやすさにすごく大事なんですね。今まで意識していませんでした。」

先生

「その通りです。line-heightを整えるだけで、ページ全体の印象がガラッと変わることもあるんですよ。」

生徒

「line-heightを数値で指定するのがよく使われている理由もよく分かりました。スマホでの見やすさを考えると大事ですね。」

先生

「ええ、特に現代のWebデザインではスマホ表示を前提に考える必要があります。ページを読む人のことを考えると、適切な行間の設定は欠かせません。」

生徒

「これから自分のサイトを作るときは、必ずline-heightも意識して設定してみます！」