1. TOP
  2. html&CSS入門
  3. 行間を整える「line-height」(ラインハイト)の使い方

行間を整える「line-height」(ラインハイト)の使い方

行間とは、行と行の間の高さの設定で、文書の読みやすさを左右する大事なポイントです。

行間が詰まっていると読みづらいさを感じますし、逆に広すぎると読むのことにストレスを感じさせてしまいます。

しっかりと文書を読んでもらいたい場合は、行間は非常に重要なポイントになってきます。

行間の設定の仕方

行間を調整するには、line-heightプロパティを使ます。「line-height:値」という形で行間の高さを指定します。

line-height: 1.5;

初期値だと狭く感じることが多いのでなるべく設定するようにしましょう。

line-hrightの仕組み

line-heightは行間を設定するプロパティですが、実際には行の高さの値を定めるものです。

例えば「line-height:2」とした場合は、行の高さは文字の大きさの2倍という意味になります。2のうち1は文字の高さ、残りの1は0.5ずつが上下の余白として割り振られます。

例えば、フォントサイズが20pxの場合、行の高さはその2倍の40pxとなります。20pxは文字でしめられますが、残りの20pxを上下に10pxずつ割り当てられます。

フォントサイズより小さいline-heightを設定すると、行の高さが足りず、文字が重なってしまうので注意しましょう。

line-heighの数値

line-heightの値にはいくつかの設定方法があります。

normal

line-height: normal;

ブラウザの初期値で、何も設定しない場合もこのnormalが適用されます。normalの行間がどれくらいかは、ブラウザごとに違いますが、だいたい1.2~1.5が適用されます。

単位なし

line-height: 1.5;

単位なしで指定すると、フォントサイズに対する割合になります。1の場合文字の大きさと同じ、1.5の場合文字の大きさの1.5倍という風になります。

%指定

line-height: 150%;

%で指定すると、フォントサイズに対する割合になります。100%の場合文字の大きさと同じ、150%の場合文字の大きさの1.5倍という風にになります

em指定

line-height: 1.5em;

emで指定すると、フォントサイズに対する割合になります。1emの場合文字の大きさと同じ、1.5emの場合文字の大きさの1.5倍という風になります。

px指定

line-height: 20px

pxで指定すると、フォントサイズに関係なく指定したpxに行の高さを設定できます。

文字の大きさよりも、小さい行間を指定してしまうと、文字が重なってしまうので注意しましょう。

基本は「単位なし」を使おう

特に特別な理由がなければ「単位なし」で指定します。

pxで指定すればわかりやすいような気がしますが、WEBサイトにはいろんなフォントサイズが使われるので、px指定だと一つ一つに最適なline-heightを設定しなければなりません。

ですので、その時のフォントサイズの何倍か指定できる「単位なし」を使うと非常に管理が楽ですし、大概のところはそれで綺麗に整います。

どうしても気になる所があれば、そこだけ別途指定するようにしましょう。

em,%は使わない方が良い

em,%は使わない方が良いでしょう。

「単位なし」と同じようにフォントサイズの何倍かを指定できますが、emや%の場合、親要素で計算された倍率が、そのまま子要素にも反映されてしまいます。

つまり、親要素が40pxで行間に150%、つまり行間60px相当を指定すると、その子要素にも行間60pxが引き継がれてしまうのです。

これでは子要素のフォントサイズが小さくなれば見た目がおかしくなってしまいます。

一方「単位なし」が親要素に指定されている場合は、親要素のフォントサイズがどうであれ、対象の子要素のフォントサイズを基準に計算されるので上記にような現象が起こらず便利です。

おすすめのline-heigt

一般的に読みやすい行間は、文字の1.5倍から1.8倍くらいが良いとされています。ine-heigntの値にすると1.5〜1.8です。

これより小さかったり大きかったりすると途端に読みづらくなるのが感じられると思います。

まとめ

  • 行間は文書の読みやすさを左右する大事なポイント
  • 行間を調整するには、line-heightプロパティを使う
  • 初期値だと狭く感じることが多いのでなるべく設定する
  • 基本は単位なしを使う
  • 一般的に読みやすい行間は、文字の1.5倍から1.8倍くらい