読みやすいページのコツ
読みやすいページにするには、どういうレイアウトが読みにくいのかを把握してそれを避けることです。ここでは文月が読みにくいと感じるレイアウトと、その解決策を挙げておきます。
(1) 左から右までびっちり文字が詰まっている
htmlはシンプルに作ると必ずこのデザインになります。文字が多くなるほどこのデザインは読みにくい。左右に適度な余白を確保しましょう。
方法としては、
- スタイルシートで余白を指定する
- スタイルシートで本文の幅を指定する
- body要素の余白指定用属性を使う
- 本文を横幅指定したテーブルに入れる
の４通りが考えられます。
まずスタイルシートで余白を指定する方法。
body {
margin-left: 100px;
margin-right: 100px;
}
このように指定すると、ページ全体の左右に100ピクセルずつの余白を取ることができます。ピクセルではなく、%やemなどの単位を使っても構いません。
また、ページ全体ではなく、小説本文だけに余白を指定したい場合は、
div.document {
margin-left: 100px;
margin-right: 100px;
}
のように指定し、本文を
<div class="document">
小説本文
</div>
というふうに、クラス名を指定したdiv要素で囲みます。（クラス名は一例ですので、好きなように変えてください）
もちろんdiv要素ではなくp要素を使っても構いません。その場合、div.documentではなくp.documentとなります。また、単に.documentとした場合は、どんなタグでもdocumentというクラスが指定されていればスタイルが適用されます。
この方法のメリットは、わかりやすいこと、ブラウザによる違いがほとんどないこと、横スクロールバーが出ないことです。デメリットは、余白の幅しか指定できないため、ウィンドウサイズによっては見づらくなる場合もあることです。
次に、スタイルシートで本文の幅を指定する方法。これは少々ややこしいです。
スタイルシートの指定（幅650ピクセルで指定する場合）▼
div.wrap {
text-align: center; /* IEのバグ対応 */
}
div.document {
text-align: left; /* IEのバグ対応 */
width: 650px;
margin-left: auto;
margin-right: auto;
}
htmlの指定▼
<div class="wrap">
<div class="document">
小説本文
</div>
</div>
このように指定し、小説本文など余白を作りたい部分をクラス名documentのdiv要素で囲みます。
CSSの仕様上は、widthで余白を指定し、marginをautoに指定すると、ウィンドウのサイズに合わせて適度に左右に余白を取ってくれることになっています。実際Netscape7やFireFoxはその通りに表示してくれますが、IEではバグがあり、左寄せになってしまいます。そのバグを回避するため、外側のブロック（div.wrap）で要素全体を中央寄せします。そうすると本文の内容まで中央寄せされてしまうので、本文ブロックに左寄せの指定をします。
この方法のメリットは、閲覧者ごとの解像度やウィンドウサイズの違いに、デザインを崩さずに対応しやすいことです。デメリットはウィンドウサイズによっては横スクロールバーが出てしまうことです。ちなみに、幅の単位をpxではなくemにすると、閲覧者のブラウザの文字サイズ設定によって横幅を伸び縮みさせることもできます。
続いて、body要素の余白指定用属性を使う方法。
<body leftmargin="100" rightmargin="100" marginwidth="100">
これだけなので簡単ですが、rightmargin、leftmarginはIEの独自拡張属性なので、できれば今後はスタイルシートで表現するほうが良いでしょう。
最後に、本文を横幅指定したテーブルに入れる方法。これはわかると思うので解説しません。これもまた簡単な方法ですが、テーブルの場合中身を全部ブラウザが読んでから描画するため、回線スピードが遅い場合は表示に時間がかかります。また、そもそもtableとは「表」のことですので、表ではないテキストを入れるのはそぐわないとされています。こちらも、できればスタイルシートで表現するほうが良いでしょう。
(2) 行間が詰まっている
これも素直に作るとできてしまうレイアウトです。これを回避するにはスタイルシートしかありません。
div.document {
line-height: 150%;
}
とすると、クラス名documentのdiv要素の中の行間が150％になります。本文を<div>以外のタグに入れている場合はそれにあわせて書き換えてください。
ただし、フォントサイズの一部変更をしているページでは表示がおかしくなることがありますし、NN4.78では画像が入った段落に使うと表示が大幅に狂うのでご注意ください。
(3) 小さいフォント／特殊なフォントに固定されている
これはデザインこだわってます、というサイトさんに多いんですが……正直迷惑です。ピンポイント使用するぶんにはかまわないのですが、全体がこれだと17インチディスプレイ＆高解像度という環境の私にはつらい。ブラウザの文字サイズ変更が使えるように、せめて相対指定（基準文字の何パーセントのサイズ、という指定の仕方）をつかってください。
(4) 文字色と背景が合ってない
文字色と背景色の色や濃度が近すぎると、文字が背景に埋もれて読みにくくなります。逆に差がきつすぎても目に負担がかかります。原色の文字はほとんど嫌がられると思って間違いないでしょう。黒地に赤、黒地に黄色、なども嫌われる組み合わせです。真っ白の背景に真っ黒の文字はよくある組み合わせですが、目にまぶしいので長時間読むのには向かないという意見もあります。
また、背景画像の主張が強すぎて、文字が読み取りにくい場合もあります。文字をのせても読みにくくならない背景（淡い色のもの、同系色だけで作ってあるもの、輪郭がはっきりしすぎないものなどがおすすめ）を探すか、左端のみの背景画像を使って、余白の指定で文字がかぶらないようにする、文字の入る部分は無地の背景にする、など、工夫してみてください。
ところで、背景に画像を使う場合忘れがちなのが背景色の指定です。濃い色の背景を使うと必然的に文字は薄い色になりますが、背景色を指定しわすれると背景画像が表示されるまでのあいだ背景が真っ白になって文章が読めない場合があります。背景画像を使う際は、必ず背景画像の色に近い背景色も指定するようにしましょう。
(5) センタリングが多用されすぎている
これは読みにくいですよ。
ワンポイントで使うとか、詩のように一行が短いなら有効ですが、長文にはきっぱりはっきり向きません。
(6) 文章と文章の間が異様に空きすぎている
一画面にほんの数行しか表示されなくて、次の行はずーっと下、というようなページのことです。スクロールがすごくめんどくさくて、どこまで読んだか判らなくなっちゃうからあんまり好きじゃない。これもワンポイントで使う分には効果的ですけども。
移動のしやすいページのコツ
移動のしやすいページにするには、BACK/NEXT/TOPなどへのリンクを工夫しましょう。
わかりやすい表記と、使いやすい場所がポイントです。
小説本文ページの一般的なデザインでは、本文の下にこうしたリンクがあります。でも、とりあえず全部ブラウザに記憶させてオフラインでじっくり読んだり、間違ったページを開いてしまった場合に、ページの一番下までスクロールさせないとリンクが使えないのは少々手間です。あとで読む予定なのに、内容が目に入ってしまったりしますし。
というわけで、さらに使いやすくするためには本文の上にもこうしたリンクを表示することをオススメします。
たとえば、
<p align="right">
<a href="01.html">BACK</a> / <a href="03.html">NEXT</a> / <a href="index.html">TOP</a></font>
てなタグをページ冒頭に書きますと、本文ページの右上に前の章／次の章／目次へのリンクが表示されます。
これでさらに楽にページを行き来できるというわけ。
表示の速いページのコツ
表示を早くするには、まずは単純にページをあまり重くしないこと。重い画像は避ける、長いテキストはいくつかのページに分割する、ということをまず心がけましょう。
読みやすいレイアウトのためにテーブルを使って本文を表示している場合、テーブルの内容を全部ブラウザが読み込むまでテーブルの中身は表示されません。長いテキストだと、なにも表示されないままかなり待たされることになってしまいます。これを避けるには、ひとつのテーブルに全部を詰め込まないで、いくつかのテーブルに分割することです。上で言っているのと似たようなことですね。
また、テーブルの枠線や背景色を使わず、ただ左右の空白を作るためにテーブルを利用しているのだったら、代わりに↑の(1)のところで紹介しているマージン指定を活用するのもひとつの手です。
オンライン小説ページを作る ２