ウインドウ内での配置

 想定する画面サイズを決めたら、次にブラウザ内での表示位置を決定します。
主な方法は、次の3通りです。

左寄せ

 ブラウザの中で、左に寄せて表示する方法です。 標準的なレイアウトといえますが、画面サイズが大きいパソコンで、ウインドウサイズが広い場合は、 右側にスペースが空いてしまうのが欠点です。 写真の例は、「日産フェアレディZ」のページです。

フェアレディZ

中央揃え

 ブラウザの中で、中央に表示する方法です。 ウインドウサイズが大きいパソコンでも、スペースが左右に分配されるのでバランスのとれたデザインを保つことが出来ます。 採用しているサイトも多く、このWEB-LABOも中央揃えを採用しています。 なお、写真の例は「Yahoo!JAPAN」です。

Yahoo!JAPAN

リキッドデザイン

 ブラウザのウインドウサイズの変化と共に、レイアウトの横幅も変化する方法です。 基本的には、ナビゲーション領域などの固定の場所と、コンテンツ領域などの可変の場所で構成されます。 どの様なウインドウサイズに対応できるという利点があります。 写真の例は「日経ネットのIT-PLUS」のページです。リキッドデザインは、ニュースサイトなどによく使われています。

日経ネット IT-PLUS

日経ネット IT-PLUS

2007年1月12日更新

▼WEBデザイン