*Web Design Tips* by ETRE-M

読みやすい字間と行間

昨日は家族で遊園地へ行きました。観覧車やジェットコースターに乗ってフラフラしたけれどとても楽しかったです。

昨日は家族で遊園地へ行きました。
観覧車やジェットコースターに乗って
フラフラしたけれどとても楽しかったです。

この２つを見比べると上の方が少し読みやすいような感じがしないでしょうか？（文章が短いのでそんなに違いがないかもしれませんが；）長文になると、字間、行間に適度な開きがあると少しでも楽に読めるかもしれません。そこで今回もまたスタイルシートを使い、この字間、行間の設定方法をみてきます。

■まず、字間の設定方法。
letter-spacingプロパティを使います。

昨日は家族で遊園地へ行きました。

▼ソース

<p style="letter-spacing:0.2em">昨日は家族で遊園地へ行きました。</p>

この１行にのみ適用させるので、<p>タグの中にstyle=" "としてスタイルシートを埋め込んでいます。
letter-spacingは字間を調節するプロパティです。数値は文字そのものを含まない間隔の数値です。一般的に使いやすい（と思う＾＾；）単位は“pt”と“em”かと思います。
“em”（エム）は、基準となるフォントサイズにあたります。なので基準フォントサイズが１０ptならば、0.2emは、２ptを意味します。
字間が２ptということになります。
そして、忘れてはならないのが、このようにタグにスタイルシートを埋め込む場合は、<head>内にて以下の指定をしておきます。（詳しい説明は省きますが；；←わかってないのかも）

※注意：このプロパティはNNでは使えません。IE４以降となります。

一部分にではなく全体にこのスタイルシートを設定したい場合は、HTMLの<head>～</head>内にて指定します。

<head>
<style type="text/css">
p {font-size : 10pt;letter-spacing:0.2em}
</style>
</head>

このHTML内の全ての段落（<p>タグに挟まれた部分）が、文字サイズ１０pt、字間０．２ptになります。

「リンク（マウスオーバー）」のページでふれたように全てのHTMLに設定したい場合は外部スタイルシートを使ってもいいですね。
メモ帳に

p {font-size : 10pt;letter-spacing:0.2em}

と書いて、例えばmyfont.cssとして保存し、設定したいHTMLの<head>内で呼び出します。

■行間の設定
行間の設定には、line-height プロパティを使います。

昨日は家族で遊園地へ行きました。観覧車やジェットコースターに乗ってフラフラしたけれどとても楽しかったです。

▼ソース

<p style="line-height:1.2em">昨日は家族で遊園地へ行きました。
観覧車やジェットコースターに乗ってフラフラしたけれどとても楽しかったです。</p>

数値の設定は、字間と違い、その行も含めた広さになります。その他設定方法は、字間と同じです。
※IE３以降、NN４以降となります。