読みやすさは「人それぞれ」でしょうか？若干の幅はあってもほとんど万人に受け入れられる読みやすさはあると思います。文字が小さすぎるよりは少し大きめの方が読みやすいし、背景色に溶け込むような文字色よりはそうじゃない文字色の方が読みやすいです。そういった最大公約数的な読みやすさをCSSを使って追求するのが今回の主眼です。もちろん文体や漢字の多用などによる読みにくさは関係ありません。それは表現者の表現者たるコアな部分ですから、誰に何を言われようとも変える必要がありません。また、出来ることならCSSの仕様にしっかり準拠するべきだと思いますが、ヒステリックになる必要もありません。出来る範囲でやっていけばいいと思います。ここでは最低限度のTipsにしか触れませんので、しっかり勉強したい人はWEBに数多あるCSSの解説ページをあたってください。
CSSをまともに解釈してくれないブラウザは年々シェアが落ちています。せっかく便利なCSSを使わない手はありません。「CSSが無効だと読むことすらできない」では話になりませんが、「CSSが有効だとより読みやすくなる」ようにするべきです。NetscapeNavigator4.x だと表示が崩れて困るという場合はNN4だけCSSを無効にして、まっさらなプレーンテキストとして読んでもらう方法があります。本当はNN4用のページを作るべきなのかもしれませんが、そこまで手が回らないのが実情でしょう。
<link rel="stylesheet" href="〜" type="text/css" media="all">
@importを使う
消極的な方法ですがこれでNN4でCSSを無効化出来ます。ちなみにCSSが無効だと、このページはこんな風に見えます。全く読めないという事はありません。幅がありすぎて読みにくいですけど。
文字を読みやすくするために真っ先にやることは行間を空けることです。ブラウザのデフォルトでは誰がどう読んでも読みにくいことは間違いありません。使うプロパティは line-height です。特に問題なければ body要素のセレクタに宣言してしまっていいでしょう。ちなみにこのサイトでは主に140%の line-height をbody要素に適用しています。もっと広くてもいいかもしれません。px などの絶対指定を使うとユーザーが文字の大きさを変えたときに表示が崩れるので % や em などの相対指定を使うべきです。
body {line-height : 140%;}
これがブラウザデフォルトの行間です。文字を読みやすくするために真っ先にやることは行間を空けることです。ブラウザのデフォルトでは誰がどう読んでも読みにくいことは間違いありません。使うプロパティは line-height です。特に問題なければ body要素のセレクタに宣言してしまっていいでしょう。ちなみにこのサイトでは主に140%の line-height をbody要素に適用しています。もっと広くてもいいかもしれません。px などの絶対指定を使うとユーザーが文字の大きさを変えたときに表示が崩れるので % や em などの相対指定を使うべきです。
文字のサイズはブラウザのデフォルトで十分に読みやすいと思います。どうしても大きさを変えたい場合だけ font プロパティを使います。恐がりでは文字のサイズを90%に指定しています(つい先日まで x-small でした)。要するにちょっと小さめの文字で読んでもらいたいと思っているわけです。但しあくまで希望ですから、ユーザー側で文字サイズを調整出来るように相対指定の%を使っています。これが絶対指定の px などだと、CSSを切らない限りユーザーが文字サイズを変更することが出来ません。例としてp(段落要素)のセレクタを使います。もちろん body でもいいでしょう。
p {font-size : 90%;}
p {font-size : 80%;}
ブラウザの文字サイズを変更してみてください。
この部分は大きさが変化しません。上のTipsは変化しているはずです。
p {font-size : 10px;}
可愛さを追求して文字を小さく指定することを否定したくはありません。程度の問題なので、判読可能な程度で我慢してください。
ブラウザの横幅一杯まで文字があると読みにくいです。テーブルを使って幅を整え、左右両端に隙間を空ける方法がポピュラーですが、同じことはCSSの margin や padding というプロパティで出来ます。HTMLの基本に、テーブル要素は「表」のために使うという決まりがありますからCSSを使ったほうがいいでしょう。と言うか使ってください。使うべきです。
div,p {margin : 2em 5em;}
ブロックの外側に上下2文字左右5文字分の余白を設けています。
div,p {padding : 2em 5em;}
ブロックの内側に上下2文字左右5文字分の余白を設けています。
余白が全くない状態。ブロックのラインと文字がくっついてしまい、見た目にバランス悪く感じます。ラインが表示されていなくても、横幅一杯に広がった文章というのは読みにくいものです。これで行間が詰まっていたりすると最悪です。
テキストサイトでは line-height , margin , padding , font-size の4つのプロパティを使えばそこそこ読みやすいサイトが作れると思います。プレーンな日記HTMLのHEAD要素内に以下のソースを追加するだけでもかなり読みやすくなるでしょう。
<head>
<style type="text/css">
<!--
body {
line-height : 140%;
margin : 1em 5%;
padding : 1em 2em;
font-size : 90%;
}
-->
</style>
</head>
後は適宜それぞれの要素にCSSを使っていくだけです。もちろんコメントで囲まれた範囲をCSSファイルとにして、外部スタイルシートとしてページに読み込ませた方が使いまわしが効いて管理が楽になることは言うまでもありません。
2002/02/20