Chapter.1：最新Webデザイン事情

1.1　近年のCSSデザインの動向

• 多様化するCSSデザイン
  • 2002年〜2005年：テクニックのベースとなったサイト
  • 2005年〜2006年：デザインバリエーションの増加

1.2　デザインとコード

• デザインとコードの関係性
• デザイナーとエンジニアに求められるスキル
• デザイン・(X)HTML・CSSの関係
• ルールの架け橋としてのCSS
• 文書構造と親和性の高いデザイン
• デザインのルールを反映するコード

Chapter.2：汎用性の高いレイアウトパターン

2.1　グリッドシステムによる段組のレイアウト

• Webサイトにおけるグリッドシステム
  • 配置の「ルール」を作るグリッドシステム
  • CSSのボックスとグリッドシステムの関係
  • ［Design Showcase］サイト間で統一されたグリッドのルール
  • ［Design Showcase］ルールに則った配置とルールを無視した配置とのバランス
• サンプルとそのデザイン構成
  • 段組レイアウトのメリット
  • グリッドに沿った情報ブロックの配置
  • ブロック同士の余白の関係
• CSSによる段組のレイアウト
  • XHTMLのマークアップ
  • ［Step.1］基本的なスタイルの設定
  • ［Step.2］ロゴとメインビジュアルのレイアウト
  • ［Step.3］3段組のレイアウト
  • ［Step.4］Internet Explorer 6のバグフィックス
  • ［Step.5］回り込みの解除
• カスタマイズ編
  • 3段組から2段組へ
  • 固定幅から可変幅へ
  • 最大幅と最小幅の設定
  • フォントサイズによる可変幅の設定

2.2　CSSで作るタイポグラフィの表現

• Webサイトにおけるタイポグラフィ
  • タイポグラフィの役割
  • CSSで表現できるタイポグラフィ
  • ［Design Showcase］タイポグラフィで魅せるレイアウト
  • ［Design Showcase］情報の種類による効果的なフォントの使い分け
• サンプルとそのデザイン構成
  • フォントとそのサイズ
  • レイアウトを引き締めるカーニング調整
  • 読ませるための本文レイアウト
• CSSによる文字のレイアウト
  • XHTMLのマークアップ
  • ［Step.1］基本的なスタイルの設定
  • ［Step.2］ロゴの基本レイアウト
  • ［Step.3］ロゴの文字間調整
  • ［Step.4］ナビゲーション文字のレイアウト
  • ［Step.5］本文とコピーライト表記のレイアウト
• カスタマイズ編
  • ドロップキャップのレイアウト
  • 和文のレイアウト
  • 見出しと段組のレイアウト

2.3　ナビゲーションのインターフェースデザイン

• Webサイトにおけるナビゲーション
  • ナビゲーションの種類と役割
  • OSのGUIに学ぶインターフェースのデザイン
  • ［Design Showcase］エリアの定義を明確にしたナビゲーションの配置
  • ［Design Showcase］サイトのテイストに揃えたナビゲーションのデザイン
• サンプルとそのデザイン構成
  • ナビゲーションの役割に則した配置
  • 下階層へのリードコンテンツの配置
  • 操作性を高めるインターフェースのデザイン
• CSSによるナビゲーションのレイアウト
  • XHTMLのマークアップ
  • ［Step.1］基本的なスタイルの設定
  • ［Step.2］骨格となるエリアの配置
  • ［Step.3］ロゴとユーティリティナビゲーション
  • ［Step.4］グローバルナビゲーション
  • ［Step.5］パンくずリスト
  • ［Step.6］下階層へのリードコンテンツ
  • ［Step.7］ローカルナビゲーション
  • ［Step.8］フッターナビゲーション
• カスタマイズ編
  • 現在位置を示すデザイン
  • タブ型のナビゲーション
• ［Topics］ブラウザのデフォルトスタイルの統一とその注意点
  • デフォルトスタイルを統一する目的
  • デフォルトスタイルを統一する際の注意点

Chapter.3：JavaScriptを組み合わせた動的なレイアウト

3.1　コンテンツの表示切り替え

• XHTML・CSS・JavaScriptの位置付け
  • まずは適切な文書構造
  • 考慮すべき環境のパターン
  • それぞれの技術の役割分担
• サンプルとそのデザイン構成
  • 環境によるレイアウトのパターン
  • 動作フローの設計
• JavaScriptによるコンテンツの表示切り替え
  • XHTMLのマークアップ
  • ［Step.1］基本的なスタイルの設定
  • ［Step.2］本文のレイアウト
• ［Step.3］ページ読み込み時の要素の表示/非表示設定
  • ［Step.4］ナビゲーションの要素生成
  • ［Step.5］コンテンツ切り替え機能の作成
  • ［Step.6］タブナビゲーションのレイアウト

3.2　Lightboxのレイアウトカスタマイズ

• Lightboxの概要
  • Lightboxとは
  • Lightboxの設置
  • ポップアップの仕組み
• サンプルとそのデザイン構成
  • 写真の美しさを引き立たせるデザイン
  • デフォルトのデザインからの変更点
• Lightboxのカスタマイズ
  • XHTMLのマークアップ
  • ［Step.1］基本的なレイアウト
  • ［Step.2］オーバーレイの透明度の変更
  • ［Step.3］写真の枠の除去
  • ［Step.4］写真の配置位置の変更
  • ［Step.5］キャプションとCloseボタンのレイアウト変更
  • ［Step.6］PrevボタンとNextボタンのレイアウト変更
• ［Topics］HTML5とその将来
  • HTML5とは
  • W3Cの動き

Chapter.4：実例から学ぶレイアウトプロセス

4.1　デザインからコードへ落とし込む技術

• スムーズな橋渡しのために
  • デザインルールの言語化
  • 最適な方法を選び出す力
• サンプルサイトとその概要
• レイアウトプロセス
  • 見出しレベルの決定
  • 要素のマークアップとグループ化
  • ボックス配置の計画
  • 段組レイアウトの手法
  • ヘッダーイメージのスライス構成
  • テキストのレイアウト
  • リストのレイアウト

4.2　効率的なサイト制作を助けるCSSのモジュール管理

• サイトの性質に合わせたCSSの制作フロー
  • ページ毎にCSSを記述していく制作フロー
  • サイト全体を見据えた制作フロー
• サンプルサイトとその概要
• レイアウトプロセス
  • 情報の種類とデザインパターンの確認
  • エリアを定義するXHTMLのマークアップ
  • エリアを定義するXHTMLのマークアップ
  • 汎用的なブロックのマークアップ
  • 節と見出しのマークアップ
  • CSSのモジュール化
  • モジュール別のレイアウト
  • 各種ブラウザでの検証
  • 各ページの組み立て
• ［Topics］仕様策定の段階から定義する汎用的なブロックの構成
  • ブロック単位で行うデザインとコードの策定
  • 得られるメリット

Appendix：

• A.1　DOCTYPE宣言とブラウザのレンダリングモード
• A.2　セレクタ一覧と対応ブラウザ
• A.3　カスケード処理
  • カスケード処理の初段階
  • 出所による優先順位
  • 詳細度による優先順位
  • 位置による優先順位
• A.4　CSSハック
  • 古いブラウザへの対処方法
  • 一部のスタイルの修正に用いるハック
  • 条件付コメント