CSS

CSS's line-height is a property that adjusts the height of the space between lines of text.

line-height

　想像してみてください。あなたが本を読んでいるとき、文字がぎゅうぎゅう詰めで書かれていたら、読みにくいですよね？でも、文字の間や行の間に適切なスペースがあると、ずっと読みやすくなります。これが line-height、つまり「行の高さ」がウェブページで果たす役割です。

　line-heightは、文字が縦にどれくらいのスペースを取るかを決める CSSの設定です。この設定を使うと、行と行の間の空間（行間）を調整できます。例えば、行間を広げたい場合は line-heightを大きく設定します。逆に、行間を狭めたい場合は line-heightを小さくします。

　ここで大切なのは、line-heightをどのように設定するかです。line-heightにはいくつか設定方法がありますが、基本的には３つの方法がよく使われます。

数値

例えば 1.5 のように設定します。これは、フォントサイズの 1.5倍の行間を意味します。フォントサイズが 10px なら、行間は 15px になります。

パーセンテージ

フォントサイズに対するパーセンテージで行間を指定します。150%のように設定すると、フォントサイズの 150%の行間になります。

単位付きの値

em や px などの単位を使って直接行間を指定します。2em や 24px のように設定できます。

　行の高さとフォントサイズの関係ですが、 例えば line-heightが 20pxで font-sizeが 14pxの場合、20px（行の高さ）から14px（フォントサイズ）を引いた残りの6pxが、行間として上下均等に3pxずつ割り振られます。

Sample

<div class="smpBox">
	<p class="normal-line-height">このテキストはデフォルトの行間で表示されています。line-heightが normal に設定されているため、ブラウザのデフォルトの行間が適用されます。</p>

	<p class="small-line-height">このテキストは狭い行間で表示されています。line-heightが 1.2 に設定されているため、テキストの行間が狭まります。</p>

	<p class="large-line-height">このテキストは広い行間で表示されています。line-heightが 2 に設定されているため、テキストの行間が広がります。</p>
</div>

/* 最大幅の設定 */
.smpBox {
	max-width: 400px;
}

/* デフォルトの行間 */
.normal-line-height {
	line-height: normal;
}

/* 行間を狭くする */
.small-line-height {
	line-height: 1.2;
}

/* 行間を広くする */
.large-line-height {
	line-height: 2;
}