01Highslide JS > 02Ajax > 03MooRevolve > 04その他の機能

1段組 Cascading Style Sheets

ページの上から順にヘッダー、コンテンツ、フッターを配置してページを構成します。Webページが上から下へスクロールする形式であることから、昔から一番よく利用されてきたパターンです。

01-01 ヘッダーの横幅を固定したパターン

ヘッダーの横幅を固定してページをデザインしたパターンです。シンプルなスタイルですが全体のバランスも取りやすく、すっきりと見せることができます。1段組ですので画面を広く使うことができる反面、コンテンツを横幅いっぱいに広げすぎてレイアウトが間延びしないよう注意。

MooRevolver サンプル

富士山
夕焼け
富山湾
白糸の滝
高原の朝
苔
ベイブリッジ
たんぽぽ

01-02 ヘッダーを画面の横幅いっぱいに表示するパターン

ページの周りの余白を消して、ブラウザ画面の横幅いっぱいにヘッダーを表示するパターンです。画面の横幅を大きくしても、常に画面横幅を広く使っている印象になります。ここでは、フッター部分の区切り線も画面の横幅いっぱいに表示します。また、コンテンツ部分は常に画面の中央に表示して全体のバランスを取ります。