スタイルシート・デザイン-詳細目次 | デザインってオモシロイ -MdN Design Interactive-
contents

スタイルシート・デザイン


第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]整理された印象を与える



twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

2.11-2.17