０１Highslide JS > ０２Ajax > ０３MooRevolve > ０４その他の機能

１段組　Cascading Style Sheets

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

０１－０１　ヘッダーの横幅を固定したパターン

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

Highslide JS
①This caption can be styled using CSS.
Highslide JS
②This caption can be styled using CSS.
Highslide JS
③This caption can be styled using CSS.
Highslide JS
④This caption can be styled using CSS.
Highslide JS
⑤This caption can be styled using CSS.
Highslide JS
⑥This caption can be styled using CSS.
Highslide JS
⑦This caption can be styled using CSS.
Highslide JS
⑧This caption can be styled using CSS.
Highslide JS
⑨This caption can be styled using CSS.

０１－０２　ヘッダーを画面の横幅いっぱいに表示するパターン

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