閲覧者の環境によって見え方が変わることも考えよう







このページはわざと見にくいように書かれています。　こちらに進んでください。



webページを作る上で、誰もがきれいに、自分の思う通りに表示させたいというのは当然のことだと思いますが、
しかし、実際にあなたのページはそのように作成されているでしょうか？
ここでは、順を追ってあなたのページをより多くの人にあなたが自分のページを見ているのと同じように表示する方法を
探ってみようと思います。



１．OS（オペレーティングシステム）
いわゆるウィンドウズか、マックか？？　といったことになるのでしょうが、〜〜(m--)mはウィンドウズです。
残念ながらマックへの対応は一切考えて作成していません。　もっていないのでしょうがないです。　
本当はこれではいけないんでしょうが確認のしようすらないわけですし、、、、。
ですので、ここでの解説はウィンドウズに限定してということになります。
ちなみに〜〜(m--)mの運営しているここ以外のサイトで取っている01年７月のアクセスログの集計結果ですと、
このような数字が出ています。

　18,320: Windows 98 :
　 3,139: Windows 2000 :
　 1,725: Windows 95 :
　 1,083: Windows NT :
　　　50: 未知のWindows :
　　　 2: Windows 32-bit : 1: Windows 3.1 2:
　　 783: Macintosh PowerPC 3:
　　　30: Unix : 29: Linux : 1: SunOS 4:
　　　24: 未知のOS (携帯電話/携帯端末/専用ワープロなど)

25,156-（783+30+24）＝24,319（96.66%）



２．ブラウザ
よく耳にするのが、ネットスケープナビゲーターへの対応ですが、果たしてあなたのページはそれ以前に
インターネットエクスプローラーにきちんと対応しているのでしょうか？

