目次

1章 Web Standardsの基本

1-1. Web Standardsとは

• 1-1-1.(X)HTML+CSSを用いてWebリソースを作成する
• 1-1-2.Web Standardsに従うメリット
• 1-1-3.使用する(X)HTMLやCSSのバージョン

2章 (X)HTMLの基本

2-1. HTMLとXHTMLに共通して覚えておくべきこと

• 2-1-1.id属性とclass属性の違い
• 2-1-2.見出しレベルの重要性

2-2. HTMLとXHTMLにおける違い

• 2-2-1.SGMLベースかXMLベースか
• 2-2-2.要素の書き方
• 2-2-3.id属性とname属性
• 2-2-4.Media Typesについて
• 2-2-5.HTML互換性ガイドライン

2-3. (X)HTMLはまず文章ありき

• 2-3-1.まずはマークアップのことを考えずに文章を書く
• 2-3-2.その文章のタイトルは何か
• 2-3-3.その文章の中で見出しにすべき部分は何か
• 2-3-4.見出しだけを抜き出して正しい目次になるか
• 2-3-5.ブロックレベル要素でマークアップする
• 2-3-6.インラインレベル要素でマークアップする
• 2-3-7.body要素の後にhead要素、html要素をマークアップする
• 2-3-8.DOCTYPEは最終的に宣言する
• 2-3-9.必要に応じてXML宣言をする
• 2-3-10.マークアップ順序のまとめ
• 2-3-11.(X)HTMLによる論理的なマークアップ
• 2-3-12.div要素による構造化
• 2-3-13.id属性はどの要素に対して指定するべきか
• 2-3-14.head要素内の記述について

3章 CSSの基本

3-1. これだけは守らなければならない書式

• 3-1-1.CSSの大まかな構文
• 3-1-2.declaration block（宣言ブロック）

3-2. 心がけるとメンテナンスしやすい書式

• 3-2-1.宣言の記述順の規則を定めておく
• 3-2-2.CSSの視認性を高める
• 3-2-3.XHTMLのモジュールごとに要素型セレクタを配置
• 3-2-4.CSSの先頭にガイドラインをメモしておく

3-3. CSS管理のコツ

• 3-3-1.各種の値の形式をしっかり理解する
• 3-3-2.セレクタ、カスケード、継承の理屈をしっかり理解する
• 3-3-3.固定スタイルシート・優先スタイルシート・代替スタイルシート
• 3-3-4.xml-stylesheet処理命令
• 3-3-5.@import規則を用いた複数のCSSの連携
• 3-3-6.link要素、style要素のmedia属性と@media規則
• 3-3-7.ブラウザごとのデフォルトスタイルをリセット
• 3-3-8.ベースとなるスタイルを指定する

3-4. 視覚整形フォーマット

• 3-4-1.ボックスモデル
• 3-4-2.包含ブロック
• 3-4-3.通常フロー

4章 floatプロパティを利用したレイアウト

4-1. 寄せと流し込み

• 4-1-1.画像を寄せる
• 4-1-2.表を寄せる
• 4-1-3.見出しを寄せる
• 4-1-4.フロートと周囲のボックスの関係
• 4-1-5.流し込みの解除

4-2. 重なったブロックボックスにマージン

• 4-2-1.見出しと本文の列を分割したレイアウト
• 4-2-2.ナビゲーションと本文の列を分割したレイアウト

4-3. 複数フロートの横並び

• 4-3-1.画像を敷き詰めて表示する
• 4-3-2.横並びのタブ型ナビゲーション
• 4-3-3.カラムレイアウトへの応用

4-4. ネガティブマージンを利用したレイアウト

• 4-4-1.子供セレクタに対応しないブラウザ
• 4-4-2.フロートするボックスの重なり順序

4-5. floatプロパティを利用したレイアウトの使い分け

• 4-5-1.「重なったブロックボックスにマージン」のレイアウト方法
• 4-5-2.「複数フロートの横並び」のレイアウト方法

4-6. フロートしたボックスを含む親ボックスの高さの算出

• 4-6-1.後続の要素でfloatをclearする
• 4-6-2.clearを指定できる要素がない場合
• 4-6-3.幅を明示的に指定できない場合

5章 positionプロパティを利用したレイアウト

