ひなこの楽天web制作研究所

今まで、<p>タグを中心に、スタイルシートを使ったレイアウトについていろいろと書いてきましたが、今日は、行間の設定を行ってみましょう。

普通にこう文章を書くと、行と行の間が、このくらいなんですが、スタイルシートでこの行間を設定できます。

line-height:160%;

です。ラインハイト～行の高さ。という指定です。単位はパーセントで指定します。文字の高さに対する割合として、一行の高さを指定します。160％が一行だとすると、文字が書いてある部分が100％で行間が60％になります。

他の単位での指定もありますが、とりあえず一つ覚えればよいでしょう。

具体的にどう書くかというと

<p style="font-size: 10pt; line-height:160%;border:solid 1px #FF9999; padding: 10px;">ここに段落の内容を書く。<p>

ここでは、行間の指定以外にも、今まで講義に登場した他の指定も入れてみます。

borderで枠線の指定。　枠の種類、太さ、色
paddingで枠からの距離。
font-sizeで文字（フォント）の大きさ

この指定をした段落を実際に表示するとこんな感じになります。

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

どうでしょうか。

文字の大きさや、行間で読みやすさが変わると思います。いろいろと試してみてね。

では、今日はこの辺で～。