WordPerss > Photo Gallery

1段組 Cascading Style Sheets

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

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

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

01-01サンプルフォーム 01-01ーaファイル 01-01ーaファイル(ソース)
  01-01ーbファイル 01-01-bファイル(ソース)
  01-01ーCファイル 01-01ーCファイル(ソース)

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

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

01-02サンプルフォーム 01-02ーaファイル 01-02ーaファイル(ソース)
  01-02-bファイル 01-02-bファイル(ソース)
  01-02ーCファイル 01-02ーCファイル(ソース)

01-03 ヘッダーにメニューを表示したパターン

ヘッダーの下にメニューを表示して、各リンクをボタンの形にデザインします。メニューの作成には画像を使用しませんので、文字の書き換えや横幅の変更、リンクの追加なども簡単に行うことができます。

01-03サンプルフォーム 01-03ーaファイル 01-03ーaファイル(ソース)
  01-03-bファイル 01-03-bファイル(ソース)
  01-03ーCファイル 01-03ーCファイル(ソース)