1段組 Cascading Style Sheets
ページの上から順にヘッダー、コンテンツ、フッターを配置してページを構成します。 Webページが上から下へスクロールする形式であることから、 昔から一番よく利用されてきたパターンです。
01-01 ヘッダーの横幅を固定したパターン
ヘッダーの横幅を固定してページをデザインしたパターンです。 シンプルなスタイルですが全体のバランスも取りやすく、すっきりと見せることができます。 1段組ですので画面を広く使うことができる反面、 コンテンツを横幅いっぱいに広げすぎてレイアウトが間延びしないよう注意。
《実行ファイル》 | 《コメント:ソースを参考にしてください》 |
---|---|
①sample01-01.html | ● |
②variation-a.html | ● |
③variation-b.html | ● |
01-02 ヘッダーを画面の横幅いっぱいに表示するパターン
ページの周りの余白を消して、ブラウザ画面の横幅いっぱいにヘッダーを表示するパターンです。 画面の横幅を大きくしても、常に画面横幅を広く使っている印象になります。 ここでは、フッター部分の区切り線も画面の横幅いっぱいに表示します。 また、コンテンツ部分は常に画面の中央に表示して全体のバランスを取ります。
①sample01-02.html | ● |
---|---|
②variation-a.html | ● |
③variation-b.html | ● |
01-03 ヘッダーにメニューを表示したパターン
ヘッダーの下にメニューを表示して、各リンクをボタンの形にデザインします。 メニューの作成には画像を使用しませんので、文字の書き換えや横幅の変更、 リンクの追加なども簡単に行うことができます。
①sample01-03.html | ● |
---|---|
②variation-a.html | ● |
③variation-b.html | ● |