文章の読みやすさを追求する

「見苦しいテキスト配置」で、読みづらくなる文章について説明しました。でも、読みづらくなるようなことをしていなくても、Webブラウザで、長文を読むのは、しんどいものですね。何も手を加えないと、字がぎっしりとブラウザの横幅一杯に表示されるのと、行間が狭いからです。

できることなら長文は避けたいけど、そうは言っていられないのも、読み物系サイトの悲しい宿命です。文章を読んで理解してもらわないことには話にならないのですから。

そこで、少しでも文章が読みやすくなるようには、具体的にどうすればよいかについて話をします。

と言いつつ、CSS非対応ブラウザやNetscape4.xで閲覧すると非常に読みづらいサイトを作っているな…

文章の横幅を減らす

横書きの日本語文章を読む場合、目で内容を追いやすい文字数は１行あたり２０～３５文字の間です。これ以上だと、ちょっと読む気が失せてしまいます。逆に少なすぎても、上下への視線移動が増えすぎてしんどいです。

まず、見本１（別ページが開きます）を見て下さい。見出しは設定してありますが、文章の横幅や行間については、何も手を加えていません。文字サイズはブラウザの標準サイズのままです。これをじっくり読もうという気はありますか？

ディスプレイの横の解像度が640ピクセルなら、１行あたりの文字数が多いとは感じないと思います。800ピクセルだと、ちょっと文字数が多いと感じるかと思います。1024ピクセル以上だと、文字数が多すぎて、読む気があまり起こらないと思います。。

１行あたりの文字数を減らすためにはどうすればよいでしょうか？
１つは、文字サイズを大きくするという手が考えられます。しかし、これは現実的なものではありません。視力障害のない人にとって、大きすぎる文字サイズの文章は読みづらいだけです。
もう１つは、余白を取って、文章の横幅を減らすことです。「見苦しいテキスト配置」でもこの話題について触れていますが、改めて紹介します。

なお、今回は、HTML4.01の書き方で説明します。

1.スタイルシートで幅を指定した上で、センタリングの指定をする

これは、Internet Explorer6,Mac IE5,Netscape6.xでの標準モード、及びOpera6.xでの表示及びを前提としております。

幅に関しては、width:70%;　や　width:35em;　のように指定します。意味は、前者がブラウザの幅に対して70%で文字を折り返す、後者が１行３５文字で文字を折り返すということです。余白は、自動的に割り振る設定にします。

ただし、35emとしていても、実際には、プロポーショナルフォント（MS Pゴシックなど）を使っていると、１行あたりの文字数が行ごとに違ってきます。１文字ごとの横幅が違いますからね。ですので、emによる指定は目安として考えておくのが無難です。

●ページに設定する場合
<head> <style type="text/css">  </style> </head>

●外部スタイルシートを使う場合
（適用するページのHTML）
<head> <link rel="stylesheet" href="style.css" type="text/css"> </head>

（外部スタイルシート:ファイル名はstyle.css）
p{ width:70%; margin-left:auto; margin-right:auto; }

ページに設定する場合から説明を加えます。
<head>～</head>は文書の情報を記述する部分です。文書全体で、スタイルシートを使う場合は、ここで、「スタイルシートを使うよ」という宣言をしておかないといけません。
それが２行目に書いてあるstyle要素です。style要素の終了タグの閉じ忘れは絶対しないように！文章が全く表示されなくなります。
３行目にが書いてありますね。これはに挟まれている部分はコメント扱いとなり、ブラウザに表示されないということを利用しています。スタイルシートが使えないブラウザで、style要素の内容をそのまま表示してしまうのを防止するためです。
４行目から６行目が実際にどのように見せるかという指定です。ここでは、p要素（段落に）に対して、幅を親要素の70%、左右の余白を自動的に割り振るという指定です。

外部スタイルシートに設定する場合は、あらかじめテキストエディタで、外部スタイルシートを作成します。書くことは、ページに設定する場合の、の間までです。そして、そのファイルをlink要素で読み込みします。
rel属性で、読み込むファイルがスタイルシートですよという宣言をします。type属性で、MINEタイプの指定です。詳しいことは書きませんが、指定しておいて下さい。href属性で、リンクするファイルのURLを記述します。この際のURL指定は、相対指定／絶対指定どちらでも構いません。
ちなみに、外部スタイルシート指定とページでのスタイルシート指定の両方を行う場合は、先に外部スタイルシートの指定をしないとダメですので要注意。

2.スタイルシートで左右のマージン（余白）を同じにする

●ページに設定する場合

<head> <style type="text/css" >  </style> </head>

●外部スタイルシートを使う場合
（適用するページのHTML）
<head> <link rel="stylesheet" href="style.css" type="text/css"> </head>

（外部スタイルシート:ファイル名はstyle.css）
p{ margin-left:15%; margin-right:15%; }

くれぐれも言っておきますが、余白を指定するときに、ピクセル指定は絶対にしないように！
ピクセル指定でやってしまうと、低解像度で閲覧していたり、ブラウザを小さくしていると１行あたりの文字数が激減してしまって、最悪の場合、１行に１文字しか表示されないという状態にもなりかねません。

　3.TABLE要素を使って、テーブル位置を中央にする

今となっては、お勧めできる方法ではありませんが、古いブラウザでの見映えも重視するなら、HTMLだけの指定も仕方ない所です。

<div align="center">
<table>～</table>
と言うような感じで、表組みを使います。HTMLエディタであれば、表の属性変更やプロパティという部分で位置指定ができますので、「中央（揃え）」を選びます。
なお、この時の幅は、％で指定するなら、６０～８０％ぐらいが良いと思います。ピクセルで指定するなら、６００ピクセル以内に抑えましょう（低解像度の訪問者への配慮のため）。

行間を調整する

見本１の文章に対して、左右の余白を設定したのが見本２（別ページが開きます）です。１行あたりの文字数が減ったので、少しは読みやすくなりましたが、まだちょっと読みづらいです。それは、行間の調整を行っていないからです。

行間の調整はHTMLだけではできませんので、スタイルシートが必要です。指定方法は、line-heightプロパティを利用します。

●ページに設定する場合
<head> <style>  </style> </head>

この場合、行間は、もともとの文字の高さの1.5倍となります。150%と指定しても同じです。読みやすい行間としては、1.4em～1.8emでしょうか。

行間の指定も行ったのが、見本３（別ページが開きます）です。p要素に、
line-height:1.5em; margin-left:15%; margin-right:15%;
と指定してみました。見本１と見比べると、はるかに読みやすくなったと思います。

文章の横幅と行間を調整する。たったこれだけでも、ずいぶんと文章が読みやすくなりました。これで、目も通さないうちに、「戻る」ボタンを押されてしまう危険性は、かなり減ります。あとは、きちんと読んでもらえるだけの文章力と内容が鍵ですね。