CSSのline-heightを使って行間を調整しよう!余白の調整方法も解説
CSSのline-heightプロパティは、テキストの行送り(行の高さ)を指定するプロパティです。
適切に設定することで、読みやすさを向上させたり余白の調整を行うことができます。
この記事では、line-heightプロパティの基本的な使い方や「1行目の上に開いてしまう余白を消す方法」「垂直方向中央揃え」など、Webデザインにおいてよく行われる指定の仕方まで詳しく解説します!
目次
line-heightの基本
line-heightは、文字の行の高さ(行送り)を指定するプロパティです。
以下のように指定できます。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
上の設定では、行の高さが「フォントサイズの2倍」になり、行間が一文字分空きます。
line-heightの指定方法と単位
line-heightは、次のような単位で指定できます。
指定方法 | 記述例 | 説明 |
---|---|---|
数値(推奨) | line-height: 1.5; | フォントサイズの1.5倍として計算 |
パーセント | line-height: 150%; | フォントサイズの150% |
長さ(px, em, remなど) | line-height: 24px; | 固定値で指定 |
normal(初期値) | line-height: normal; | ブラウザのデフォルト値(約1.2~1.4) |
基本的には、数値で指定する方法(line-height: 1.5; など)が推奨されます。
この指定方法は親要素のフォントサイズに依存しないためです。
パーセントやemなどは、親要素のフォントサイズが子要素に引き継がれてしまうため、親要素と子要素のフォントサイズが異なる場合、行間が崩れてしまう可能性があります。
1行目の上の余白をなくす方法
「line-heightを設定すると、1行目の上に余白ができる」と感じることがあります。これはフォントのデフォルトのline-heightが原因で、テキストの中央に配置される仕様のためです。
解決策::first-line擬似要素で調整
CSSの:first-line擬似要素を使い1行目のみline-heightの値を調整することで解決ができます。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
上の設定では、行の高さを「フォントサイズの2倍」に指定した上で、「1行目のみフォントサイズの等倍」に指定することで、1行目の上に空いてしまう余白を消しています。
1行テキストの垂直方向中央揃え
1行のテキストを要素内の垂直方向中央揃えにしたい場合、heightプロパティとline-heightプロパティに同じ値を指定します。(heightプロパティのみ指定した場合、テキストは上に配置されます)
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
注意:複数行の場合の垂直中央揃えについて
テキストが複数行ある場合、heightプロパティとline-heightプロパティに同じ値を指定すると下のような結果になってしまいます。
Result画面をスクロールしてみてください。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
1行目のテキストは垂直中央揃えになっていますが、行間ができてしまうため2行目と3行目のテキストが要素からはみ出してしまいますね。
複数行の場合にはdisplay: flexなどを利用して垂直中央揃えを指定することをおすすめします!
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
display: flexを指定することで、align-itemsプロパティとjustify-contentプロパティを使い中央揃えが表現できます。
display:flexについて詳しく知りたいという方はこちらの記事をご覧ください!
もうdisplay:flexで悩まない!初心者向けCSSレイアウト徹底解説
最適な(読みやすい)line-heightの値
一般的line-heightの値は、本文などの場合1.5〜2程度が最も読みやすいとされています。
そのようにデザインされる場合も多いため、この辺りの値を使うことが多い印象です。
この数値よりも大きいと行同士が離れ過ぎてしまい、文章が読みづらくなってしまいます。
逆に小さいと行同士がくっついてしまい窮屈でこれも読みづらくなってしまいますよね。
See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.
まとめ
いかがでしたでしょうか?
line-heightを効果的に使用することで、読みやすい文章のデザインができます!
また余白の調整する際には他のプロパティと組み合わせるなどの工夫が必要ですので、ぜひ参考にしてみてください。
STUDIO NNC 合同会社ではコーディングのみなど部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からデザイン、ワードプレス構築まで一貫した制作を得意としております。ご相談がございましたら、お気軽にフォームよりお問い合わせください!