今回はCSSのプロパティ「line-height」について解説します。
コーディングをしているとline-heightを使用することは多いと思いますが、しっかりと理解していないと「デザインカンプとなんか違うぞ？」となりかねません。
注意点も含めて図を用いて説明していきますので一緒に理解を深めていきましょう。
目次
line-heightプロパティについて
「line-height」プロパティは、行の高さの最小値を指定するプロパティで、値を継承するプロパティです。
いわゆる「行間」と言われる部分を指定する際に使用します。
Webデザインでの行間は1.5から2.0が適切で、その理由は読み手のストレスを軽減して可読性を上げるためだと言われています。
上の図で言うと水色がfont-sizeの範囲、ベージュの線から線までがline-heightの範囲です。
line-heightを0にするとfont-sizeの範囲とline-heightの範囲が同じになり、余白がなくなります。
反対に、値を大きくすればするほどfont-sizeの範囲とline-heightの範囲の間に余白が生まれます。
line-heightプロパティを使用する方法
「line-height」で使用する際の書き方は下記のものがあります。
- nomal
- 実数（単位なし）
- 実数＋単位
- パーセンテージ
初期値は「nomal」です。
nomalはユーザーの環境に依存しますが、だいたいは1.２という既存値を使います。
初期値から変更する場合は下記のように記述します。
line-height: 1.8;上のコードは実数（単位なし）の記述例です。
実数＋単位だと下のようになります。
line-height: 1.8rem;パーセンテージだと下のようになります。
line-height: 150%;この中でも特徴的なのは、「実数（単位なし）」が使用できるということです。
CSSのプロパティの中で単位なしの実数を使用できるものは珍しいので、合わせて覚えておきましょう。
line-heihtプロパティの注意点
line-hieghtプロパティには注意点があります。
それは、単位の付け方です。
line-heightプロパティは一般的に「実数（単位なし）」で使用することが望ましいとされています。
理由は、単位をつけると予期せず文字が潰れてしまうこともあるからです。
具体的にイメージできるように、図を見てみましょう。
line-heihtプロパティを間違えて指定した場合の例
左は「実数（単位なし）」、右は「実数＋単位（rem）」で指定したものです。
右は文字がなんて書いてあるのかわかりませんね。
文字の大きさ36pxに対して、行の高さは24pxになっているので文字がぶれてしまっています。
では、なぜこのように潰れてしまったのでしょうか。
line-heightプロパティを間違えて指定した場合の解説
この原因はline-heightプロパティに「rem」を使用していることです。
「1rem = ルート要素を基準にした相対的な値」なので、デフォルトの設定の場合は16pxになります。
その16pxを基準に計算をしてしまっているので、文字の大きさに関係なく、行の高さ24pxという値が出てきてしまったということです。
一方、左側は単位を使用しない実数で記述してあり、文字の大きさ36pxに対して1.5倍の高さ54pxを行の高さに指定しています。
このようにline-hieghtプロパティに実数を指定した場合は、指定された要素のfont-sizeを単純に実数で掛け算します。
継承するプロパティなので、body要素にline-heightプロパティを実数で指定すれば、要素毎にfont-sizeに合わせて行の高さが自動的に計算されます。
何度も記述しなくて良いので簡単で便利、さらにメンテナンス性も上がります。
line-heightプロパティは実数以外でも指定できるけど、やっぱり・・・
もちろん実数以外にもしっかりと実装する方法はあります。
例えば、
font-size: 36px;
line-height:1.5em;このようにfont-sizeと「em」を使用する方法。
同じようにパーセンテージでも実装できます。
emやパーセンテージは親要素の値を参照するので、文字を潰すことはないでしょう。
しかし、これをbody要素で指定してしまうと話は変わります。
line-heightプロパティの値として継承されるのは、body要素のfont-sizeをもとに計算された後の値です。（計算後の値が17.5pxの場合は、line-height: 17.5pxが継承される）
なので、どこかで意図しない崩れた表示になる可能性が高いです。
これらのことから、line-heightプロパティは基本的に実数（単位なし）で記述することが望ましいとされています。
まとめ
今回はCSSのプロパティ「line-height」について解説しました。
基本的に実数（単位なし）で記述することが望ましいとされている理由は、継承するときの値に違いがありましたね。
- 単位ありの場合 → 計算した後の値を引き継ぐ
- 単位なしの場合 → 倍率を引き継ぐ
今後line-heightプロパティを使用する際は、以上の特徴を頭に置いて使用してみてください。
また、時間があるときは実際に記述してみて単位による行の高さの違いを感じてみるのもオススメです。
その他の記事
【CSSのみ】ページ内リンクでコンテンツを画面中央にする方法
今回は、ページ内リンクで遷移先のコンテンツを、画面中央に配置するテクニックを紹介します。JavaSc…
【CSS】絶対単位と相対単位について
今回はWebサイトを制作する際に使用する「絶対単位」と「相対単位」を説明します。初めての方にもわかる…
【HTML/CSS】横スクロールできる表（テーブル）の作り方
今回は、HTMLとCSSで横スクロールできる表の作り方を解説します。スマホ環境ですと表が入りきらない…
