CSSでテキストの行間を綺麗に調整する方法【line-height / 擬似要素】

WEBデザインやコーディングにおいて、テキストの行間（行の高さ）は読みやすさやデザインの美しさに大きな影響を与えます。
本記事では、CSSのline-heightプロパティや擬似要素を活用して、テキストの行間を調整する方法を詳しく解説します。

基本的なline-heightの使い方

1. 値の指定方法

line-heightは以下のように指定できます。

• 数値指定
  p{
　line-height: 1.5;
}親要素のフォントサイズを基準にした相対値です。
• 固定値（pxやemなど）
  p{
　line-height: 1.5px;
}固定の行の高さを設定します。
• パーセンテージ指定
  p{
　line-height: 150%;
}フォントサイズの割合として行の高さを指定します。

以下は行間を指定した各テキストの出力結果です。

See the Pen 行間の指定の違い by 小林祐也 (@ulfntssw-the-animator) on CodePen.

2. 実践例

以下は、line-heightの値による違いを示した例です。

<p style="font-size: 16px; line-height: 1;">行間が狭いテキスト</p>
<p style="font-size: 16px; line-height: 1.5;">適度な行間のテキスト</p>
<p style="font-size: 16px; line-height: 2;">広めの行間のテキスト</p>

擬似要素を活用した行間のカスタマイズ

line-heightだけでは対応できないデザインの調整が必要な場合、CSSの擬似要素を使う方法も有効です。擬似要素を使うことで、行間に装飾や間隔を追加することが可能です。

1. 擬似要素で行間を作る

::beforeや::afterを使い、行間に視覚的な空間を加える方法です。

p::before {
  content: "";
  display: block;
  margin-bottom: 10px; /* 行間の調整 */
}

p::after {
  content: "";
  display: block;
  margin-top: 10px; /* 行間の調整 */
}

これにより、テキストの上下にスペースを挿入できます。
擬似要素で余白を作る場合、marginを使用することで上下の空間をフラットに調整できます。

See the Pen Untitled by 小林祐也 (@ulfntssw-the-animator) on CodePen.

まとめ

テキストの行間調整は、単純にline-heightを設定するだけでなく、場合によっては擬似要素を活用してデザインを工夫することが重要です。
本記事を参考に、読みやすく美しいデザインを実現してください！