【CSS入門】行間を調節する方法、line-heightで簡単調整
文章の行間を調節することで、デザイン性と読みやすさをアップすることができます。
行間が詰まりすぎていると非常に読みづらくなってしまうので、必ず調節しましょう。
アツシ
初心者の方でも分かるように、CSSでの行間の調節方法を解説していきます。
目次
CSSで行間を指定する方法
使用するのは「line-height」というプロパティです。
CSS
- { line-height: 値; }
↑のように指定することで行の高さを調節できます。
行の高さは「フォントサイズ」と「上下の余白」を足した値です。
CSSで行間を指定するための値と単位
指定する単位によって実際の表示が変わってきます。
- normal
-
初期値
ブラウザが自動で指定する - 数値＋px
- ピクセルで固定値を指定する
- 数値＋em
- 指定された要素または親要素の文字サイズの相対値で固定値を指定する
- 数値＋%
- 指定された要素または親要素の文字サイズのパーセントで固定値を指定する
- 数値のみ
- 適用する箇所の文字サイズの倍率で指定する
単位を指定した場合は一見相対的に指定したつもりでも、固定値として子孫に継承されていく。
そのため、最近では数値のみで指定することが一般的な指定方法となっています。
アツシ
数値のみでの指定がおすすめ！
おすすめの値
おすすめの値は「1.5〜2」の間。
実際に指定すると↓のようになります。
line-height: 1.5; で指定
行間の指定方法
文章の行間は「line-height」で指定する
単位をつけず、数値のみで指定するのが一般的です。
line-height: 1.6; で指定
行間の指定方法
文章の行間は「line-height」で指定する
単位をつけず、数値のみで指定するのが一般的です。
line-height: 1.8; で指定
行間の指定方法
文章の行間は「line-height」で指定する
単位をつけず、数値のみで指定するのが一般的です。
line-height: 2; で指定
行間の指定方法
文章の行間は「line-height」で指定する
単位をつけず、数値のみで指定するのが一般的です。
まとめ
記事の読みやすさや、デザイン性を高めるためにも、「行の高さ」を指定しよう。
指定する際には、単位は使わず、数値のみで指定すると、フォントサイズを変えるたびに指定し直す必要も無くなります。
「line-height」は数値のみで指定してCSSもスタイリッシュに！
ではでは〜