TOP ＞ スタイルシートで文字をデザイン ＞ 行の高さを指定する
行の高さを指定する
Webページで、文章が長くてページ幅ないに収まらない場合は、折り返して表示されることになります。
この場合、問題になるのは行と行の間隔です。この間隔が大きすぎれば間延びした感じになってWebページが締まりませんし、 かといって間隔が小さすぎれば、文字が近すぎて読みにくいです。
そこで、スタイルシートを使って行と行の間隔を調整してみましょう。
スタイルシートで行間隔を調整するには、line-heightプロパティを使用します。
値をpt（ポイント）やpx（ピクセル）で指定した場合、それが一行の高さになります。この値が文字の高さよりも大きければ、 行と行の間隔は開きます。逆に小さければ、行と行が重なって表示されることになります。
高さをパーセントで指定することも可能です。この場合は、その要素のフォントサイズに対するパーセンテージを返します。
値を「normal」とすれば、通常の行間隔となります。（デフォルトは「normal」です。）
行の高さを指定する
【書き方】
line-height : 間隔の値;
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 body{font-size: 15pt;} .c1{line-height: 20pt; background-color: #99cc99;} .c2{line-height: 10pt; background-color: #cc9999;} .c3{line-height: 120%; background-color: #9999cc;} 【HTML本文】 <html> <head> <title>行の高さを指定する場合のサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/216.css" type="text/css"> </head> <body bgcolor="silver"> <p>スタイルシートを使って行の高さを指定してみます。body要素のフォントサイズは15ptに設定しています。</p> <p><span class="c1">行間を20ptに設定しています。body要素のフォントサイズは15ptですから、行と行の間に5ptの隙間が出来るはずですが、いかがでしょうか？一行で表示されていて良く分からない場合は、ブラウザを縮小して、幅を狭めてみてください。</span></p> <p><span class="c2">行間を10ptに設定しています。body要素のフォントサイズは15ptですから、行と行が重なって表示されるはずです。いかがでしょうか？一行で表示されていて良く分からない場合は、ブラウザを縮小して、幅を狭めてみてください。</span></p> <p><span class="c3">行間を120%に設定しています。行間が少しだけ広がっていますね？120%ですから行の高さは18pt相当になっているはずです。いかがでしょうか？一行で表示されていて良く分からない場合は、ブラウザを縮小して、幅を狭めてみてください。</span></p> </body> </html> |
[
スタイルシートで文字をデザイン ]
