コンテンツの主たる表現にテキストは欠かせません。この節では、テキストに関わる様々な手法と作法を解説します。

• テキストの行間を設定する
• インデントの設定
• テキストの位置指定
• テキストの文字間隔を設定する

■ テキストの行間を設定する

長文のテキストは、ブラウザによる自動改行で表示されますが、行と行が近すぎると文章が読みにくい傾向があります。そこで、テキストの行間を設定することで、文章全体が読みやすくなります。

行間を指定する方法は、スタイルシートでしか指定できません。

div { line-height: 130% }       （CSSの設定：推奨）

実際の行間設定のサンプルは以下の通りです。

当サイトにおける行間の設定は、130% で統一しています。この設定は、フォントに対する比率と解釈してください。なお、Windows版 MSIE5.0 では、行間設定の値によっては、テキストが２重になってしまうバグがあります。

■ インデントの設定

テキストにおけるインデントとは、行における字下げの意味です。行頭にインデントを設けて読みやすさを設定します。インデントの設定は、スタイルシートだけしかできません。

p { text-indent: 1em }  （CSS設定：推奨）

上記の設定は、行頭に１文字分のインデント（字下げ）を設定したものです。インデントの設定に用いる値は、スタイルシートにおけるフォントの大きさとまったく同じ値を利用します。

インデントのサンプル

■ テキストの位置指定

コンテンツとしてのテキストの位置指定には、HTML3.0より align属性が利用されてきました。ただし、この属性は、HTML4.0/4.01では、非推奨として扱われています。

<p align="center">  （非推奨）
<p style="text-align:center">  （CSS設定：推奨）
p { text-align: center }       （CSS設定：推奨）

テキスト位置指定の属性値

なお、Windows版 MSIE 4.0 では、CSS設定の text-align: justify の指定は、そのまま両端揃えに設定できますが、同じ Windows版 MSIE 5.0以降では、text-justify: distribute を指定しないと、きちんと表示されません。ただし、この指定は、CSS規格外とされています。

■ テキストの文字間隔の設定

テキストにスペースをいれて単語を設定すると、音声ブラウザでは正しく発音できません。例えば、「場所」とか、「時間」を「場　所」「時　間」とスペースをいれて設定すると、「ば、ところ」「とき、あいだ」と発音されてしまいます。HTMLでは、文字間にスペースを入れる設定はできませんが、スタイルシートで設定すれば、音声ブラウザも迷うことなく正しく発音できます。

p { letter-spacing: 1em }   （CSS設定：推奨）

上記スタイルシートの設定は、文字間に１文字分の空白を設定する方法です。設定できる単位は、フォントの大きさを決めるスタイルシートの単位とまったく同じものが、利用できます。

また、英文の単語の間にスペースを用いる方法は、

p { word-spacing: 1em }   （CSS設定：推奨）

単語と単語の間の空白を設定します。ただし、スタイルシートの text-align で、justify を設定していると、指定した通りの結果にならない場合があります。また、この設定は、英文にのみ有効で、日本語には適応されません。