行間隔
(line-height)
ブラウザにもよりますが、日本語を表示させると異常に行の間隔が詰まって見えませんか。スタイルシートを使うと、自由に行の間隔を調整できます。
line-height:値;
行間隔を指定するには line-height属性に値を指定します。行間隔の単位は使用しているフォントの高さに対する比率です(このページは14ポイントで表示されています)。1.0なら行間ベタ、行の間隔がゼロ。1.5なら1.5倍、2.0は一行あきです。
その他、パーセントで現すこともできます。200%なら2.0と同じです。またセンチメートルなどでも指定はできます。資料編の「
長さの単位」を参考にして、いろいろ試してください。
サンプル1 (line-height:1.0;)
行間隔1.0で書かれています。
行間隔1.0で書かれています。
行間隔1.0で書かれています。
行間隔1.0で書かれています。
サンプル2 (line-height:1.5;)
行間隔1.5で書かれています。
行間隔1.5で書かれています。
行間隔1.5で書かれています。
行間隔1.5で書かれています。
サンプル3 (line-height:2.0;)
行間隔2.0で書かれています。
行間隔2.0で書かれています。
行間隔2.0で書かれています。
行間隔2.0で書かれています。
サンプル4 (line-height:3.0;)
行間隔3.0で書かれています。
行間隔3.0で書かれています。
行間隔3.0で書かれています。
行間隔3.0で書かれています。
サンプル5 (line-height:4.0;)
行間隔4.0で書かれています。
行間隔4.0で書かれています。
行間隔4.0で書かれています。
行間隔4.0で書かれています。
サンプル6 (line-height:200%;)
行間隔200%で書かれています。
行間隔200%で書かれています。
行間隔200%で書かれています。
行間隔200%で書かれています。
上のサンプルは、<head> から </head> の間に下のように定義しています。
<style type="text/css">
<!--
.line10 {line-height:1.0;}
.line15 {line-height:1.5;}
.line20 {line-height:2.0;}
.line30 {line-height:3.0;}
.line40 {line-height:4.0;}
.line200 {line-height:200%;}
-->
</style>
そして<body>部分には下のように書かれています。
<DIV class="line10">
行間隔1.0で書かれています。<br>
行間隔1.0で書かれています。<br>
行間隔1.0で書かれています。<br>
行間隔1.0で書かれています。
</DIV>
(中略)
<DIV class="line200">
行間隔200%で書かれています。<br>
行間隔200%で書かれています。<br>
行間隔200%で書かれています。<br>
行間隔200%で書かれています。
</DIV>
<head>部分に何も記述せずに、下のようにSTYLEを宣言することもできます。
<DIV style="line-height:150%;">
行間隔150%で書かれています。<br>
行間隔150%で書かれています。<br>
行間隔150%で書かれています。<br>
行間隔150%で書かれています。
</DIV>
↓
行間隔150%で書かれています。
行間隔150%で書かれています。
行間隔150%で書かれています。
行間隔150%で書かれています。
<DIV style="line-height:150%;">
行間隔2cmで書かれています。<br>
行間隔2cmで書かれています。<br>
行間隔2cmで書かれています。<br>
行間隔2cmで書かれています。
</DIV>
↓
行間隔2cmで書かれています。
行間隔2cmで書かれています。
行間隔2cmで書かれています。
行間隔2cmで書かれています。
Copyright 2001-2002 Coco's Home. All rights reserved.