CSSで使われるline-heightについてその意味や使い方を紹介していきます。
line-heightは行間を調整する際に使う
CSSではWebページの配置や装飾などを整えることがメインで使われると思いがちですが、テキストを読みやすくするためにも使われます。
書体を変えたり、フォントサイズを変更したり・・・そして、ぱっと見て読みやすい文章だなとWebサイトの訪問者に感じてもらうためには行間の調整も必要になってきます。
その時に使用するのがCSSのline-heightというわけです。
height(高さ)からも分かるように段落の上下の行間を調整します。
line-heightの使い方
さっそくline-heightの使い方をみていきましょう。
まず、line-heightなしで書いてみます。
See the Pen text by code-school (@code-school) on CodePen.
何もしていない状態なので、上下が詰まって見えますね。
これに、フォントサイズとline-heightを指定してみましょう。
See the Pen text-line-height by code-school (@code-school) on CodePen.
詰まった印象がなくなり読みやすくなったのではないでしょうか？
ちなみに、font-sizeで20pxを指定しline-heightで28pxを指定した場合には上下に4pxずつ行間が指定されます。
line-heightのおすすめ設定方法
ここまでline-heightの使い方を紹介しましたが、実際の現場ではpxで指定するのではなく値で指定するのがおすすめです。
pxで指定した場合は絶対的な値になってしまいます。フォントサイズが変われば表示のずれが出てきますのでpxではなく単位なしで指定する方がおすすめです。
具体的な書き方としては、
|
1 2 3 4 |
p{ font-size:20px; line-height:1.5; } |
このように書く方がメンテナンスもしやすいです。
この時の値を1にした場合は上下に余白が生まれませんので、だいたい1.5くらくの設定がおすすめです。