行の間隔を指定する
上部
では、次にスタイルシートで行の間隔を指定する方法を説明するよ。
学
はい。お願いしますー。
上部
行の間隔を指定するには「line-height」を使うんだよ。
これは「段落」の行と行の間隔を指定するのに使われることが多いようだね。
行数が多い文章で行の間隔を何も指定しない場合は、行間が詰まって読みづらくなる。だから、適度な行間を指定してあげると見る人にとって親切なんだよ。
学
なるほど。確かに文字がずらずらと並んでて、行と行の間も詰まっていると読むのが嫌になっちゃいますよね。
上部
うん。そうだよね。
行の間隔を指定する単位としては文字の大きさを表すemで指定するのがいいと思うよ。
なぜかというと、文字の大きさによって、行の間隔も自動で変更されるからね。
emで行の間隔を指定する
例えば「段落」の行の間隔を1.5emに指定したい場合は次のようにスタイルシートに記述しよう。 ちなみに、1emにした場合は、何も指定しない場合と同じ間隔になるよ。
p{line-height:1.5em;}
学
なるほど〜。僕の自己紹介は文字が少ないですけど、「段落」の行間を広げてみますね。
h1{
text-align:center;
font-size:20px;
color:#0000ff;
}
h2{
font-size:15px;
color:#3366ff;
}
h3{font-size:13px;}
p{
font-size:12px;
line-height:1.5em;
}
ul{font-size:12px;}
table{font-size:12px;}
学
「段落」の行間を1.5emにしてみましたよ。
学の自己紹介を新しいウィンドウで開く
お！さっきより行間がちょっと広くなりましたよ！