4,499: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98; Win 9x 4.90)
4,423: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98)
3,649: Mozilla/4.0 (compatible; MSIE 5.0; Windows 98; DigExt)
3,158: Mozilla/4.0 (compatible; MSIE 5.01; Windows 98)
1,908: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)
　921: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)
　531: Mozilla/4.0 (compatible; MSIE 4.01; Windows 98)
　440: Mozilla/4.0 (compatible; MSIE 5.0; Mac_PowerPC)
　353: Mozilla/4.0 (compatible; MSIE 5.5; Windows 95)
　300: Mozilla/4.0 (compatible; MSIE 5.01; Windows 95)
　300: Mozilla/4.0 (compatible; MSIE 4.01; Windows 95)
　287: Mozilla/4.0 (compatible; MSIE 5.0; Windows 95; DigExt)
　275: Mozilla/4.0 (compatible; MSIE 6.0b; Windows 98)
　249: Mozilla/4.0 (compatible; MSIE 5.0; Windows NT; DigExt)
　221: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 4.0)
　199: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT)
　198: Mozilla/4.0 (compatible; MSIE 5.5; MSN 2.5; Windows 98)
　152: Mozilla/4.0 (compatible; MSIE 5.0; Windows 98)
　140: Mozilla/4.0 (compatible; MSIE 4.5; Mac_PowerPC)
　139: Mozilla/4.0 (compatible; MSIE 6.0b; Windows 98; Win 9x 4.90)
　110: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98; MSOCD; AtHomeJP191)
　100: Mozilla/4.0 (compatible; MSIE 4.01; Windows NT)
　 91: Mozilla/4.0 (compatible; MSIE 5.0; MSN 2.5; Windows 98; DigExt)
　 90: Mozilla/4.75 [ja] (WinNT; U)
　 89: Mozilla/4.0 (compatible; MSIE 6.0b; Windows NT 5.0)
　 85: Mozilla/4.7 [ja] (Win98; I)
　 74: Mozilla/4.7 [ja] (Macintosh; I; PPC)
　 61: Mozilla/4.6 [ja] (Win95; I)
　 58: Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)
　 58: Mozilla/4.73 [ja] (Windows NT 5.0; U)
　 54: Mozilla/4.73 [ja] (Win98; U) 51: Mozilla/4.7 [ja] (WinNT; I)
　 50: Mozilla/4.75 [ja] (Win98; U)
　 50: Mozilla/4.5 [ja] (Win95; I)
　 49: Mozilla/4.0 (compatible; MSIE 5.5; Windows
　 98; Win 9x 4.90; MSOCD; AtHomeJP191)
　 46: Mozilla/4.7 [ja] (Macintosh; U; PPC)
　 44: Mozilla/4.73 [ja] (Win95; U) 41: Mozilla/4.7 [ja] (Win98; U)
　 38: Mozilla/4.0 (compatible; MSIE 5.01; Windows 98; MSOCD; AtHomeJP0109)
　 38: Mozilla/4.0 (compatible; MSIE 4.0; Windows 95)
　 36: Mozilla/4.0 (compatible; MSIE 4.01; MSN 2.5; Windows 98)
　 34: Mozilla/4.7 [ja] (Win95; I)
　 33: Mozilla/4.0 (compatible; MSIE 5.5; MSN 2.5; AOL 6.0; Windows 98)
　 33: Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)
　 32: Mozilla/4.0 (compatible; MSIE 5.5; AOL 6.0; Windows 98; Win 9x 4.90)
　 31: Mozilla/4.6 [ja] (Win98; I)
　 30: Mozilla/4.0 (compatible; MSIE 5.5; Mozilla/4.0 (compatible; MSIE 4.01SP1; Windows95/98/NT); IEAK-IOSC)
　 30: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98; Hotbar 2.0)
　 30: Mozilla/4.7 [ja]C-CCK-MCD (Win98; I)
　 29: Mozilla/4.0 (compatible; MSIE 5.01; Windows 98; Hotbar 2.0)
　 29: Mozilla/4.0 (compatible; MSIE 6.0b; MSN 2.5; Windows 98)
　 28: Mozilla/4.0 (compatible; MSIE 5.01; MSN 2.5; Windows 98)
　 27: Mozilla/4.0 (compatible; MSIE 5.5; AOL 6.0; Windows 98)
　 27: Mozilla/5.0 (Windows; U; Win98; ja-JP; rv:0.9.1) Gecko/20010607 Netscape6/6.1b1
　 27: Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0; DigExt)
　 26: Mozilla/4.7 [ja]C-CCK-MCD (Win95; I)
　 26: Mozilla/4.75 [ja]C-CCK-MCD (Windows NT 5.0; U)
　 25: Mozilla/4.6 [ja] (WinNT; I) 25: Mozilla/4.73 [ja]C-CCK-MCD BDPjm-Sony3 (Windows NT 5.0; U)
　 25: Mozilla/4.75 [ja] (Windows NT 5.0; U)
　 23: Mozilla/4.04 [ja] (WinNT; I ;Nav)
　 23: Mozilla/4.0 (compatible; MSIE 5.01; Windows 98; KnowledgeNet 2000)
　 21: Mozilla/4.75 [ja]C-CCK-MCD (Win98; U)
　 21: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98; Win 9x 4.90; MSOCD; AtHomeJP0109)
　 20: Mozilla/4.78 [en] (WinNT; U) 20: Mozilla/4.0 (compatible; MSIE 5.0; AOL 5.0; Windows 98; DigExt) 　
　 20: Mozilla/4.73 [ja] (WinNT; U) 19: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98; ocnie55w0)
　 18: Mozilla/4.0 (compatible; MSIE 5.0; MSN 2.5; Windows 98) 18: Mozilla/4.5 (Macintosh; I; PPC)
　 17: Mozilla/4.0 (compatible; MSIE 6.0b; Windows NT 5.1) 16: Mozilla/4.76 (Macintosh; U; PPC)
　 16: Mozilla/4.0 (compatible; MSIE 5.0; Windows 98; DigExt; ocnie5-1)
　 15: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98; Win 9x 4.90; ocnie5-1)
　 15: Mozilla/4.04 [ja] (Macintosh; I; PPC, Nav) 14: Mozilla/4.75 [ja] (Win95; U)
　 14: Mozilla/4.51 [ja] (Win98; I) 12: Mozilla/4.0 (compatible; MSIE 5.01; Windows 98; AGC000222)
　 12: Mozilla/4.0 (compatible; MSIE 5.5; Windows 95; MSOCD; AtHomeJP191)
　 12: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0; DigExt)
　 12: Mozilla/4.0 (compatible; MSIE 5.5; Windows 98; Win 9x 4.90; ocnie55w0)
　 12: Mozilla/4.0 (compatible; MSIE 5.01; MSN 2.6; Windows 98)
　 12: Mozilla/4.76C-ja [ja/Vine] (X11; U; Linux 2.2.18-0vl4.2 i686)
　 11: Mozilla/2.0 (compatible; MSIE 3.0; Windows 95)
　 11: Mozilla/4.0 (compatible; MSIE 5.5; MSN 2.5; Windows 98; Win 9x 4.90)
　 10: Mozilla/4.0 (compatible; MSIE 5.0; MSN 2.5; Windows 95; DigExt)
　 10: Mozilla/4.0 (compatible; MSIE 5.0; Mac_PowerPC; AtHomeJP191)
　 10: Mozilla/4.0 (compatible; MSIE 5.5; MSNIA; Windows 98; Win 9x 4.90)
　 10: Mozilla/4.0 (compatible; MSIE 5.01; Windows 98; ocnie5-1)
　 10: Mozilla/4.04 [ja] (Win95; I) 10: Mozilla/4.76 [en] (Win98; U)
　491: その他

