2段組 Cascading Style Sheets
ページの左側にサイドバーを入れて、2段組でデザインするパターンです。サイドバーは右側に入れてデザインすることもできます。また、サイドバー部分にはメニューなどをレイアウトして利用します。
02-01 横幅を固定した2段組のパターン
ページの左側にサイドバーを、右にコンテンツを表示したパターンです。全体の横幅は固定して、ブラウザ画面の中央に配置します。また、サイドバー部分には、コンテンツのメニューとフィードファイルへのリンクを表示します。
02-01サンプルフォーム | 02-01_aファイル | 02-01ーaファイル(ソース) |
---|---|---|
02-01_bファイル | 02-01ーbファイル(ソース) | |
02-01_cファイル | 02-01ーcファイル(ソース) |
02-02 横幅が変わる2段組のパターン
ブラウザ画面の横幅に合わせて、2段組の横幅が変わるパターンです。ただし、サイドバー上の横幅が大きく変わると使いにくくなりますので、サイドバーだけは横幅を固定して表示します。
02-02サンプルフォーム | 02-02ーaファイル | 02-02ーaファイル(ソース) |
---|---|---|
02-02-bファイル | 02-02-bファイル(ソース) | |
02-02ーCファイル | 02-02ーCファイル(ソース) |
02-03 サイドバーをコンテンツと同じ高さで表示するパターン
サイドバーをコンテンツ部分と同じ高さで表示する2段組のパターンです。サイドバーの中に記述した内容が少なくてもバーが下まで表示されますので、空白を作らずに全体のバランスを取ることができます。。
02-03サンプルフォーム | 02-03ーaファイル | 02-03ーaファイル(ソース) |
---|---|---|
02-03-bファイル | 02-03-bファイル(ソース) | |
02-03ーCファイル | 02-03ーCファイル(ソース) | |
02-03ーdファイル | 02-03ーdファイル(ソース) | |
02-03ーeファイル | 02-05ーeファイル(ソース) | |
02-03ーfファイル | 02-03ーfファイル(ソース) |
02-04 2段組を罫線で区切ってデザインするパターン
2段組を構成するヘッダー、サイドバー、コンテンツ、フッターの各パーツを罫線で区切ってデザインするパターンです。罫線が目立つように、全体的に白やグレーを基調としたシンプルなデザインで仕上げます。。
02-04サンプルフォーム | 02-04ーaファイル | 02-04ーaファイル(ソース) |
---|---|---|
02-04-bファイル | 02-04-bファイル(ソース) | |
02-04ーCファイル | 02-04ーCファイル(ソース) |