０４ ボックス Cascading Style Sheets
ページの中に１つの四角いボックスを配置して、その中にタイトルやメニュー、 コンテンツなどをレイアウトするパターンです。コンパクトにデザインする分、 スクロールしないでページを閲覧してもらうことができる。
０４－０１ ボックスの形でコンパクトにデザインするパターン
四角いボックスの範囲内に全てのパーツを配置して、コンパクトにデザインするパターンです。 スクロールせずにページを閲覧できるというメリットがありますが、 １ページに表示できるコンテンツの分量は限られます。
| 《実行ファイル》 | 《コメント：ソースを参考にしてください》 |
|---|---|
| ①sample04-01.html | ● |
| ②variation-a.html | ● |
０４－０２ ボックスを２段組みでデザインするパターン
ボックスを２段組みでデザインするパターンです。コンパクトなデザインであっても、 サイドバーにメニューを表示することでナビげーシヨンの効率を高くすることができます。 また、ボックスに収まらないコンテンツはインランフレームの形で表示します。
| ①sample04-02.html | ● |
|---|---|
| ②variation-a.html | ● |
０４－０３ ボックスを画面の横幅いっぱいに表示するパターン
ボックスを画面の横幅いっぱいに表示するパターンです。 ブラウザ画面の大きさに合わして、全体の横幅が変わるように設定します。 またここでは、写真アルバムのページを想定して、写真が映える黒を基調したデザインです。
| ①sample04-03.html | ● |
|---|
RSSフィード