line-height

CSSプロパティ「line-height」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

line-height

行の高さを指定するプロパティ。

値を指定することで、行間を狭めたり広げたりすることができる。なお、line-heightで指定した値がfont-sizeよりも小さい場合は、行が重なって表示される。

数値で指定 px、pt、em等の単位で数値を指定。
%で指定 標準で指定された行の高さに対する値を%で指定。

使用例 - サンプル(A) / サンプル(B)

サンプル(A)

[CSSの記述]

.sampleA { line-height:30px; }

[HTMLの記述]

<p class="sampleA">テキストテキスト</p>

[ブラウザ上の表示]

line-heightの値を30pxに指定した場合、
行間はこのくらい広がります。
文字数が多い場合、行間を広げると見やすくなりますね。

サンプル(B)

[CSSの記述]

.sampleB { line-height:500%; }

[HTMLの記述]

<p class="sampleB">テキストテキスト</p>

[ブラウザ上の表示]

line-heightの値を500%に指定した場合、
行間はこのくらい広がります。
行間を広げすぎると見づらくなってしまいます。