HTML 入門

スタイルシートでデザインを作ろう

行間を調整する

次は本文の行間の調整を行います．多くのブラウザでは標準で文字サイズの1.5倍の行間が設定されています．行間の設定には line-height プロパティを使って，文字サイズとの比率で設定します．比率で設定しておくと文字サイズを変更しても自動的にその比率にしたがって行間が調整されます．（あるいはピクセル単位など絶対的な値で指定することもできます．） （HTMLのサンプルを見る ／ CSSのサンプルを見る）

まず，とくに指定しなければ行間は次のような感じになります．

index.html（抜粋）コピー
<p>
  本文中の文字列の行間を調整しよう．．．
</p>

次に段落に適当な名前のクラスを付けてスタイリングします．ここでは lh10 という名前にしました．行間を line-height: 1.0 として文字サイズの1.0倍とします．すると行間が詰まって読みにくくなったことでしょう．

index.html（抜粋）コピー
<p class="lh10">
  本文中の文字列の行間を調整しよう．．．
</p>

style.css（抜粋）コピー
.lh10{
  line-height: 1.0;
}

次は行間を文字サイズの1.5倍に設定します．多くのブラウザでは標準的な行間になったことでしょう．

index.html（抜粋）コピー
<p class="lh15">
  本文中の文字列の行間を調整しよう．．．
</p>

style.css（抜粋）コピー
.lh15{
  line-height: 1.5;
}

次は行間を文字サイズの1.8倍に設定します．少し行間がゆったりした印象になりました．

index.html（抜粋）コピー
<p class="lh18">
  本文中の文字列の行間を調整しよう．．．
</p>

style.css（抜粋）コピー
.lh18{
  line-height: 1.8;
}

最後に行間を文字サイズの2.0倍に設定します．かなり行間が広くなりました．

index.html（抜粋）コピー
<p class="lh20">
  本文中の文字列の行間を調整しよう．．．
</p>

style.css（抜粋）コピー
.lh20{
  line-height: 2.0;
}

（HTMLのサンプルを見る ／ CSSのサンプルを見る）

目次に戻る