CSSの基礎 その1 > CSSの基礎 その2 > 作例 > 総合

3段組 Cascading Style Sheets

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

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

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

03-01サンプルフォーム 03-01_aファイル 03-01ーaファイル(ソース)
  03-01_bファイル 03-01ーbファイル(ソース)
  03-01_cファイル 03-01ーcファイル(ソース)

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

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

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

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

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

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

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

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

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