CSSのline-heightとは？使い方をあわせて紹介

CSSで使われるline-heightについてその意味や使い方を紹介していきます。

line-heightは行間を調整する際に使う

CSSではWebページの配置や装飾などを整えることがメインで使われると思いがちですが、テキストを読みやすくするためにも使われます。

書体を変えたり、フォントサイズを変更したり・・・そして、ぱっと見て読みやすい文章だなとWebサイトの訪問者に感じてもらうためには行間の調整も必要になってきます。

その時に使用するのがCSSのline-heightというわけです。

height(高さ)からも分かるように段落の上下の行間を調整します。

line-heightの使い方

さっそくline-heightの使い方をみていきましょう。

p { 
font-size:20px;
line-height:1.5;
}

このようにpタグなどに対して、行間の高さを指定していきます。

line-heightのおすすめの値

それぞれですが、個人的には1.5〜2くらいの値がちょうど良いかなと思います。

行間がないのはテキストが詰まり過ぎるのでNG。逆に行間が開きすぎているのもNG。

ちなみに弊サイトでは2で設定しています。