W-0015 ページの横幅

※ここに掲載している情報は間違っている可能性が非常に高いので、信用してはならない。これらの情報を信用してアナタが不利益を被ったとしても、それは全てアナタの責任である。

スタイルシートや<table>タグを使ってページ内の横幅を固定してより行き届いたレイアウトを行おうという人は結構居ますが、その横幅に気を使っている人はどのくらいいるでしょうか？

800pixel 、 1024pixel の場合

横幅をテーブルなどを使って 800pixel や 1024pixel 固定でレイアウトしている人をたまに見かけますが、ウィンドウを複数開いてページを閲覧する人もいます（私はそう）ので、 800pixel 幅や 1024pixel 幅だとまず間違いなくページがウィンドウに収まり切らなくなります。

640pixel 幅でも……

Windows の動作環境では 640×480 が最低基準となっていますので、これに合わせれば問題ない……と思いきや、そう考えるのは早計だったりします。実際にはページを表示するブラウザのタイトルバー・上下左右のスクロールバー・ボタンなどがあるため、ページの表示される領域は 640×480 より狭くなってしまう場合が非常に多いです。ですから、テーブルの横幅を 640pixel に設定した場合でも、最悪、横方向に画面からはみ出てしまうことになります（ 640×480 の画面でブラウザを最大化して確認している場合は、それで OK です）。

相対指定が基本

Web 上のコンテンツは、どんな環境の人が見るかわかりません。閲覧者をパソコンユーザーに限定したとしても、画面のサイズ・デスクトップの広さはまちまちです。「これで OK ！」と思っていても、人によっては全然ワケが分からないようなことになっている場合もあります。

Web 上のコンテンツの配置は、よっぽどのことがない限り、なるべく相対指定で行うようにしましょう。「相対指定」とは画面全体に対する割合などの文字通り相対的な値でレイアウトを指定することで、例えば当サイトのトップページでは、コンテンツのメニューは「画面の右の方」に、カウンタは「左の方」に表示されるようにしています。ウィンドウサイズを変えてみればわかりますが、どんなウィンドウサイズでもこの関係は維持されます。これを仮に「画面の右から 10pixel ・画面の左から 10pixel 」と絶対指定でレイアウトしたとすると、ウィンドウを大きく広げた際にメニュー部分だけ画面の右端に表示されてしまい、非常に見苦しいことになってしまいます。そこで、「画面左から60％の位置に配置」という風に指定しているわけです。

参考に

すべての配置を相対指定で行えばレイアウトで悩むことは無くなります……が、すべてを厳格に相対指定するのは相当面倒なことです。そこで、上で書いた「ブラウザのタイトルバーなどによって狭くなったあとの実際の表示領域」の例をリストアップしてみました。

「デスクトップの広さ」→「実際の表示領域」の順で書いてあります。

Back