WordPerss > Photo Gallery

０４　ボックス　Cascading Style Sheets

ページの中に１つの四角いボックスを配置して、その中にタイトルやメニュー、コンテンツなどをレイアウトするパターンです。コンパクトにデザインする分、スクロールしないでページを閲覧してもらうことができる。

０４－０１　ボックスの形でコンパクトにデザインするパターン

四角いボックスの範囲内に全てのパーツを配置して、コンパクトにデザインするパターンです。スクロールせずにページを閲覧できるというメリットがありますが、１ページに表示できるコンテンツの分量は限られます。

０４－０１サンプルフォーム ０４－０１＿ａファイル ０４－０１ーａファイル（ソース）
  ０４－０１＿ｂファイル ０４－０１ーｂファイル（ソース）

０４－０２　ボックスを２段組みでデザインするパターン

ボックスを２段組みでデザインするパターンです。コンパクトなデザインであっても、サイドバーにメニューを表示することでナビげーシヨンの効率を高くすることができます。また、ボックスに収まらないコンテンツはインランフレームの形で表示します。

０４－０２サンプルフォーム ０４－０２ーａファイル ０４－０２ーａファイル（ソース）
  ０４－０２＿ｂファイル ０４－０２ーｂファイル（ソース）

０４－０３　ボックスを画面の横幅いっぱいに表示するパターン

ボックスを画面の横幅いっぱいに表示するパターンです。ブラウザ画面の大きさに合わして、全体の横幅が変わるように設定します。またここでは、写真アルバムのページを想定して、写真が映える黒を基調したデザインです。

０４－０３サンプルフォーム ０４－０３ーａファイル ０４－０３ーａファイル（ソース）