スタイルシート・デザイン
第1章 XHTML+CSS 制作の意味とワークフロー
1-1 そもそも、Web 標準ってなんだろう
Web 標準とXHTML+CSS の関係
デザインとWeb 標準はトレードオフの関係ではない
CSS は最適化されたXHTML の存在が前提
1-2 XHTML 基本的な知識とマナー
事前に取り決めておくべき制作ポリシー
XHTML+CSS ワークフローの実際
XHTML の制作プロセス
1-3 CSS の制作プロセス
CSS の制作プロセス
XHTML+CSS の調整作業
第2章 デザインマネジメント
2-1 デザイナーの仕事の範囲
あなたはコーダー? それともデザイナー?
CSS よりXHTML の習得が先
コーディング作業はデザイナーの仕事?
ディレクターにもXHTML+CSS
XHTML+CSS は面白い
2-2 デザイン案をXHTML+ CSS に落とし込む
マークアップの下準備
2-3 管理しやすいXHTML+ CSS のコツ
1. CSS は外部ファイルで
2. CSS の「個別性」と「読み込み順序」というルールを理解する
3. XHTML では見栄えに関する要素・属性を使わない
4. XHTML の効率化
5. CSS の効率化
6. CSS ハックのコツ
第3章 Web 標準で実現するスタイリッシュな画面構成
3-1 固定ナビゲーションを持つコーポレートサイトスタイル
[structure01]ブロックレベル要素で内容をグループ化する
[CSS style01]スタイルのポイント解説01
[structure02]ブロックレベル要素の使い分け
[CSS style02]スタイルのポイント解説02
[sample code]サンプルコード
[Point of Design]グリッドの見える直線的なスタイル
3-2 フリーレイアウト風なスタイル
[structure01]文書構造とdiv 構成の関係
[CSS style01]スタイルのポイント解説01
[structure02]見出しレベルの使い分け
[CSS style02]スタイルのポイント解説02
[sample code]サンプルコード
[Point of Design]小技を使って「箱」を隠す
3-3 色に特徴があるスタイル
[structure01]文字が中心のシンプルな構造
[CSS style01]スタイルのポイント解説01
[structure02]情報として写真を入れる
[CSS style02]スタイルのポイント解説02
[sample code]サンプルコード
[Point of Design]色で空間を作る
3-4 段組レイアウト
[structure01]スタイルに気を取られずに内容に意味付けをする
[CSS style01]スタイルのポイント解説01
[structure02]見出しレベルの割り振り方に気を配る
[CSS style02]スタイルのポイント解説02
[sample code]サンプルコード
[Point of Design]比率をうまく使ったレイアウト
3-5 文字中心のレイアウトスタイル
[structure01]見出しレベルの使い分け
[CSS style01]スタイルのポイント解説01
[structure02]ブロックレベル要素で内容をグループ化する
[CSS style02]スタイルのポイント解説02 [sample code]サンプルコード
[Point of Design]整理された印象を与える