技術評論社版 実践 Web Standards Design の書籍内容（もくじ）

こんばんは、 hxxk.jp の真琴です。 公開しても問題ない、ということでしたので、技術評論社から再刊行される実践 Web Standards Design の目次を公開します。

実践 Web Standards Design （九天社版、現在絶版） の方の目次は hxxk.jp の記事にて公開していましたが、今回の再刊行に伴う加筆訂正によって若干の変更があっていますので、改めて公開、ということで。

1. close1 章 Web Standards の基本
   1. closeWeb Standards とは
      1. (X)HTML+CSS を用いて Web リソースを作成する
         • [Column] HTML 5
      2. closeWeb Standardsに従うメリット
         1. さまざまな UA へ同一のリソースで情報発信できる
         2. 共通ルールに従うことで再利用性が向上する
      3. close使用する (X)HTML や CSS のバージョン
         1. (X)HTML のバージョン
            • [Column] 主要モダンブラウザの CSS 2.1 対応状況
         2. CSS のバージョン
            • [Column] Acid2 Browser Test
2. close2 章 (X)HTML の基本
   1. closeHTML と XHTML に共通して覚えておくべきこと
      1. closeid 属性と class 属性の違い
         1. id 属性の大文字・小文字の区別
         2. 数字から始まる class 属性値
      2. 見出しレベルの重要性
         • [Column] 見出しレベルのスキップ
   2. closeHTML と XHTML における違い
      1. SGML ベースか XML ベースか
         • [Column] XML という略語の表記にまつわるこぼれ話
      2. close要素の書き方
         1. 大文字・小文字の区別
         2. 開始タグ・終了タグ、空要素
      3. id 属性と name 属性
      4. closeMedia Types について
         1. meta http-equiv による Media Types の指定
            • [Column] IE の問題点
      5. HTML 互換性ガイドライン
   3. close(X)HTMLはまず文章ありき
      1. まずはマークアップのことを考えずに文章を書く
      2. その文章のタイトルは何か
         • [Column] title 要素にサイト名や会社名を入れる場合は前 ? 後 ?
      3. その文章の中で見出しにすべき部分は何か
      4. 見出しだけを抜き出して正しい目次になるか
      5. closeブロックレベル要素でマークアップする
         • [Column] h1 要素にサイト名や会社名を入れる場合は全ページ共通 ?
         1. ブロックレベル要素とは
      6. インラインレベル要素でマークアップする
         • [Column] body 要素の直下にインラインレベル要素は配置できないのか
      7. body 要素の後に head 要素、 html 要素をマークアップする
      8. DOCTYPE は最終的に宣言する
      9. close必要に応じて XML 宣言をする
         1. XML 宣言の記述
            • [Column] なぜ暫定的に Strict DTD を宣言するのか
         2. XML 宣言の省略
         3. XML 宣言における IE 7 のバグ
            • [Column] 後方互換モードで解釈されるとどうなる ?
      10. マークアップ順序のまとめ
      11. (X)HTML による論理的なマークアップ
      12. closediv 要素による構造化
          1. XHTML 2.0による構造化
          2. XHTML 1.0による構造化
          3. 複数の h1 レベルの出現も許容
      13. closeid 属性はどの要素に対して指定するべきか
          • [Column] div class="section" で構造化する場合の副次的メリット
          1. id 属性が指し示す範囲
      14. closehead 要素内の記述について
          • [Column] 内部スタイルシートと外部スタイルシート
          1. head 要素内の内容を可視化すること
          • [Column] meta http-equiv によるコンテンツ内容の指定
