どうも！ニシドラ(@nishidorablog)です。
この記事では、行間の幅を変えるline-heightプロパティについて解説します。
line-heightプロパティとは、行間の幅を変えるプロパティです。
行間の幅が狭いと文章が詰まったような印象を与え、読みづらくなりますので、line-heightプロパティを指定して読みやすい文章にしましょう。
line-heightプロパティとはどんなプロパティなのかと指定する値、値を使うときの注意点やルールについて解説していきます。
当ブログ(ニシドラブログ)では、他にもCSSの使い方について解説をしています。
line-heigthプロパティとは？
「line-heigthプロパティ」を指定することで、行間の幅を変えることができます。
「heigth」とは、英語で「高さ」を表しています。
値を指定する方法は「normal」「フォントサイズとの比率で指定する方法」「px、%、emなどの単位で指定する方法」の3種類あります。
指定する値と使い方
normalで指定する方法
「normal」はline-heightプロパティの初期値です。
指定すると、ブラウザが判断した行間にすることができます。
フォントサイズとの比率で指定する方法
フォントサイズとの比率で指定するときは、単位を付けずに数値だけを記述します。
数値だけを記述した場合、数値とフォントサイズを掛け合わせた値分行間の幅を変えます。
pタグに「lh1」というクラス名を付けて、line-heightプロパティを指定してみます。
ブラウザ上で表示させると上画像のように、クラス名「lh1」に「line-height: 2」を指定すると行間の幅が変わりました。
なお、目視ではわかりにくいですが上と下の行間を比べると、2倍下の方が広くなっています。
px、%、emなどの単位で指定する方法
「px」や「%」「em」などの単位で指定することもできます。
下の記事でこれらの単位について解説しているので興味があればぜひ読んでみてください。
「px」で指定すると、指定したピクセル分行間の幅が変わります。
また、「%」「em」で指定した場合、親要素を基準に行間が変わります。
pタグにそれぞれ「lh1」「lh2」「lh3」というクラス名を付けて使い方の解説をします。
lh1には「50px」、lh2には「150%」、lh3には「2em」をline-heigthプロパティで指定します。
.lh2 { line-height: 150%; }
.lh3 { line-height: 2em; }
ブラウザ上で表示させると上画像のようになります(文字の幅がわかりやすいように色を付けています)。
指定した値によって幅が違うのがわかると思います。
使うときの注意点
line-heightプロパティで単位を入れて指定する場合に注意する点があります。
それは、指定する値によって文字が被ってしまうことがあります。
下画像では、文字のサイズが20pxでline-heigthに10pxを指定した結果です。
どうして文字同士が被ってしまったかというと、文字サイズより小さい値を指定したからです
なので、line-heigthプロパティで単位を入れて指定する場合は文字サイズ以上の値を入れるようにしましょう。
まとめ
これまで「line-heightプロパティ」について解説してきました。
このline-heightプロパティはあまり頻繁に使われるようなプロパティではありませんが、使い方を覚えていないと、いざ使うとなったときに混乱してしまいます。
注意点に気を付けながら使いながら覚えていきましょう。
次回は、text-alignプロパティについて、【text-alignプロパティ】CSSで文章の位置を指定する方法で解説します。
コメント