自分の見ているホームページを、みんなが見ているか。

　一生懸命作って、やっと出来上がったホームページ。ブラウザで表示すると、キレイに表示されています。さぁ、ここで問題。あなたが今見ている、自分のホームページ。他の人にも、あなたが見ているように見えてるのでしょうか？

　　答えは、「ややNo」です。これは、見る人の環境が多種多様なのが原因なのですが、そんな細かいことまでをいちいち気にしてたら、とてもじゃないけどホームページなんか作れないと思う人もいるかもしれません。そこで、大きな理由だけを挙げてみると、

　1、画面の解像度が、1024x768（デスクトップの主流）、800x600（ノートパソコンの主流）の1280x768（ワイド型モニタの主流）、1280x1024（大型液晶モニタの主流）といくつか種類があること。

　2、ブラウザによって見え方が違うこと、また、ブラウザのツールバーの設定によって、ホームページが表示される面積が上下すること。

　この２つが考えられます。

　特に、気をつけたいのが、「縦スクロールバー」が表示されるのは問題ないのですが、「横スクロールバー」は表示されないようにしないといけない点です。ホームページの文字は、横書きが基本です。ということは、ホームページの文章を読む際には、当然、目の動きは、左から右へ、また左に戻って右へ、これをくりかえします。

　もし、横スクロールバーが表示されていると、そのページの文章を読む場合、どうなるでしょうか？左から読み始めます。画面右端までいったら、スクロールバーを右に動かして、表示されていないページ右端の文字を表示させて読みます。右端まで読んだら、スクロールバーを左に戻して、次の行の先頭を表示させ、左から読み始めます。画面右端までいったら、再びスクロールバーを…なんと、行ごとにいちいちスクロールバーを動かして読む必要があるのです。次のボタンをクリックして、横スクロールバーがいかに不便か実感してみて下さい。

　こういう悲しいことが起きるのは、大きめのサイズを基本に製作されたホームページを小さめの解像度の人が読むときに生じます。大きめの画面サイズでホームページを作っている人は、横サイズに多少気を使った方がよいかもしれません。

　また、レイヤーとレイヤーではない部分が混在するページの場合、ブラウザのサイズが制作者の意図しているサイズでないと、レイアウトが崩れて表示されることがあります。これは、レイヤーという物は絶対座標で指示するために、画面のサイズを変えても固定されて動かないのに対し、レイヤーではない部分は、相対的な位置指定なので、ブラウザのウインドウサイズにあわせて動くために生じるトラブルです。この問題を解決するには、全ての文字と画像をレイヤーに入れ、全てを絶対的な位置指定に納めるか、もしくは画像のみで構成して、相対的に移動してしまうテキストを排除する必要があります。

　 各ブラウザで表示確認をする

　製作したホームページは、主要なブラウザで実際に表示させ、表示の確認を行うのがベストです。ブラウザはシェア争いが激しい分野で、以前はネットスケープナビゲーターとインターネットエクスプローラーの二つでしのぎを削っていたのですが、現在ではインターネットエクスプローラーがシェアの9割以上を独占している状態です。しかしながら、最近ではFireｆoxや Sleipnir、 Operaといったブラウザが人気を盛り返してきています。

　それぞれのブラウザには独自の機能や独自のHTML解釈があるため、場合によっては、どうしても全てのブラウザで均一に表示させることが難しいかもしれません。そういった際には、「このホームページは、インターネットエクスプローラーで見て下さい」等の記述を最初のページに入れておくといいかもしれません。

　 画面解像度の問題

　最近ではほとんど1024ｘ768解像度の環境が主流になってきてはいますが、それでもノートパソコンで800ｘ600解像度を使う人は少なくないですし、1024x768環境でも「お気に入り」を左側に表示させた状態だと、やはり横サイズが小さくなります。

　そこで、最初から800x600サイズを基準にして作るのが無難なのですが、どうしても1024x768のサイズでレイアウトしたいという場合もあるでしょう。その場合は、トップページだけを1024サイズで作ったり、逆に文字が多いページだけ800サイズを基準で作ったりすると良いでしょう。　　