5-1. 指定できる4つの配置方法

• 5-1-1.static－通常配置
• 5-1-2.relative－相対配置
• 5-1-3.absolute－絶対配置
• 5-1-4.fixed－固定配置

5-2. 絶対配置を利用したレイアウト

• 5-2-1.カラムレイアウトへの利用
• 5-2-2.絶対配置の基点を変える
• 5-2-3.複数の基点を利用したレイアウト

5-3. 固定配置を利用したレイアウト

• 5-3-1.ナビゲーションを常に上部に表示する
• 5-3-2.フレームのように表示するカラムレイアウトへの利用
• 5-3-3.固定配置に対応していないブラウザの対処

6章 実践レイアウト

6-1. レイアウトパターン

• 6-1-1.1カラム フロート流し込み / floatプロパティ
• 6-1-2.2カラム フロート＋重なったボックスにマージン / floatプロパティ
• 6-1-3.2カラム 複数フロート＋重なったボックスにマージン / floatプロパティ /li>
• 6-1-4.3カラム 左右メニュー複数フロート＋重なったボックスにマージン / floatプロパティ
• 6-1-5.3カラム 右メニュー2カラム複数フロート＋重なったボックスにマージン / floatプロパティ
• 6-1-6.2カラム 複数フロート / floatプロパティ
• 6-1-7.3カラム 複数フロート / floatプロパティ
• 6-1-8.2カラム 複数フロート＋クリア
• 6-1-9.2カラム 複数フロート＋ネガティブマージン / floatプロパティ
• 6-1-10.2カラム 絶対配置＋重なったボックスにマージン / positionプロパティ
• 6-1-11.3カラム 絶対配置＋重なったボックスにマージン / positionプロパティ
• 6-1-12.3カラム 右メニュー2カラム絶対配置＋重なったボックスにマージン / positionプロパティ

6-2. 複合レイアウトで情報を整理したブログページの制作

• 6-2-1.XHTML文書の制作
• 6-2-2.CSSファイルのモジュール化
• 6-2-3.ベースとなるスタイルの制作
• 6-2-4.主要なレイアウトの構築
• 6-2-5.細部のスタイルの指定
• 6-2-6.フッターのスタイル

6-3. ボックスを自由に配置したページデザイン

• 6-3-1.XHTML文書の制作
• 6-3-2.ベースとなるスタイルの制作
• 6-3-3.主要なレイアウトの構築
• 6-3-4.ボタンメニューのスタイル
• 6-3-5.フッター領域のスタイリング

7章 XHTML&CSS Tips

• 7-1. トピックパスのマークアップ
• 7-2. outlineプロパティによるドロップシャドウ
• 7-3. Mac OS XのDock風ナビゲーション
• 7-4. CSSによる自動番号付け（カウンタ生成）
• 7-5. CSSでフォトギャラリー
• 7-6. アイコンリモート表示メニュー
• 7-7. CSSを使って画像をポップアップ表示
• 7-8. CSSだけで動作するドロップダウンメニュー
• 7-9. 背景画像を利用したロールオーバー効果
• 7-10. visibilityプロパティを利用してimg要素をロールオーバー
• 7-11. さまざまなブラウザでフォントの見栄えを揃えるCSSライブラリ
• 7-12. IE 6以下での子供セレクタの使用
• 7-13. 印刷用CSSの作成
• 7-14. line-heightプロパティの指定値
• 7-15. 定義リストのdtとddを横並びさせる
• 7-16. 背景画像を利用して訪問済みリンクを一工夫する
• 7-17. img要素のサイズをCSSで指定
• 7-18. positionプロパティを利用して要素を画面中央に固定
• 7-19. positionプロパティでフッタを常に画面の下部に固定
• 7-20. 行ボックスの高さで垂直センター配置
• 7-21. 背景画像を利用した画像置換
• 7-22. リンク先のファイルタイプをCSSで明示する
• 7-23. CSSでフォームをスタイリング
• 7-24. モダンブラウザ向けのCSSハック

Appendix

• Appendix-1. DTDの読み方ガイド
• Appendix-2. DOCTYPEスイッチの一覧表
• Appendix-3. CSS 2.1の各プロパティリファレンス
• Appendix-4. CSS3で新たに定義されるセレクタ