3. close3 章 CSS の基本
   1. closeこれだけは守らなければならない書式
      1. closeCSS の大まかな構文
         1. @charset 規則
         2. @import 規則
      2. declaration block （宣言ブロック）
         • [Column] プロパティや値を記述する際に空白文字を含めてもよいのか
   2. close心がけるとメンテナンスしやすい書式
      1. close宣言の記述順の規則を定めておく
         1. 例1： CSS2 Specification に挙げられている順番で記述
         2. 例2：分類ごとに記述
      2. closeCSSの視認性を高める
         1. 規則集合の記述
         2. 規則集合におけるセレクタの記述
         3. 宣言の出現順序
         4. 宣言におけるプロパティの記述
         5. 宣言における値の記述
         6. コメントの記述
         7. @ 規則における注意点
            • [Column] @ 規則以外でもインデントを行う
         8. 特定のブラウザの仕様に対する配慮
      3. XHTML のモジュールごとに要素型セレクタを配置
      4. CSS の先頭にガイドラインをメモしておく
   3. closeCSS 管理のコツ
      1. 各種の値の形式をしっかり理解する
         • [Column] IE と inherit 値
      2. closeセレクタ、カスケード、継承の理屈をしっかり理解する
         1. セレクタ
            • [Column] 擬似要素と擬似クラスの記述上の区別
         2. 継承
         3. カスケード
            • [Column] 固有性における CSS2 と CSS 2.1 の違い
      3. 固定スタイルシート・優先スタイルシート・代替スタイルシート
         • [Column] IE の !important のバグ
         • [Column] 代替スタイルシートにおける Opera 7.x のバグ
      4. xml-stylesheet 処理命令
         • [Column] xml-stylesheet 処理命令を挿入する位置
      5. @import 規則を用いた複数の CSS の連携
      6. link 要素、 style 要素の media 属性と @media 規則
      7. ブラウザごとのデフォルトスタイルをリセット
      8. ベースとなるスタイルを指定する
         • [Column] 次世代の XHTML & CSS
   4. close視覚整形フォーマット
      1. ボックスモデル
         • [Column] IE のボックスモデルの解釈
      2. 包含ブロック
      3. 通常フロー
4. close4 章 float プロパティを利用したレイアウト
   1. close寄せと流し込み
      1. 画像を寄せる
      2. 表を寄せる
      3. 見出しを寄せる
      4. フロートと周囲のボックスの関係
      5. 流し込みの解除
   2. close重なったブロックボックスにマージン
      1. 見出しと本文の列を分割したレイアウト
      2. ナビゲーションと本文の列を分割したレイアウト
   3. close複数フロートの横並び
      1. 画像を敷き詰めて表示する
      2. 横並びのタブ型ナビゲーション
      3. カラムレイアウトへの応用
   4. closeネガティブマージンを利用したレイアウト
      1. close
         1. 子供セレクタに対応しないブラウザ
      2. フロートするボックスの重なり順序
   5. closefloat プロパティを利用したレイアウトの使い分け
      1. 「重なったブロックボックスにマージン」のレイアウト方法
      2. 「複数フロートの横並び」のレイアウト方法
   6. closeフロートしたボックスを含む親ボックスの高さの算出
      1. close親ボックスの高さを算出させる方法
         1. 後続の要素で float を clear する
         2. clear を指定できる要素がない場合
         3. 幅を明示的に指定できない場合
5. close5 章 position プロパティを利用したレイアウト
   1. close指定できる 4 つの配置方法
      1. static－通常配置
      2. relative－相対配置
      3. absolute－絶対配置
      4. fixed－固定配置
   2. close絶対配置を利用したレイアウト
      1. カラムレイアウトへの利用
      2. 絶対配置の基点を変える
      3. 複数の基点を利用したレイアウト
   3. close固定配置を利用したレイアウト
      1. ナビゲーションを常に上部に表示する
      2. フレームのように表示するカラムレイアウトへの利用
      3. 固定配置に対応していないブラウザの対処
         • [Column] JavaScript で擬似的に固定配置を表現する
