【CSS】line-heightプロパティで行の高さを調整する

プログラミング

line-heightプロパティ

CSS(スタイルシート)のline-heightプロパティは、行の高さの最小値を調整することのできるプロパティです。
文字が主体となったウェブサイトでは、行の高さが低いと読みにくいため、ある程度の高さに設定をすることで離脱率を低くすることが期待できます。

行の高さは「font-size」より上と下に作る余白となります。
line-height」を0に設定をすると、「font-size」と「line-height」の範囲が同じになり、余白がなくなります。

line-heightの書き方

line-height: 値;

line-heightプロパティの値

指定方法内容
normal初期値。既定値は1.2。
実数(単位なし)指定したフォントサイズ×数値
この書き方が推奨されています
実数(単位あり)px、em、%などで指定します

line-heightの記述例

<p class="height2">1段落目の文章</p>
<p class="height2">2段落目の文章</p>
<p class="height3">3段落目の文章</p>
<p class="height3">4段落目の文章</p>
/* 基準の文字サイズの2倍を指定 */
.height2 {
    line-height: 2.0;
}

/* 基準の文字サイズの3倍を指定 */
.height3 {
    line-height: 3em;
}
タイトルとURLをコピーしました