スタイルシートによるレイアウトデザイン見本帳 CSS LAYOUTDESIGN SAMPLES
現場ですぐに役立つ！プロがデザインした「ひな形」と「応用術」
スタイルシート（CSS）は、Webのデザインツールの標準です。しかし、それを一から書くのは面倒なことも多いはず。本書は、そんな問題に応えるCSSによるレイアウトデザインの「ひな形」集です。この本は読者の作業効率を上げるものとなるでしょう。また、このサンプルを使いながらCSSによるレイアウトデザインを学ぶこともできます。基本となる段組み型のレイアウトから、ギャラリー型、ブログ型、さらにフォームやショッピングカート用のひな形も用意しています。サンプルだけでなく、その応用方法やカスタマイズ術も解説しているので、現場ですぐに役立ちます。
付属CD-ROMに24のサンプルを収録。
（CD-ROM for Windows＆Macintosh）
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リファレンス
あなたへのおすすめ
関連商品
【MarkeZine Academy】これまでの教科書には載っていない！実践ブランド戦略講座 ～デジタル時代の基礎知識『ブランディング』リアル講義～＜2019年7月25日＞
販売価格：58,320円（税込）
2019.05.14発売【Biz/Zine Academy】「データ分析」×「ロジカルシンキング」基礎演習・講座 ～実務課題とデータ分析をつなげる思考法～＜2019年8月23日＞
販売価格：54,000円（税込）
2019.05.14発売
ログイン