WordPerss > Photo Gallery

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