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 | ● |
---|