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ファイル(ソース) |
---|