■ 横幅は、「固定する。７００以内に収める。」を守る
あなたのサイトを見てください。ウインドウの横幅を広げたら同じようにWebも横に広がりませんか
横幅が大きすぎて横スクロールが出ていませんか
これはページの横幅に関する２つのタブーと考えてください
ページの横幅は「固定する」「７００以内に収める」、この２つが原則
ここではその理由と具体的な解決案をお教えします
１．「固定する」
横幅を固定する、その理由はレイアウトのバランスを保つため
横幅を広げたらWebも横に広がり、レイアウトが崩れるようでは、初めからレイアウトはなかったのと同じ
固定された横幅なら、ウインドウの幅に関係なく常に一定の横幅の中にWebを表示することができ、
スリムでバランスのとれた構成が実現できるのです
実際、世界中の「CoolWeb」やプロが作っている企業ページのほとんどは横幅を固定しています
２．「７００以内に収める」
レイアウト上最も注意すべきことの１つが、横幅は７００ピクセル以内に収めること
横幅があまりに大きいと横スクロールがでてしまうことがあります
横スクロールは、縦スクロールと違って大変苦痛を感じさせます
慣れていないせいでしょうか。とにかく横スクロールが出てしまうサイトは最悪な印象を与えます
注意すべき人は、画面を１０２４×７６８以上に設定している人。
その環境なら滅多なことでは横スクロールは出ないから、知らず知らずのうちに横長になってしまいます
でも世の中には、６４０×４８０や８００×６００の環境の人もいることを忘れないでください
その人達のことも考慮して、６００以内に収めれば満点。どうしても無理なら、７００までに。
８００×６００が主流だそうですから、限界は７５０くらいでしょう。それ以上は大きすぎます
６４０×４８０は少数なので、捨てるかどうかはあなたの判断。ちなみに「21」の横幅は６８０です
とにかくできるだけ横幅を長くしないレイアウトを心がけること
３．具体的な方法
スタイルファイルに 「 .frame {width:700px;} 」 と記述し、ページごとに「class="frame"」で呼び出すだけ。
これだけで「固定する」「７００以内に収める」、この２つを実現できます
本来なら「body」にwidthを設定すれば良いだけですが、ボックス系CSSは「body」設定できないようです
そのため、ページ全体を <DIV class="frame"> で囲むようにしてください
<body><DIV class="frame"> このDIVタグの中に全ての内容を記述 </DIV></body>
すべてのページをこのようにすれば簡単に、「固定する」「７００以内に収める」を実現できます
以前はテーブルタグで囲むことによって対処していました
しかしこの方法はページの表示を遅くしたり、再構成が難しくなるなど問題がありました
スタイルシートによりこれらの問題は解決されました。これだけでもCSSの必要性の大きさがわかると思います
追記：21WebSpiderではリニューアルにより、この「横幅７００」を守っていません。
これはデザインを優先したのと、現在では１０２４×７６８の画面サイズが主流だということからです。
しかし実際にはそれ以下の画面の方もまだまだ多いでしょうし、７００以下を今でもお勧めします。
[ → BACK ]