閲覧環境の違いを理解する
ホームページを訪れに来る人すべてが自分と同じ環境で見ているという保証はどこにもありません。
閲覧するパソコンのタイプ（デスクトップ、ノート、携帯端末）やOS、ブラウザ、表示色数、画面解像度などはユーザによって様々で、すべて同じ環境で見てくれているとは限りません。
もちろん、その環境に偏りはあるものの、見る環境は千差万別です。
どの組み合わせが一番多い？
すべての人に同じように見てもらうことは残念ながらできませんが、一番利用者の多い環境に合わせるのがWEBマスターにとって最も有効です。
では、現在はどのような組み合わせが多いのでしょうか。統計を取ると以下のようになります。
| OS | 使用ブラウザ | 画面解像度 | 表示色数 |
|---|---|---|---|
| Windows XP | Internet Explorer 5〜6 | 1024×768 | 16ビット |
標準的な利用環境を把握しておくことは、WEBサイトの構築に役立ちます。
※あくまで統計上ですので、ページを作成する際には多種の閲覧環境を満足する必要があります。
画面サイズに注意？
今回はこの中でも画面サイズ（画面解像度）に着目します。
より小さな画面サイズで見た時やブラウザの表示領域を小さくしてホームページを見た場合、やたらとスクロールを強いられるのは、閲覧者には苦痛です。
特に、人間は目線を縦に動かすのには慣れていても、横に長い文字を読むのは苦手とします。
また、最近ではマウスにホイールが標準添付されているものが多く、縦にスクロールするのが便利になっているので、ユーザは縦のスクロールには慣れていますが、横のスクロールはホイール操作ができず、操作が面倒になってしまうようです。
対策しよう
では、具体的な解決策を考えましょう。対策には以下の3点のいずれかが有効です。
- 適当な位置で文章を改行する。
- CSS（width、floatプロパティ）やテーブルを応用し横の表示幅を固定する。
- CSS（同上）やテーブルを応用して表示幅を%（パーセント）指定にする。
1.の適当な位置で改行する方法は、最も簡易的な方法で、初心者にはお勧めです。
しかし、本質的な解決策とは言えません。よって、2または3の方法がベストです。
CSSやテーブル（表）で全体の表示幅を固定
以下2通りの方法はいずれも、ページを作成する際にデザインをCSSで制御したり、最初に表を挿入して、あらかじめ表示幅を指定し、その中で文字や画像をレイアウトしていく方法です。
画面の表示幅をテーブルやCSSで指定する場合のボックスの幅「width」は650〜800ピクセルあたりが妥当です。
上で述べたように現時点での画面解像度の標準は横が1024ピクセルですが、その下が「800×600ピクセル」ですから、この800ピクセルに合わせるのが適切と言えます。
この方法は全体のデザインが崩れにくいという利点を持ちますが、指定サイズ以下で閲覧した時はやはり横のスクロールが発生します。
CSSやテーブル（表）で全体の表示幅をパーセント指定
2と異なるのは、テーブルのwidthを％（パーセント）で指定します。
常にブラウザの表示領域に対する指定なので、例えば、widthを80％としているならば、ブラウザが横1000ピクセルで閲覧されたときは、800ピクセルに幅が固定されます。
この方法はブラウザに横スクロールバーが出にくいので、小さい画面で見たときに効果を発揮しますが、大画面で見た場合は逆に横が長くなり過ぎて、読みにくいページとなるので注意が必要です。
パソコンのモニターの大画面化が進むことも視野に入れておくことも必要です。
サイトに訪れてくれる人の利用環境が異なることに着目し、その対策を講じましょう。
特に画面解像度は横の長さに注意し、CSSやテーブルを応用して表示幅を固定、またはパーセントで指定しましょう。
