CSSのline-heightを使って行間を簡単に設定しよう

line-heightを設定しよう

行の高さを調整できるline-heightの紹介でーす。

ホームページやブログを作る時に必ず使うプロパティだと思いますが、使っているとline-heghtが効かなかったり 単位あり・なしどっちの方がいいのかな??なんて思う時が来ると思います。 ですので、そのへんを踏まえて紹介していきたいと思います!

目次
line-heightプロパティの使い方
em、%を使う時の注意点

line-heightプロパティの使い方

line-heightは行の高さを指定できるプロパティです。 例えば、font-sizeプロパティで10pxを指定したとします。 そしてline-heightで16pxを指定した場合、行の高さ16px(line-height)から文字の大きさ10px(font-size)を引いた残りの6pxが行間として上下に3xpずつ割り振られます。

(「line-heightの数値」-「font-sizeの数値」)÷ 2 = 上下の行間

またfont-sizeの値より行の高さ(line-height)が小さい場合は、行が重なって表示されます。

設定できる値 意味
数値のみ 数値のみで指定した場合、指定した数値にフォントサイズを掛けた値が行の高さとなる
数値に単位をつけて指定 数値にpxやemなどの単位を付けて指定する
パーセンテージ(%) 110%のように数値に%をつけて指定する
normal 行の高さをブラウザが判断する(初期値)

表示例

.example {line-height: 1.5;}
.example2 {line-height: 15px;}
.example3 {line-height: 150%;}
.example4 {line-height: normal;}
( .example ) あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
( .example2 ) あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
( .example3 ) あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
( .example4 ) あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん

em、%を使う時の注意点

フォントサイズで設定したサイズを「1」として扱うemや%を指定する場合は、line-heightは下のようになります。

p {font-size: 10px;}
p {line-height: 1.5em;}

この場合行の高さは「15px」

p {font-size: 10px;}
p {line-height: 150%;}

この場合行の高さは「15px」

フォントサイズが10pxなので、この場合どちらも1.5倍の15px(行の高さ)になります。

ですが、body要素全体のフォントサイズと行の高さを指定した場合、body要素に含まれる特定の部分のフォントサイズを大きくすると 行間に文字が入りきらずに文字と文字が重なってしまう場合があります。

表示例

body{
  font-size:10px;
  line-height:1.5em;
}
p{
  font-size:30px;
}
こんな感じにbodyようそに設定した行の高さに文字が入りきらず、重なってしまう事がある

上ではbody要素の行の高さを15px(1.5emなので)に設定しています。 ですがbody要素内のpのフォントサイズは30pxに設定されてます。

こういう場合pの行の高さは15pxになっていますので、文字のサイズが30pxでは行間に文字が収まりません なので収まらない分がはみ出し、文字同士が重なってしまうわけです。

こういうような場合は、bodyのline-heightに「emや%」を付けずに数値のみで指定します。 例えば「line-height:1.5;」のような感じで。

こういうようにすると、対象のすべての要素のフォントサイズに設定した数値「1.5」を掛けた値が行間として設定されます。 なので文字が重ならなくなるというわけです。

表示例

body{
  font-size:10px;
  line-height:1.5;
}
p{
  font-size:30px;
}
こんな感じにbodyようそに設定した行の高さに文字が入りきらず、重なってしまう事がある

こういうように数値のみにしておけば、「1.5(設定した数値) × 30px(フォントサイズ)= 45px(行の高さ)」というようになるので、ぴったり綺麗におさまります。 もしくは、それぞれの部分にline-heightを設定してもいいのですが、面倒なのでこういうように単位なしの数値で設定しておくのが無難です(#^^#)

line-heightが効かない場合

特定の場所だけline-heightを設定したのに効かない!行間が詰められない!なんて時があるかと思います。 おそらくそういう場合は、インライン要素にline-heightを設定してしまっている可能性が高いです。 たとえばspanとか。

そういう場合は、line-heighを設定したい要素にdisplay:block;も追加して下さい。

span{
  line-height:1;
  display:block;
}

こうする事で思ったような行間になります。 ちなみにspan以外のインライン要素の場合も同じです。

効かない原因

CSS の line-height プロパティは、ブロックレベル要素に含まれるラインボックスの、最小の高さを定義します。非置換インライン要素では、line-height は行ボックスの高さの計算に使われる、高さを定義します。

上のようにブロック要素とインライン要素とでは、line-heightの使われ方が違います なのでspanなどのインライン要素に設定しても、反映されてはいます。 ですがブロック要素とインライン要素とでは、line-heightの計算の仕方が違っているので効いてないように感じちゃうんです。

以上「line-heightについて」でしたー(#^^#) あ!それと「paddingしたのに、隙間ができるんだけどw」って時は、おそらくline-heightを調整すると解決すると思いますので、色々試してみて下さいね(^^♪