Internet Explorerでは<body bgproperties="fixed">など(スタイルシートでもbackground-attachment: fixed;という記述をすれば指定可能)のような指定をすると、背景画像がスクロールせずに文章だけがスクロールする、という表示をすることができます。ですがこの方法では、文章をスクロールさせるたびに背景画像と文章の重ね合わせをいちいちやりなおしてページを表示しているらしく、画像が一緒にスクロールする時に比べて表示が格段に重くなります。PentiumIIなどでは比較的苦痛にはならないのですが、Pentium/120MHzクラスのCPUでは再描画が目で追える程度になり(ビデオカードにもよりますが)、文章を読み進める際に大いなる苦痛を伴います。大体1996年くらいのコンピュータを使ってWWWページをみている人達がこれにあたりますから、(これを書いている1998年現在)数としては決して少なくありません。彼らを切り捨てても背景画像を固定にする意義があるかどうか、よく考えた方がよいでしょう。
文字がつぶれずに表示されることは読みやすさにとって非常に重要な要素ですが、このために最低限必要な大きさはフォント(字体)によって異なります。個々のフォントによってどこまで小さくできるかは異なりますが、全体的傾向としてはゴシック＞丸ゴシック・POP・明朝・まるもじ＞楷書・行書の順で読みやすいようです。また、同じ種類のフォントでも細くなるほど読みやすくなるフォントが多いようです。WindowsではMS Pゴシック(MS ゴシック)、FA ぽぽるなどが小さいサイズでも読みやすい(字がつぶれない)フォントとして有名です。
ですから、普段ゴシックなどのフォントでポイント数を下げてブラウズしている人が、<font>でフォントを楷書体や行書体などに指定したページを読むと、小さいサイズでつぶれた文字がずらっと表示されるので大変なことになります。できればWebページでフォントを指定するのはやめたほうがよいでしょう。どうしても指定したい場合でも楷書体・行書体系のフォントは極力避けた方がよいでしょう。まるもじやPOP体のページも小さいポイント数で読んでいる人にはあまりうれしくないと思ったほうがよいでしょう。
なお、Microsoft Word 97 などでHTML形式で保存した場合、MS P明朝を使用しているとそのままページの文字フォントもMS P明朝に指定されます。MS P明朝はそれほど読みやすいフォントではないので注意しましょう。
<TABLE>を使った表は、表全体の読み込みが終わるまで表示されません。ですから長い文章を表の中に入れてしまうと、本来徐々に文章が表示されるブラウザでも文章全部が読み込まれるまで表示されないことになります。レイアウトに凝るために全体を表の中に入れているページがありますが、長い文章の場合や文章を早く表示させたい場合は表を使わない方がよいでしょう。
<PRE>タグは、すでに改行・インデントなどのレイアウト処理を済ませた文書をHTML文書の中に入れるためのもので、レイアウト処理をブラウザに任せるHTMLの中ではいわば邪道、裏技的なタグです。
単に<BR>で改行するのが面倒くさくて<PRE>を使っているのなら、面倒くさがらずに<BR>で改行しましょう。本来改行は<BR>で行うべきであり、<PRE>でも改行できるからどちらを使ってもよい、というわけではありません。<PRE>を使うとブラウザによっては自動折り返しが利かなくなって快適に読めるブラウザの横幅がかなり限定されてしまいますし、何よりHTMLとして非常に汚いものになってしまいます。
横スクロールバーでスクロールさせる、ブラウザの横幅をいちいちページにあわせて広げる、という行為はものすごく面倒くさい(私見)のでそんなことをしなくても読めるページを心がけましょう。レイアウトにこだわりたい気持ちは分かりますがその気持ちが読み手にとって迷惑であることもあるのです。
具体的には
などは最低限心がけておくとよいでしょう。ブラウザの横幅を変えられる場合はチェックする場合に横幅をいろいろ変えてみて、どんな横幅でもそれなりに快適に読めるかどうかチェックするとよいでしょう。
なお、一部に「横幅は広くても600ピクセルくらいまで」ということを言っている方が見受けられますが、ブラウザの横幅を640ピクセルより狭くしている人なんていくらでもいます。
画面内にたくさん文字を表示したい場合や、作者の趣味などで<FONT SIZE=1>などのように小さい文字サイズを指定しているページがありますが、文字がつぶれて読めないと思った方が良いでしょう。Win32版Netscape Communicator4.04ではMS Pゴシック(9ポイント)を標準フォントに指定した場合、<FONT SIZE=2>でも文字がつぶれます。
また、文字サイズを4以上にすると文字が大きくなりすぎてこれも読みにくくなります。特に画面の狭いノートパソコンなどでは深刻な問題となります。
強調その他の目的で一部分だけ文字サイズを変えるという方法が存在しますが、やりすぎるとこれも読みやすさを阻害します。特にWWW日記の中には本文の半分以上を様々な文字サイズで強調するものが見られます。テンションを上げるのは結構ですが、いちいち文字の大きさや行の間隔が変わるために読む側にとっては非常に迷惑であることを覚悟しましょう。どのくらいから迷惑になるかは各個人の感性によって異なりますが、個人的には大きい文字は多くても全体の1〜2割にとどめておいた方がよろしいかと思います。
ちなみにブラウザのフォントのポイント数は読む人がそれぞれ自分が読みやすい大きさに設定しているので、人によって様々です。ですからスタイルシートでポイント数を明示的に指定してもほとんどの場合大きなお世話にしかなりません。
ほとんどの日本語フォントは斜体にすると文字が読みにくくなります(特に明朝系)。使わない方が無難です。斜体で表現されることが多い論理スタイルタグも代替のタグがあるならそちらを使うとよいでしょう。強調なら<EM>より<STRONG>がおすすめです。最近はスタイルシートで表示方法を変えられるものもあるようなので、論理スタイルタグを使う場合はスタイルシートを併用するのもいいかもしれません。
Netscape Navigatorなど一部のブラウザはソースでの改 行をスペース扱いします(英文を表示す る場合はその方が都合が良い)。ですからソース の段階で文節の区切りでないところで(例えば一様に横7 0桁とかで)改行が入ってしまうと表示されるときに区切 りの悪いところでスペースが入ってしまってとても読み づらいのです。改行を入れるときは文節の区切りで入れ ましょう。
文章を強調するために<BLINK>タグを使う方がいるようですが、一時的に語句が見えなくなる<BLINK>タグは見づらいだけでなく強調という目的から見ても逆効果です。<EM>や<STRONG>を使うことをお勧めします。
「読みにくい」以前に「読めない」ページがあります。
一般的に、特定のブラウザでなければ見られないページは嫌われます(他のブラウザでも読めて、なおかつ特定のブラウザ用の機能にも対応しているページは好かれます)。そのブラウザをインストールできない環境の人もいますし、読み手によってブラウジング環境が様々なWWWで書き手が読み手に単一の環境を押しつけるという行為は書き手の怠慢であり横暴であると個人的には思います。まあたとえばCGのページは画像を読めないブラウザではどうしようもないでしょうからさすがにそういうページに同じ事をいうわけにもいきませんが、なくてもいいものをつかってわざわざブラウジング可能環境を狭めている人がわりといます。
Netscape Navigator/CommunicatorやMicrosoft Internet Explorerしか知らない人が陥りやすいようですが、フレーム機能は対応していないブラウザもまだまだありますし、JavaScriptやShockwave Pluginなど(Shockwave for Director, Shockwave Flashなど)は完全に一部のブラウザのみのローカルな機能です。テーブル(表)機能もブラウザによっては未対応のものがあるので使うときは注意。
フレーム非対応のブラウザはFRAMESETタグで囲まれた部分を表示せず、NOFRAMESタグ(NOFRAMEではないらしい)で囲まれた部分を表示するのですが、NOFRAMESタグで囲んだ部分が無ければ何も表示されません。FRAMESETタグを閉じる前にNOFRAMESタグで囲ってフレーム非対応ブラウザ向けの文章を書くとよいでしょう。
JavaScriptも初期のNetscape Navigatorや初期のInternet Explorerは対応していません。使わなくても読めるようにするか、JavaScriptを使わないバージョンのページを別に作るとよいでしょう。
ほかにも、クリッカブルマップでメニューを作っている場合はテキストベースのブラウザでもリンクをたどれるようにテキストでもリンクを張るとよいでしょう。
なお、本ページの趣旨である「読みやすさ」「見やすさ」という観点からみると、
<BODY TEXT="#FFFFFF" BACKGROUND="black.gif">
(black.gifは黒い色の背景画像だと思ってください)
というふうに設定してしまうと、ブラウザのデフォルト背景色を白にしている場合は背景画像が読み込まれるまで一切テキストが読めません。灰色でもほとんど読めません。ブラウザが画像を読まない設定になっている場合はずっとそのままです。画像が表示できるブラウザを使っていても、読み込みの遅さを嫌って画像の自動読み込みを切っている人がいることを考慮しましょう。
ちなみに、Netscape Navigatorなどの場合、初期設定ではBODYタグなどで色指定されてない場合の色は文字色:黒、背景色:灰色というようになっていますが、この設定は各ユーザーが自由に変えることができます。背景色を白にしている人もいますし、目が疲れないように文字色を白、背景色を黒にしている人もいます。「デフォルトだと世界中どこでも文字色は黒で背景色は灰色なんだ」などと思い込んではいけません。
そこで、
<BODY TEXT="#FFFFFF" BGCOLOR="#000000" BACKGROUND="black.gif">
のように、背景画像の色に近い色を背景色として指定してやれば、背景画像が読み込まれる前でも本文を読むことができます。文字色と背景色はセットで指定するものだと思ってよいでしょう。
また、時々HRタグの水平線やTABLEタグの罫線に合わせて背景色を指定し(例えば、Netscape Navigatorなど一部のブラウザは背景画像を緑色の画像、文字色を白、背景色を黄色というふうに指定すると、緑色の背景画像の中に水平線や罫線が黄色く浮かび上がる)、その結果画像を表示させずにページを表示した時にものすごく見づらくなる場合があります。気をつけましょう。
<IMG ALIGN="LEFT">などを使ってイメージの左右に文章の回り込みをさせているとき、画像サイズをパーセンテージで指定していない場合は文章の横幅が読み手の環境を無視して設定されてしまいます。大きな写真などの横に文章を回り込ませたりしたページを小さいウィンドウサイズのブラウザで読むと、回り込ませた文章が1行1文字とか2文字とか3文字とかで折り返しされてしまって読みにくいことこの上ありません。気を付けましょう。
画像は基本的にファイルサイズが大きいのです。10KBの画像と10KBのHTMLファイルを見比べて、情報量がどれだけ違うか比較してみるとよいでしょう。画像は使えば使うだけページを重くする(読み込みを遅くする)のです。どうしても無ければならないもの・どうしてもほしいもの以外はスパスパ外してしまいましょう。
(そのページのHTMLファイルのサイズ(SSIを使って他のファイルを読み込んでいるならそれも含める)+そのページで読み込んでいる画像のサイズの合計)／転送速度
で大体の読み込み待ち時間を計算できます。ブラウザが画像を自動的に読み込まない場合は画像のファイルサイズは計算に入れません。
実際にはデータ圧縮の有無や回線の混み具合によって転送速度が変わるため、これより長く待たされることもあります。
例えばHTMLファイルが5KB、タイトルロゴの画像で20KB、背景画像で5KBで合計30KBの場合、14kbpsのモデムだと約2.0KB/sec.と仮定した場合でも15秒かかることになります。回線が混んでいて1.4KB/sec.くらいの場合は22秒くらいになります。
また、よそのサーバのCGI(カウンタサービスなど)を使っている場合はさらに5〜15秒くらいプラスした方が良いでしょう。
基本です。もともとWWWの歴史が始まった頃から画像(インラインイメージ)が標準で使えたわけではありません。LynxやEmacs-w3のようなテキストベースの(画像を表示しない)ブラウザをつかってみると大体の雰囲気が分かるかと思います。ホームページを持っている方はご自分のページを見てみるとよいかと思います。Lynxやw3がなくてもNetscape NavigatorやMicrosoft Internet Explorerで画像の自動読み込みをオフにすれば大体どんな感じかわかります。
目の不自由な方はテキストを音声で読み上げる機械や点字にする機械を使ってWWWページを読むそうです。
画像には必ずALTを使って注釈をつけるようにしましょう。
ALTオプションの上手な付け方は矢野啓介氏の「好ましいHTML文書を書くための方法と考え方」で詳しく述べられているので、そちらを参考にすることをお勧めします。
Netscape Navigatorなどの一部のブラウザでは、<IMG>タグにWIDTH、HEIGHTオプションを付けると画像を読み込む前に画像の場所を確保してHTML文書をスムーズに読み込んでくれます。付けなかった場合、画像が読み込まれるまで文書の表示が途中でストップしてしまいます。ひとつでも付け忘れたところがあればそこで文書の表示がつっかかってしまうので、全ての<IMG>タグにWIDTH、HEIGHTオプションを付けるようにしましょう。
ちなみに上智はWIDE周辺がネックになってて外から見たときはダイヤルアップでなくても遅いらしいです。ときどきありますねこういうとこ:-)
Animated GIFは、アニメーションパターンの分だけ画像枚数が多くなるため、ファイルサイズが通常のGIFファイルの数倍〜数十倍にもなります。ちょっと大きくパターンの多いAnimated GIFを作ってしまうと100KB以上の巨大なファイルになってしまうことがあります。そうなると当然読み込みに時間がかかります。無駄にアニメーションを多用するとそれだけページの読み込みが無駄に遅くなることになります。
GIFファイルは1つのファイルにつき256色まで色を使うことができます。が、世の中には全アプリケーションで合わせて256色しか画面上に表示できない端末がたくさんあります。100色も200色も使った画像を1つ読み込むだけで同時に表示している画像(背景画像など)の色がおかしくなることがあります(色化けと呼ばれます)。そのような画像を1つのページで何枚も使うと256色環境では画像の色がメチャクチャになってしまいます。そのため、使う色の数をできるだけ減らして、256色環境でも色化けしにくい画像にするとよいでしょう。CGなどはうまく減色することは難しいかもしれませんが、背景画像やアイコンなどは比較的減色しやすい方です。
もちろん、元の画像が使っている分より少ない色数に減色するとそれだけ画質が落ちますから、減色する場合は画質を見ながら妥協できるところまで減らしていくとよいでしょう。私はAdobe Photoshopをよく使いますがほかにも減色機能を持つソフトがあるようですから試してみるとよいかもしれません。