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

1段組 Cascading Style Sheets

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

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

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

Photo Gallery

百合が原公園の案内【 施設 <交通<花の情報】

(№01) (№02) (№03) (№04) (№05)
(№06) (№07) (№08) (№09) (№10)
(№11) (№12) (№13) (№14) (№15)
(№16) (№17) (№18) (№19) (№20)
(№21) (№22) (№23) (№24) (№25)

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

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

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