■ テキスト

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

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

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

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

div { line-height: 130% }       (CSSの設定:推奨)

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

行間設定:normal(ブラウザの自動設定)

テキストの行間指定は、スタイルシートでしか設定できません。行間は狭すぎても広過ぎても読みにくさに影響します。また、行間の指定は、絶対値と相対値が存在します。基本的な値は、スタイルシートによるフォントの大きさの単位とまったく同じです。

行間設定:1.5em

テキストの行間指定は、スタイルシートでしか設定できません。行間は狭すぎても広過ぎても読みにくさに影響します。また、行間の指定は、絶対値と相対値が存在します。基本的な値は、スタイルシートによるフォントの大きさの単位とまったく同じです。

行間設定:200%

テキストの行間指定は、スタイルシートでしか設定できません。行間は狭すぎても広過ぎても読みにくさに影響します。また、行間の指定は、絶対値と相対値が存在します。基本的な値は、スタイルシートによるフォントの大きさの単位とまったく同じです。

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

インデントの設定

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

p { text-indent: 1em }  (CSS設定:推奨)

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

インデントのサンプル

インデントの設定のないテキスト

1em:1文字分のインデント

10px:10ピクセル分のインデント

1cm:1センチ分のインデント

15%:15%分のインデント

テキストの位置指定

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

<p align="center">  (非推奨)
<p style="text-align:center">  (CSS設定:推奨)
p { text-align: center }       (CSS設定:推奨)

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

HTMLCSS機能
leftleft左揃え(デフォルト値)
rightright右揃え
centercenter中央揃え
-justify両端揃え

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

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

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

p { letter-spacing: 1em }   (CSS設定:推奨)

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

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

p { word-spacing: 1em }   (CSS設定:推奨)

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



This Page is HTML4.01 Valid! 初版更新日 2003年1月4日
Copyright(C) 2002-2004 banban@scollabo.com