ご覧のように、現時点では、インターネットエクスプローラーを使用している人のほうが間違いなく多いです。赤字は全てIEです。
それも半数以上の人が、現在の最新ブラウザであるIE5.5を使用していることがわかります。IEのバージョンが5以上の人で9割合以上を占めているといった感じではないでしょうか？
IE以外の人の数は全体の5.2%しかいません。ここで言いたいのはアクセス者のほぼ９割の人に対してきちんとした表示をする前に、残りの5%の人への対応を考えるのは、いかがなものか？ということなんです。
決してネスケ軽視というわけではありません。〜〜(m--)mも事実NN6.01と、4.75を使用しています。しかし、この数を見たときに、まず９割以上の人にきちんとした表示をすることを考えるべきなのではないかということが言いたいわけです。
９割の人の半分の人にはきちんと表示がされているが、残りの人には表示されていない、それなのに、今度はそれ以外の5%の人への表示を考える、、、というのは順番が違うのでは？ということです。
マックでも、IE5.0に関してはスタイルシートの対応がほぼWinと変わらないと聞きます。そこで、ここでいうきちんとした表示をさせる、、、というのはWin、Mac関係なしで、IEの5.0以上のブラウザを使用している人を対象とします。


25,156総数-（1,313IE以外のブラウザ+54UNIXなどのOS）＝23,843（94.7%）

要するに、全体の約95%の人に対しては同じ表示がされるページを作りましょう、ということです。

幸いにして、このサイトはIE5.5以上以外のブラウザでTOPページにアクセスすると、皆さんが見ているTOPページは表示されず、最新IEの導入を促す画面が表示されます。つまり、検索エンジンなどで、直接サイト内のページに来た場合を除いて、このページを見ている人はIEの5.5以上を使用しているということになるわけです。
しかし、そのIEに限定しても意図した通りの表示をするのは簡単なことではありません。

その最たる原因は、環境の違いによるわけですが、ブラウザをIEの5.0以上と限定したとすると他にはどのような環境の違いが考えられるでしょうか？



３．スクリーンの大きさ（解像度）
スクリーンの大きさは一般的にピクセル単位でいいあらわされます。ここで、自分のスクリーンの設定がどうなっているかすら知らない、わからない、、、という人は、ハッキリ言って、あなたが意図している通りに、もしくはあなたが見ているのと同じようにページの表示はされていない、と思って間違いありません。自分のスクリーンの設定を確認するには、デスクトップで右クリックしプロパティー、そして画面の設定のところを見ると確認することができます。あなたの画面の設定はどうなっていましたか？　このスクリーンの解像度に関しては次のような結果が出ています。

　11,648: : 1024x768-16
　 3,069: : 1024x768-32
　 2,980: : 800x600-16
　 2,472: : 1024x768-24
　 1,055: : 800x600-24
　　 873: : 800x600-32
　　 479: : 1024x768-8
　 　449: : 1280x1024-32
　　 348: : 1280x1024-16
　　 235: : 1152x864-16
　　 183: : 800x600-8
　　 177: : 1152x864-32
　　 133: : 1280x1024-24
　　 111: : 1152x864-24
　　 101: : 1600x1200-32
　　　62: : 800x600-18
　　　62: : 1280x1024-8
　　　61: : 1280x960-32
　　　57: : 960x720-16
　　　51: : 640x480-16

 45: : 1152x870-32
39: : 1280x768-16
36: : *
32: : 1600x1200-8
26: : 1400x1050-32
25: : 1152x870-16
24: : 640x480-32
24: : 1600x1200-16
22: : 1400x1050-16
20: : 1920x1200-32
19: : 1024x768-18
17: : 1024x768-0
16: : 1280x960-16
15: : 640x480-24
14: : 1600x1200-24
14: : 1024x480-24
13: : 640x480-8
11: : 1152x768-32
10: : 832x624-16
10: : 1408x1024-32		 9: : 800x600-4
9: : 832x624-32
9: : 1280x600-16
9: : 1024x721-32
9: : 1024x480-16
8: : 960x720-32
7: : 1280x1024-0
6: : 1280x768-32
5: : 1024x512-32
5: : 1152x864-8 43






赤字　： 1024 x 768
青字　：　 800 x 600
緑字　：　横 800 以上
黒字　：　横 800 以下

さて、ここからが困ってしまいます。様々な人がいすぎて絞り込むことができません。そこで、一つの定義をします。
皆さんがページを見ていてうっとおしく感じるのはどのようなページを見ているときですか？　バナー広告やページが重いといったことはここでは考えないとした場合、横スクロールしなくては全体が見れないというページというのはうっとおしく感じませんか？
縦スクロールはある意味しょうがありません。極端に長い場合などは困ってしまいますが、横スクロールに関しては、縦スクロールとは、異なり、たとえほんの少しでもスクロールしなくては全体が見られないというのは、うっとおしいものだ と思います。

そこでこうします。上の数字を見るとわかるのが、ほとんどの人が横800ピクセル以上のスクリーンで見ているということです。14〜15インチモニターの人であればほとんどの人が800x600、もしくは1024x768であると思います。そこで、横800ピクセル以上のモニター解像度の人が画面を最大化している際には、横スクロールなしで、ページの表示がされるようにする。ということを条件にして話を進めたいと思います。


23,843-139＝23,704（94.2%）