　なお、800x600環境に合わせたページを作る場合、800x600ギリギリのサイズで作ってはいけません。ブラウザで表示されるページは、ブラウザのツールバーや、スクロールバーなどの影響で、実際に表示されるサイズは760x450程度になります。ブラウザの種類によって最大表示面積は色々異なってくるので、実際に表示させてチェックするのが一番確かでしょう。

　 ウインドウのサイズを強制的に固定する　　

　JavaScriptを使って、ウインドウのサイズを固定することできます。これにより、800x600を基準にして作ったホームページを、強制的に、800x600のウインドウサイズで表示することが可能になります。

　やり方は簡単。ボディタグ（<body....>）のすぐ次に、以下の記述を加えます。

<script language="JavaScript">
<!--
resizeTo(800,600)
//-->
</script>

　800,600の部分が希望するウインドウサイズです。色々調整してみて下さい。ただし、ウインドウのサイズを固定するというのは、見る人の「見心地」を著しく害する結果になります。たとえば貴方のデスクトップ上にあるアイコンを思い浮かべてください。誰かがそのデスクトップアイコンを勝手に並び替えたとしたら、非常に使いにくいと感じませんか？

　それと同じように、ウインドウのサイズも、人それぞれ見やすいサイズにリサイズされていることがほとんどです。ウインドウのサイズを固定することは、そのサイズを作り手が一方的に押しつけることになります。そういった意味で、このテクニックの利用は慎重にすべきでしょう。

　 レイヤーの問題

　最近ではあまり見なくなりましたが、前述したとおりレイヤーと、レイヤーではない部分が混在するページの場合、表示するウインドウのサイズによっては、レイヤーがレイヤーではない部分に重なって、下の文字や画像が見えなくなったり、著しくデザインが狂うことがあります。

　具体的な例を挙げて話しましょう。下の画像が、制作者が意図したレイアウトです（1024x768で表示）。

　画像の部分がレイヤーで表示している部分です。レイヤーで表示されている箇所は、表示位置を絶対座標で指定するので、ブラウザのウインドウ幅をどんなに変えても、表示される場所は変わりません。しかし、文字の部分はブラウザのウインドウサイズに影響を受けて表示される位置が変わります。

　このページを800x600のウインドウサイズで表示すると、

　ブラウザのウインドウ幅が小さくなるので、その分だけ文字が左に移動してしまいます。その結果、文字が「レイヤーの中にあるので動かない画像」と重なってしまい、読めなくなります。

　より、分かりやすいように、実際のページを見てみましょう（800x600の環境の人でも分かるように、横幅が600ピクセルぐらいになったら、文字と画像が重なるようにしてあります）。ここをクリックすると、サンプルページが別ウインドウで表示されます。最初はウインドウサイズを大きくして、次に徐々にウインドウサイズ（横幅）を小さくしていってみて下さい。文字部分がセンタリング処理してあるので、ウインドウサイズに合わせて、文字が動いてしまい、最後には画像に重なってしまいます。

　さて、これはどう対処すればよいか。前述したウインドウのサイズを固定するテクニックを使う方法もありますが、全てをレイヤーの中に入れて、ブラウザのウインドウ幅に左右されないようにデザインする方法があります。

　具体的な対処方法としては、まず、既に存在するレイヤーのZインデックスを全て１多くします。つまり、それぞれひとつ上に上げてやるわけです。次に、一番下に新たなレイヤーを追加します。位置は、X0・Y0にして、横サイズはあなたの希望するサイズ（750など）にします。そして、その新しいレイヤーに、「レイヤーに入っていなかった文字・画像」をすべて入れてやればいいのです（つまり、新しく追加したレイヤーを「普通の場所」だと思って文字や画像を入れます）。

　以上の処理をしたページがここです。ページに表示されているすべてものがレイヤーの中に入っているので、ウインドウのサイズを変えても影響を受けることがなく、それぞれが重なって表示されることがありません。　

[ 戻る ]