00top > 01chapter1段組 > 02chapter2段組 > 03chapter3段組 > 04chapterボックス > 05chapterアレンジ > 06chapter作品 >
《リンク》 > CSS > CSS_1 > CSS_2 > CSS_3 > CSS_4 > WordPerss >

3段組 Cascading Style Sheets

コンテンツの左右にサイドバーを表示して、3段組でデザインするパターンです。 一般的に、左サイドバーにはメニューを、右サイドバーには付加価値的な情報や広告などを表示します。
1ページにたくさんの情報を表示できるというメリットがありますが、 ゴチャゴチャとした印象になりやすいので注意。

03-01 横幅を固定した3段組のパターン

ページの左右にサイドバーを、中央にコンテンツを表示した3段組みのパターンです。 全体の横幅は固定して、ブラウザの中央に配置しています。 また、左サイドバーには階層化したメニューを、右サイドバーには「お知らせ」や 「おすすめコンテンツ」といった付加価値を表示します。

《実行ファイル》 《コメント:ソースを参考にしてください》
①sample03-01.html
②variation-a.html
③variation-b.html

03-02 横幅が変わる3段組のパターン

ブラウザ画面の横幅に合わせて、3段組の横幅が変わるように設定したパターンです。 左右のサイドバーの横幅だけを固定して、ヘッダー、コンテンツ、 フッダーの横幅が変わるように設定します。

①sample03-02.html

03-03 サイドバーとコンテンツを同じ高さで表示する3段組みのパターンです

左右のサイドバーをコンテンツ部分と同じ高さで表示する3段組みのパターンです。 サイドバーを下まで表示するため余計な余白ができず、バランスの取れたパターンです。 また、左右のサイドバーとコンテンツ部分とを視覚的に区別しやすくなる。

①sample03-03.html

03-04 3段組を罫線で区切ってデザインするパターン

3段組を構成するヘッダー、サイドバー、コンテンツ、フッターの各パーツを 罫線で区切ったパターンです。ブラウザに合わして全体の横幅を変化させ、 左サイドバーと右サイドバーを常に画面の両端に表示させるパターンです。

①sample03-04.html