CSSで文章の行間を広げたり、狭くしたりするときに使用するのが、line-heightプロパティです。
行間が狭すぎると文章が読みにくくなり、反対に広すぎると行と行のつながりがわかりにくくなることがあります。
そのため、Webページでは文字サイズだけでなく、文章の内容や表示幅に合わせて行間を調整することが大切です。
この記事では、line-heightの基本的な使い方から、単位の違い、読みやすい行間の設定方法、注意点まで初心者向けに解説します。
CSSのline-heightとは？
line-heightは、文章の行の高さを指定するCSSプロパティです。
文字そのものの大きさはfont-sizeで指定しますが、line-heightを使うと、主に複数行の文章で行と行の間隔を調整できます。
例えば、次のCSSを指定します。
p {
font-size: 16px;
line-height: 1.8;
}この場合、文字サイズは16px、行の高さは計算上28.8pxになります。
16px × 1.8 = 28.8px
ただし、28.8pxすべてが文字と文字の間の空白になるわけではありません。
line-heightは行全体の高さを決めるため、実際の文字の上下の空き方はフォントなどによって異なります。
line-heightの基本的な使い方
まずは、HTMLとCSSを使って行間を変更してみましょう。
HTMLの記述例
<p class="text-tight">
1行目の文章です。<br>
2行目の文章です。<br>
3行目の文章です。
</p>
<p class="text-normal">
1行目の文章です。<br>
2行目の文章です。<br>
3行目の文章です。
</p>
<p class="text-relaxed">
1行目の文章です。<br>
2行目の文章です。<br>
3行目の文章です。
</p>CSSの記述例
.text-tight {
font-size: 16px;
line-height: 1.2;
}
.text-normal {
font-size: 16px;
line-height: 1.5;
}
.text-relaxed {
font-size: 16px;
line-height: 1.8;
}この例では、文字サイズをすべて16pxに統一し、line-heightの値だけを変更しています。
表示結果
line-height: 1.2
1行目の文章です。
2行目の文章です。
3行目の文章です。
line-height: 1.5
1行目の文章です。
2行目の文章です。
3行目の文章です。
line-height: 1.8
1行目の文章です。
2行目の文章です。
3行目の文章です。
このように、同じ文字サイズでもline-heightの値によって行の高さが変わります。
1.2では行間が比較的狭く、1.8では広く表示されます。
最初は1.5程度から試し、文章の読みやすさに合わせて調整するとよいでしょう。
なお、上記は行間を比較するためにbrタグで改行しています。通常の文章では、画面幅に応じて自動的に折り返された行にもline-heightが適用されます。
line-heightで使う値と単位の違い
line-heightには、単位なしの数値やpx、%、normalなどを指定できます。
指定方法によって行の高さの決まり方が異なります。
| 指定方法 | 記述例 | 特徴 |
|---|---|---|
| 単位なし | 1.6 | 文字サイズに倍率をかける |
| px | 24px | 行の高さをCSSピクセルで指定する |
| % | 150% | 要素自身の文字サイズを基準に計算する |
| em | 1.5em | 要素自身の文字サイズを基準に計算する |
| normal | normal | フォントやブラウザーに応じた通常の高さ |
単位なしで指定する方法
p {
font-size: 16px;
line-height: 1.5;
}文字サイズが16pxの場合、行の高さは24pxになります。
単位なしの数値は、子要素への継承時にも扱いやすい指定方法です。
pxで指定する方法
p {
font-size: 16px;
line-height: 24px;
}この場合、行の高さは24pxです。
pxは行の高さを具体的な数値で指定したい場合に便利ですが、文字サイズが変更されても自動的に倍率を保つわけではありません。
%で指定する方法
p {
font-size: 16px;
line-height: 150%;
}この場合、16pxの150%なので、行の高さは24pxになります。
150%は、文字サイズの1.5倍を意味します。
normalで指定する方法
p {
line-height: normal;
}normalは、使用するフォントやブラウザーに応じて行の高さが決まります。
具体的な倍率を指定する方法とは異なり、必ず文字サイズの何倍になるという決まりはありません。
単位なしの数値がおすすめな理由
本文などの行間を調整する場合は、単位なしの数値を使うと管理しやすくなります。
理由は、親要素から子要素へline-heightを継承するときの動作にあります。
例えば、次のCSSを見てみましょう。
.article-text {
font-size: 16px;
line-height: 1.5;
}
.article-text h2 {
font-size: 24px;
}この場合、親要素のline-heightは1.5です。
子要素のh2にもこの倍率が継承されるため、h2の行の高さは24pxの1.5倍で36pxになります。
一方、親要素に次のように指定した場合はどうでしょうか。
.article-text {
font-size: 16px;
line-height: 150%;
}
.article-text h2 {
font-size: 24px;
}親要素の行の高さは24pxと計算され、その計算済みの値が子要素へ継承されます。
そのため、h2の文字サイズが24pxになっても、継承される行の高さは24pxのままです。
このように、単位なしの指定は子要素の文字サイズに合わせて行の高さを調整しやすい特徴があります。
文章を読みやすくするline-heightの設定方法
line-heightを使うときは、単に行間を広くするのではなく、文章の読みやすさを確認しながら調整することが大切です。
特に本文と見出しでは、適切な行の高さが異なる場合があります。
本文の行間を調整する
長い文章では、行間が狭すぎると次の行を目で追いにくくなることがあります。
本文では、line-heightを1.5〜1.8程度から試すと調整しやすいでしょう。
.article-body p {
font-size: 16px;
line-height: 1.7;
}この例では、文字サイズ16pxに対して、行の高さを27.2pxに設定しています。
ただし、1.7がすべてのサイトに最適というわけではありません。
使用するフォントや1行の文字数によっても、読みやすさは変わります。
見出しの行間を調整する
見出しは本文より文字サイズが大きく、短い文章で構成されることが多いため、本文より小さめの倍率が適する場合があります。
.article-body h2 {
font-size: 24px;
line-height: 1.3;
}この場合、行の高さは31.2pxです。
見出しが2行以上になる場合も考え、文字が窮屈に見えないか確認しましょう。
用途別のline-heightの目安
次の数値は、行間を調整するときの出発点として使える目安です。
| 用途 | 調整の目安 |
|---|---|
| 見出し | 1.2〜1.4 |
| 本文・長い文章 | 1.5〜1.8 |
| 箇条書き | 1.5〜1.8 |
| ボタンなどの短い文字 | 文字サイズやボタンの高さに合わせて調整 |
これらは固定のルールではありません。
文字サイズ、フォント、文章の長さ、画面幅などを確認して調整してください。
スマートフォンでも読みやすさを確認する
パソコンで読みやすい行間でも、スマートフォンでは印象が変わることがあります。
特に、画面幅が狭いと文章が頻繁に折り返されるため、行間の違いが目立ちやすくなります。
line-heightを設定したら、パソコンだけでなくスマートフォンでも実際の表示を確認しましょう。
line-heightとmarginの違い
CSSで文章の間隔を調整するとき、line-heightとmarginを混同することがあります。
この2つは役割が異なります。
| プロパティ | 主な役割 |
|---|---|
| line-height | 行の高さを調整する |
| margin | 要素の外側の余白を調整する |
例えば、次のCSSを指定します。
.article-body p {
line-height: 1.7;
margin-bottom: 20px;
}この例では、line-heightで文章の行の高さを設定し、margin-bottomで段落の下側に余白を設けています。
複数行の文章が詰まっている場合はline-heightを調整します。
一方、段落と段落の間隔を広げたい場合はmarginを使います。
なお、実際の段落間隔は、隣接する要素のmarginが相殺される仕組みなどによっても変わる場合があります。
初心者のうちは、まず「行の高さはline-height、段落間の余白はmargin」と覚えると理解しやすいでしょう。
line-heightが効かない・見た目が変わらない原因
line-heightを指定しても、期待したように行間が変わらない場合があります。
よくある原因を確認してみましょう。
文章が1行しかない
line-heightは1行の文章にも適用されますが、複数行の文章と比べると、行間の変化を確認しにくくなります。
まずは、2〜3行以上の文章を使って表示を比較しましょう。
ほかのCSSで上書きされている
同じ要素に複数のline-heightが指定されている場合、CSSの優先順位によって別の値が適用されることがあります。
p {
line-height: 1.5;
}
.sample-text {
line-height: 1.8;
}例えば、pタグにsample-textというclassが設定されている場合、通常はclassセレクタの指定が優先されます。
設定が反映されない場合は、ブラウザーの開発者ツールなどで、実際に適用されているCSSを確認しましょう。
インライン要素に指定している
spanタグなどのインライン要素では、line-heightを指定しても、周囲の行の高さが期待どおりに変わらない場合があります。
インライン要素のline-heightは、行全体の高さとの関係が少し複雑です。
まずはpタグなどのブロック要素に指定して、行間の変化を確認すると理解しやすくなります。
段落の間隔を調整しようとしている
文章の行間ではなく、段落と段落の距離を変更したい場合は、line-heightではなくmarginを調整しましょう。
line-heightの値を大きくしても、段落同士の間隔だけを独立して変更できるわけではありません。
セレクタやCSSファイルの指定が間違っている
class名の間違いや、CSSファイルの読み込み先が正しくない場合も設定は反映されません。
CSSを修正しても変化がない場合は、ファイルの保存状態やブラウザーのキャッシュも確認してください。
まとめ
今回は、CSSのline-heightを使って行間を調整する方法を解説しました。
重要なポイントは次のとおりです。
- line-heightは文章の行の高さを指定するCSSプロパティ
- 単位なし・px・%・em・normalなどで指定できる
- 単位なしの数値は子要素への継承時にも扱いやすい
- 本文では1.5〜1.8程度を目安に調整を始められる
- 見出しでは本文より小さめの倍率が適する場合がある
- 段落同士の余白はmarginで調整する
- パソコンとスマートフォンの両方で読みやすさを確認する
初めてline-heightを使う場合は、まず文字サイズを16pxにそろえ、1.2・1.5・1.8などに変更して表示を比較してみましょう。
実際にコードを書いて違いを確認すると、行間が文章の読みやすさに与える影響を理解しやすくなります。
なお、line-heightの適切な値は、フォントや画面幅によって異なります。数値だけで判断せず、実際の文章を読んで調整することが大切です。
次に読む記事
CSSのfont-sizeとは？文字サイズの指定方法を初心者向けに解説
→ HTML講座トップページへ
→ CSS講座トップページへ
