<< スタイルシート(CSS) フォントの太さ font-weight | Home | スタイルシート(CSS) 行揃え text-align >>

スタイルシート(CSS) フォントの行間隔 line-height

行間を指定するには、line-heightプロパティを使います。

フォーマットは次の通りです。

line-height: 行の高さ;

行の高さには、次のような指定方法があります。

normal: 通常の行間隔で初期値です。

数値: ここで指定した数字にフォントのサイズを掛けた値が、行間の高さになります。

%: %で指定するとフォントのサイズに対する割合が、行間の高さになります。

単位付きの数値: font-sizeで指定できるpxやemなど単位付きの数値が使用できます。

このうちnormalの指定は、通常の行間隔ですので詳細は省きます。


数値での指定は、半角の数値で指定します。

2.0と指定するとフォントサイズに2.0を掛けた値が行間隔で、1.5を指定するとフォントサイズの1.5倍の値が行間隔の値です。


%での指定は、100%が初期値と考えて下さい。これより大きい値は行間隔が広がります。
100%未満の値で指定すると行間隔が狭くなりますが、数値が小さくなると上下の行が重なることがあります。


単位付きの数値で、pxでの指定の場合はフォントサイズの値から指定した数値を引いた値が行間隔になります。
フォントサイズよりもline-heightで指定した数値が小さいと上下の行が重なることがあります。

いずれの指定値でもマイナスの指定は出来ません。


次のような指定は、フォントサイズが同じとすると、すべて同じ表示になります。

line-height: 1.2;
line-height: 1.2em;
line-height: 120%;


注意が必要なのが、古いブラウザの中には、単位のない数値で指定すると行間が重なってしまうなどのバグがあります。

Calendar

    123
45678910
11121314151617
18192021222324
25262728   
<< February 2018 >>

Recent Entries


Categories


Archives


Profile


Valid XHTML 1.0 Transitional

Valid CSS!

Comments

Leave Comment










Trackbacks

Trackback URL

Recent Comments

Recent Trackbacks