6. close6 章 実践レイアウト
   1. closeレイアウトパターン
      1. 1 カラム フロート流し込み / float プロパティ
      2. 2 カラム フロート＋重なったボックスにマージン / float プロパティ
      3. 2 カラム 複数フロート＋重なったボックスにマージン / float プロパティ
      4. 3 カラム 左右メニュー複数フロート＋重なったボックスにマージン / float プロパティ
      5. 3 カラム 右メニュー 2 カラム複数フロート＋重なったボックスにマージン / float プロパティ
      6. 2 カラム 複数フロート / float プロパティ
      7. 3 カラム 複数フロート / float プロパティ
      8. 2 カラム 複数フロート＋クリア
      9. 2 カラム 複数フロート＋ネガティブマージン / float プロパティ
      10. 2 カラム 絶対配置＋重なったボックスにマージン / position プロパティ
      11. 3 カラム 絶対配置＋重なったボックスにマージン / position プロパティ
      12. 3 カラム 右メニュー 2 カラム絶対配置＋重なったボックスにマージン / position プロパティ
   2. close複合レイアウトで情報を整理したブログページの制作
      • [Column] 見出しとデザイン
      1. closeXHTML 文書の制作
         1. 基本要素のマークアップ
         2. DOCTYPE の宣言と div 要素による構造の補強
      2. CSS ファイルのモジュール化
      3. ベースとなるスタイルの制作
      4. close主要なレイアウトの構築
         • [Column] IE の互換モードでのボックスのセンタリング
         1. div#content 内のレイアウト
            • [Column] IE 6 でフロートするボックスのマージンが増加するバグ
         2. div#main 内のレイアウト
            • [Column] フロートの入れ子による複雑なレイアウト
      5. close細部のスタイルの指定
         1. div#header 内のスタイル
         2. div.entry 内のスタイル
         3. div#headline 内のスタイル
         4. dl#subNavi 内のスタイル
            • [Column] Windows 版の IE 6 で li 要素の上下に隙間が生じるバグ
      6. フッターのスタイル
   3. closeボックスを自由に配置したページデザイン
      1. XHTML 文書の制作
      2. ベースとなるスタイルの制作
      3. close主要なレイアウトの構築
         1. 絶対配置させるボックスの領域を作る
         2. h1 要素を通常フローから外して重ね合わせる
         3. インフォメーションの配置
         4. コンテンツメニューの配置
         5. その他のコンテンツメニューの配置
      4. ボタンメニューのスタイル
      5. フッター領域のスタイリング
7. close7 章 XHTML&CSS Tips
   1. トピックパスのマークアップ
   2. outline プロパティによるドロップシャドウ
   3. Mac OS X の Dock 風ナビゲーション
   4. CSS による自動番号付け（カウンタ生成）
      • [Column] カウンタによる番号生成は構造とは別もの
      • [Column] カウンタを 1、 3、 5......としたい場合
      • [Column] IE 8 の対応状況について
   5. CSS でフォトギャラリー
      • [Column] スタックレベルのレート
   6. アイコンリモート表示メニュー
      • [Column] position プロパティの値
   7. CSS を使って画像をポップアップ表示
   8. CSS だけで動作するドロップダウンメニュー
   9. 背景画像を利用したロールオーバー効果
      • [Column] 背景画像を 1 つにまとめる理由
   10. visibility プロパティを利用して img 要素をロールオーバー
       • [Column] visibility プロパティによる不可視化
   11. さまざまなブラウザでフォントの見栄えを揃える CSS ライブラリ
   12. IE 6 以下での子供セレクタの使用
   13. 印刷用 CSS の作成
   14. line-height プロパティの指定値
       • [Column] 単位なしの指定はエラー ?
   15. 定義リストの dt と dd を横並びさせる
       • [Column] 非置換要素をフロートさせる場合
   16. 背景画像を利用して訪問済みリンクを一工夫する
   17. img 要素のサイズを CSS で指定
   18. position プロパティを利用して要素を画面中央に固定
   19. position プロパティでフッタを常に画面の下部に固定
   20. 行ボックスの高さで垂直センター配置
   21. 背景画像を利用した画像置換
       • [Column] outline プロパティ対応ブラウザに注意
       • [Column] CSS3 の生成・置換内容モジュール
   22. リンク先のファイルタイプを CSS で明示する
       • [Column] 草案 ( ワーキングドラフト ) である CSS3
   23. CSS でフォームをスタイリング
       • [Column] legend 要素に対する各ブラウザの対応
       • [Column] label 要素
   24. モダンブラウザ向けの CSS ハック
       • [Column] コンディショナルコメント
8. closeAppendix
   1. DTD の読み方ガイド
      • [Column] XHTML 1.1 の DTD について
   2. DOCTYPE スイッチの一覧表
   3. CSS 2.1 の各プロパティリファレンス
   4. CSS3 で新たに定義されるセレクタ
      • [Column] :nth-child 擬似クラスと:nth-of-type 擬似クラスの使い分け