Que.howCategoryプライバシーポリシー

行間・行の高さの設定 | CSS

行間、行の高さを設定するには、CSSの line-heightプロパティを使用します。値には数値を設定しますが、単位なしが一般的です。

line-height は、テキストの上下に余白を設定するプロパティであり、(値 - フォントサイズ) / 2 が片方の余白の大きさとなります。単位なし数値を設定した場合、フォントサイズとの比率となります。

HTML
1
2
3
<p class="l10">行の高さ1<br>行の高さ1</p>
<p class="l15">行の高さ1.5<br>行の高さ1.5</p>
<p class="l20">行の高さ2<br>行の高さ2</p>
CSS
1
2
3
4
5
6
7
8
9
.l10 {
    line-height: 1;
}
.l15 {
    line-height: 1.5;
}
.l20 {
    line-height: 2;
}
Preview

上の例のように、値として1を設定すると、行の高さはフォントサイズと同じになるので、行の間隔はゼロとなります。

1.5の場合は、フォントサイズが16pxの場合、(16 × 1.5 - 16) /2 = 4 となるので、テキストの上下に 4px ずつ、余白が設定されます。

2を設定すると、行と行の間に、1行分の余白が設定されます。

1.5を設定した場合の余白のイメージは、以下のようになります。青色の部分が余白であり、line-height は、青色と灰色の高さを合わせたものとなっています。

Preview

Category
  1.  > プログラミング
  2.  > ウェブサイト
  3.  > CSS
  4.  > 入門