行の高さを指定する

行の高さを指定する行の高さを指定する表示例

ブラウザでのテキストの表示は、高さを指定しないと行間がつまってとても読みづらいものです。そこで、スタイルシート(CSS)で行の高さを指定することで行間に余裕が出来、読みやすくします。

line-height: ★;

行の高さの値の指定方法

実数値+単位
数値に単位をつけて指定します。
パーセント
フォントサイズに対する割合で高さを指定します。
実数値
フォントのサイズに数値をかけたものが高さとして指定されます。

HTML/XHTML

<p>行の高さを指定する表示例・・・行の高さを指定しないでテキストを書いていくと、行間がつまっていて読みづらいものです。枕草子を読みやすく表示します。</p>
<p class="text1">春はあけぼの。やうやう白くなり行く、山ぎは少しあかりて、紫だちたる雲の細くたなびきたる。</p>
<p class="text2">夏は夜。月のころはさらなり。やみもなほ、ほたるの多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。</p>
<p class="text3">秋は夕暮。夕日のさして山の端(は)いと近うなりたるに、烏(からす)の寝どころへ行くとて、三つ四つ、二つ三つなど飛びいそぐさへあはれなり。まいて雁(かり)などのつらねたるが、いと小さく見ゆるはいとをかし。日入りはてて、風の音、虫の音など、はたいふべきにあらず。</p>
<p class="text4">冬はつとめて。雪の降りたるはいふべきにもあらず。霜のいと白きも、またさらでも、いと寒きに、火などいそぎおこして、炭もてわたるもいとつきづきし。昼になりて、ぬるくゆるびもて行けば、火桶の火も白き灰がちになりてわろし。</p>

CSS

<style type="text/css">
<!--
p { margin: 15px; }
p.text1 { line-height: 30px; }
p.text2 { line-height: 1.5em; }
p.text3 { line-height: 180%; }
p.text4 { line-height: 2.2; }
-->
</style>

行の高さを指定する表示例

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録