スタイルシートによるレイアウトデザイン見本帳　CSS LAYOUTDESIGN SAMPLES

01　トップページ型

01_01　トップページ A
基本編：上部に大きな画像イメージを配置する、汎用性のあるトップページ
応用編：背景画像と組み合わせることで、印象を変える

01_02　トップページ B
基本編：左サイドにナビゲーションを配したトップページ
応用編：CSSによるインタラクション

02　段組み型/逆L字型（2コラム）

02_01　2コラム A（フローズン）
基本編：ブラウザのウィンドウサイズに関わらない横幅固定の、2コラム型レイアウト
応用編：文字サイズの可変ボタン

02_02　2コラム B（リキッド）
基本編：ブラウザウィンドウの幅に追従し伸縮可能な、2コラム型レイアウト
応用編：リキッドレイアウトに対応したタイトル画像の使用法

03　段組み型/逆L字型（3コラム）

03_01　3コラム A（フローズン）
基本編：サイドにメニューを配し、メイン部分が2分割されたレイアウト
応用編：メインコンテンツを3段組にする

03_02　3コラム B（リキッド）
基本編：サイドにメニューを配し、メイン部分が2分割されたレイアウト（リキッド）
応用編：フローズンとリキッドの組み合わせを考える

04　ギャラリー型

04_01　ギャラリー A
基本編：サムネイルイメージを大量に表示する、ギャラリー型メニューページ
応用編：アクセントをつけてページの印象を変える

04_02　ギャラリー B
基本編：サブメニューを表示した、ギャラリー型のコンテンツページ
応用編：テキスト主体のコンテンツページに変更する

05　blog型

05_01　blog A
基本編：サイドバーを左側に配置した、2段組のblogページ
応用編：デザインや表示位置を変更することで、違った印象にする

05_02　blog B
基本編：サイドバーを左右に配置した、3段組のblogページ
応用編：blogをさらにカスタマイズする

06　その他

06_01　登録ページ
基本編：入力フォームを多用した、登録ページ
応用編：目的や機能に応じてフォームをアレンジする

06_02　確認ページ
基本編：表組みを使用した、ショッピングカートの確認ページ
応用編：テーブルのカスタマイズと、プリントアウトへの対応

APPENDIX　CSSリファレンス

お問い合わせ

内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。

正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。

利用許諾に関するお問い合わせ

本書の書影（表紙画像）をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影（表紙画像）以外のご利用については、こちらからお問い合わせください。