もくじ

実践 Web Standards Design のもくじ

1. close1 章 Web Standards の基本
   1. closeWeb Standards とは ―― 2 ページ
      1. (X)HTML+CSS を用いて Web リソースを作成する ―― 2 ページ
         • [Column] HTML 5 ―― 3 ページ
      2. closeWeb Standardsに従うメリット ―― 4 ページ
         1. さまざまな UA へ同一のリソースで情報発信できる ―― 4 ページ
         2. 共通ルールに従うことで再利用性が向上する ―― 5 ページ
      3. close使用する (X)HTML や CSS のバージョン ―― 5 ページ
         1. (X)HTML のバージョン ―― 6 ページ
            • [Column] 主要モダンブラウザの CSS 2.1 対応状況 ―― 6 ページ
         2. CSS のバージョン ―― 7 ページ
            • [Column] Acid2 Browser Test ―― 8 ページ
2. close2 章 (X)HTML の基本
   1. closeHTML と XHTML に共通して覚えておくべきこと ―― 10 ページ
      1. closeid 属性と class 属性の違い ―― 10 ページ
         1. id 属性の大文字・小文字の区別 ―― 11 ページ
         2. 数字から始まる class 属性値 ―― 12 ページ
      2. 見出しレベルの重要性 ―― 13 ページ
         • [Column] 見出しレベルのスキップ ―― 14 ページ
   2. closeHTML と XHTML における違い ―― 15 ページ
      1. SGML ベースか XML ベースか ―― 15 ページ
         • [Column] XML という略語の表記にまつわるこぼれ話 ―― 15 ページ
      2. close要素の書き方 ―― 16 ページ
         1. 大文字・小文字の区別 ―― 16 ページ
         2. 開始タグ・終了タグ、空要素 ―― 16 ページ
      3. id 属性と name 属性 ―― 17 ページ
      4. closeMedia Types について ―― 18 ページ
         1. meta http-equiv による Media Types の指定 ―― 19 ページ
            • [Column] IE の問題点 ―― 20 ページ
      5. HTML 互換性ガイドライン ―― 20 ページ
   3. close(X)HTMLはまず文章ありき ―― 25 ページ
      1. まずはマークアップのことを考えずに文章を書く ―― 25 ページ
      2. その文章のタイトルは何か ―― 26 ページ
         • [Column] title 要素にサイト名や会社名を入れる場合は前 ? 後 ? ―― 26 ページ
      3. その文章の中で見出しにすべき部分は何か ―― 27 ページ
      4. 見出しだけを抜き出して正しい目次になるか ―― 28 ページ
      5. closeブロックレベル要素でマークアップする ―― 30 ページ
         • [Column] h1 要素にサイト名や会社名を入れる場合は全ページ共通 ? ―― 30 ページ
         1. ブロックレベル要素とは ―― 31 ページ
      6. インラインレベル要素でマークアップする ―― 32 ページ
         • [Column] body 要素の直下にインラインレベル要素は配置できないのか ―― 32 ページ
      7. body 要素の後に head 要素、 html 要素をマークアップする ―― 33 ページ
      8. DOCTYPE は最終的に宣言する ―― 34 ページ
      9. close必要に応じて XML 宣言をする ―― 36 ページ
         1. XML 宣言の記述 ―― 37 ページ
            • [Column] なぜ暫定的に Strict DTD を宣言するのか ―― 37 ページ
         2. XML 宣言の省略 ―― 40 ページ
         3. XML 宣言における IE 7 のバグ ―― 40 ページ
            • [Column] 後方互換モードで解釈されるとどうなる ? ―― 40 ページ
      10. マークアップ順序のまとめ ―― 41 ページ
      11. (X)HTML による論理的なマークアップ ―― 42 ページ
      12. closediv 要素による構造化 ―― 44 ページ
          1. XHTML 2.0による構造化 ―― 45 ページ
          2. XHTML 1.0による構造化 ―― 47 ページ
          3. 複数の h1 レベルの出現も許容 ―― 51 ページ
      13. closeid 属性はどの要素に対して指定するべきか ―― 51 ページ
          • [Column] div class="section" で構造化する場合の副次的メリット ―― 52 ページ
          1. id 属性が指し示す範囲 ―― 53 ページ
      14. closehead 要素内の記述について ―― 55 ページ
          • [Column] 内部スタイルシートと外部スタイルシート ―― 56 ページ
          1. head 要素内の内容を可視化すること ―― 58 ページ
          • [Column] meta http-equiv によるコンテンツ内容の指定 ―― 59 ページ
3. close3 章 CSS の基本
   1. closeこれだけは守らなければならない書式 ―― 62 ページ
      1. closeCSS の大まかな構文 ―― 62 ページ
         1. @charset 規則 ―― 63 ページ
         2. @import 規則 ―― 63 ページ
      2. declaration block （宣言ブロック） ―― 64 ページ
         • [Column] プロパティや値を記述する際に空白文字を含めてもよいのか ―― 64 ページ
   2. close心がけるとメンテナンスしやすい書式 ―― 66 ページ
      1. close宣言の記述順の規則を定めておく ―― 66 ページ
         1. 例1： CSS2 Specification に挙げられている順番で記述 ―― 66 ページ
         2. 例2：分類ごとに記述 ―― 68 ページ
      2. closeCSSの視認性を高める ―― 70 ページ
         1. 規則集合の記述 ―― 70 ページ
         2. 規則集合におけるセレクタの記述 ―― 70 ページ
         3. 宣言の出現順序 ―― 71 ページ
         4. 宣言におけるプロパティの記述 ―― 71 ページ
         5. 宣言における値の記述 ―― 72 ページ
         6. コメントの記述 ―― 72 ページ
         7. @ 規則における注意点 ―― 73 ページ
            • [Column] @ 規則以外でもインデントを行う ―― 74 ページ
         8. 特定のブラウザの仕様に対する配慮 ―― 75 ページ
      3. XHTML のモジュールごとに要素型セレクタを配置 ―― 75 ページ
      4. CSS の先頭にガイドラインをメモしておく ―― 77 ページ
   3. closeCSS 管理のコツ ―― 83 ページ
      1. 各種の値の形式をしっかり理解する ―― 83 ページ
         • [Column] IE と inherit 値 ―― 87 ページ
      2. closeセレクタ、カスケード、継承の理屈をしっかり理解する ―― 88 ページ
         1. セレクタ ―― 88 ページ
            • [Column] 擬似要素と擬似クラスの記述上の区別 ―― 100 ページ
         2. 継承 ―― 101 ページ
         3. カスケード ―― 101 ページ
            • [Column] 固有性における CSS2 と CSS 2.1 の違い ―― 103 ページ
      3. 固定スタイルシート・優先スタイルシート・代替スタイルシート ―― 103 ページ
         • [Column] IE の !important のバグ ―― 103 ページ
         • [Column] 代替スタイルシートにおける Opera 7.x のバグ ―― 104 ページ
      4. xml-stylesheet 処理命令 ―― 105 ページ
         • [Column] xml-stylesheet 処理命令を挿入する位置 ―― 107 ページ
      5. @import 規則を用いた複数の CSS の連携 ―― 108 ページ
      6. link 要素、 style 要素の media 属性と @media 規則 ―― 112 ページ
      7. ブラウザごとのデフォルトスタイルをリセット ―― 115 ページ
      8. ベースとなるスタイルを指定する ―― 117 ページ
         • [Column] 次世代の XHTML & CSS ―― 128 ページ
   4. close視覚整形フォーマット ―― 129 ページ
      1. ボックスモデル ―― 129 ページ
         • [Column] IE のボックスモデルの解釈 ―― 132 ページ
      2. 包含ブロック ―― 133 ページ
      3. 通常フロー ―― 135 ページ
4. close4 章 float プロパティを利用したレイアウト
   1. close寄せと流し込み ―― 138 ページ
      1. 画像を寄せる ―― 138 ページ
      2. 表を寄せる ―― 139 ページ
      3. 見出しを寄せる ―― 141 ページ
      4. フロートと周囲のボックスの関係 ―― 143 ページ
      5. 流し込みの解除 ―― 145 ページ
   2. close重なったブロックボックスにマージン ―― 148 ページ
      1. 見出しと本文の列を分割したレイアウト ―― 148 ページ
      2. ナビゲーションと本文の列を分割したレイアウト ―― 150 ページ
   3. close複数フロートの横並び ―― 154 ページ
      1. 画像を敷き詰めて表示する ―― 156 ページ
      2. 横並びのタブ型ナビゲーション ―― 158 ページ
      3. カラムレイアウトへの応用 ―― 160 ページ
   4. closeネガティブマージンを利用したレイアウト ―― 164 ページ
      1. close
         1. 子供セレクタに対応しないブラウザ ―― 170 ページ
      2. フロートするボックスの重なり順序 ―― 171 ページ
   5. closefloat プロパティを利用したレイアウトの使い分け ―― 176 ページ
      1. 「重なったブロックボックスにマージン」のレイアウト方法 ―― 176 ページ
      2. 「複数フロートの横並び」のレイアウト方法 ―― 179 ページ
   6. closeフロートしたボックスを含む親ボックスの高さの算出 ―― 184 ページ
      1. close親ボックスの高さを算出させる方法 ―― 186 ページ
         1. 後続の要素で float を clear する ―― 186 ページ
         2. clear を指定できる要素がない場合 ―― 187 ページ
         3. 幅を明示的に指定できない場合 ―― 189 ページ
5. close5 章 position プロパティを利用したレイアウト
   1. close指定できる 4 つの配置方法 ―― 192 ページ
      1. static－通常配置 ―― 192 ページ
      2. relative－相対配置 ―― 193 ページ
      3. absolute－絶対配置 ―― 193 ページ
      4. fixed－固定配置 ―― 194 ページ
   2. close絶対配置を利用したレイアウト ―― 196 ページ
      1. カラムレイアウトへの利用 ―― 196 ページ
      2. 絶対配置の基点を変える ―― 202 ページ
      3. 複数の基点を利用したレイアウト ―― 205 ページ
   3. close固定配置を利用したレイアウト ―― 209 ページ
      1. ナビゲーションを常に上部に表示する ―― 209 ページ
      2. フレームのように表示するカラムレイアウトへの利用 ―― 212 ページ
      3. 固定配置に対応していないブラウザの対処 ―― 215 ページ
         • [Column] JavaScript で擬似的に固定配置を表現する ―― 216 ページ
6. close6 章 実践レイアウト
   1. closeレイアウトパターン ―― 218 ページ
      1. 1 カラム フロート流し込み / float プロパティ ―― 220 ページ
      2. 2 カラム フロート＋重なったボックスにマージン / float プロパティ ―― 222 ページ
      3. 2 カラム 複数フロート＋重なったボックスにマージン / float プロパティ ―― 224 ページ
      4. 3 カラム 左右メニュー複数フロート＋重なったボックスにマージン / float プロパティ ―― 226 ページ
      5. 3 カラム 右メニュー 2 カラム複数フロート＋重なったボックスにマージン / float プロパティ ―― 228 ページ
      6. 2 カラム 複数フロート / float プロパティ ―― 230 ページ
      7. 3 カラム 複数フロート / float プロパティ ―― 232 ページ
      8. 2 カラム 複数フロート＋クリア ―― 235 ページ
      9. 2 カラム 複数フロート＋ネガティブマージン / float プロパティ ―― 237 ページ
      10. 2 カラム 絶対配置＋重なったボックスにマージン / position プロパティ ―― 240 ページ
      11. 3 カラム 絶対配置＋重なったボックスにマージン / position プロパティ ―― 242 ページ
      12. 3 カラム 右メニュー 2 カラム絶対配置＋重なったボックスにマージン / position プロパティ ―― 244 ページ
   2. close複合レイアウトで情報を整理したブログページの制作 ―― 246 ページ
      • [Column] 見出しとデザイン ―― 246 ページ
      1. closeXHTML 文書の制作 ―― 247 ページ
         1. 基本要素のマークアップ ―― 247 ページ
         2. DOCTYPE の宣言と div 要素による構造の補強 ―― 251 ページ
      2. CSS ファイルのモジュール化 ―― 257 ページ
      3. ベースとなるスタイルの制作 ―― 258 ページ
      4. close主要なレイアウトの構築 ―― 263 ページ
         • [Column] IE 6 互換モードでのボックスのセンタリング
         ―― 264 ページ
         1. div#content 内のレイアウト ―― 265 ページ
            • [Column] IE 6 でフロートするボックスのマージンが増加するバグ ―― 268 ページ
         2. div#main 内のレイアウト ―― 270 ページ
            • [Column] フロートの入れ子による複雑なレイアウト ―― 273 ページ
      5. close細部のスタイルの指定 ―― 274 ページ
         1. div#header 内のスタイル ―― 275 ページ
         2. div.entry 内のスタイル ―― 280 ページ
         3. div#headline 内のスタイル ―― 282 ページ
         4. dl#subNavi 内のスタイル ―― 283 ページ
            • [Column] Windows 版の IE 6 で li 要素の上下に隙間が生じるバグ ―― 286 ページ
      6. フッターのスタイル ―― 287 ページ
   3. closeボックスを自由に配置したページデザイン ―― 289 ページ
      1. XHTML 文書の制作 ―― 289 ページ
      2. ベースとなるスタイルの制作 ―― 292 ページ
      3. close主要なレイアウトの構築 ―― 296 ページ
         1. 絶対配置させるボックスの領域を作る ―― 297 ページ
         2. h1 要素を通常フローから外して重ね合わせる ―― 298 ページ
         3. インフォメーションの配置 ―― 299 ページ
         4. コンテンツメニューの配置 ―― 300 ページ
         5. その他のコンテンツメニューの配置
         ―― 301 ページ
      4. ボタンメニューのスタイル ―― 303 ページ
      5. フッター領域のスタイリング ―― 307 ページ
7. close7 章 XHTML&CSS Tips
   1. トピックパスのマークアップ ―― 310 ページ
   2. outline プロパティによるドロップシャドウ ―― 314 ページ
   3. Mac OS X の Dock 風ナビゲーション ―― 317 ページ
   4. CSS による自動番号付け（カウンタ生成） ―― 320 ページ
      • [Column] カウンタによる番号生成は構造とは別もの ―― 320 ページ
      • [Column] カウンタを 1、 3、 5......としたい場合 ―― 323 ページ
      • [Column] IE 8 の対応状況について ―― 327 ページ
   5. CSS でフォトギャラリー ―― 328 ページ
      • [Column] スタックレベルのレート ―― 332 ページ
   6. アイコンリモート表示メニュー ―― 334 ページ
      • [Column] position プロパティの値 ―― 338 ページ
   7. CSS を使って画像をポップアップ表示 ―― 339 ページ
   8. CSS だけで動作するドロップダウンメニュー ―― 342 ページ
   9. 背景画像を利用したロールオーバー効果 ―― 348 ページ
      • [Column] 背景画像を 1 つにまとめる理由 ―― 349 ページ
   10. visibility プロパティを利用して img 要素をロールオーバー ―― 350 ページ
       • [Column] visibility プロパティによる不可視化 ―― 351 ページ
   11. さまざまなブラウザでフォントの見栄えを揃える CSS ライブラリ ―― 352 ページ
   12. IE 6 以下での子供セレクタの使用 ―― 355 ページ
   13. 印刷用 CSS の作成 ―― 357 ページ
   14. line-height プロパティの指定値 ―― 360 ページ
       • [Column] 単位なしの指定はエラー ? ―― 363 ページ
   15. 定義リストの dt と dd を横並びさせる ―― 364 ページ
       • [Column] 非置換要素をフロートさせる場合 ―― 366 ページ
   16. 背景画像を利用して訪問済みリンクを一工夫する ―― 369 ページ
   17. img 要素のサイズを CSS で指定 ―― 372 ページ
   18. position プロパティを利用して要素を画面中央に固定 ―― 375 ページ
   19. position プロパティでフッタを常に画面の下部に固定 ―― 377 ページ
   20. 行ボックスの高さで垂直センター配置 ―― 380 ページ
   21. 背景画像を利用した画像置換 ―― 383 ページ
       • [Column] outline プロパティ対応ブラウザに注意 ―― 385 ページ
       • [Column] CSS3 の生成・置換内容モジュール ―― 387 ページ
   22. リンク先のファイルタイプを CSS で明示する ―― 388 ページ
       • [Column] 草案 ( ワーキングドラフト ) である CSS3
       ―― 391 ページ
   23. CSS でフォームをスタイリング ―― 392 ページ
       • [Column] legend 要素に対する各ブラウザの対応 ―― 396 ページ
       • [Column] label 要素 ―― 398 ページ
   24. モダンブラウザ向けの CSS ハック ―― 399 ページ
       • [Column] コンディショナルコメント ―― 402 ページ
8. closeAppendix
   1. DTD の読み方ガイド の読み方ガイド ―― 404 ページ
      • [Column] XHTML 1.1 の DTD について ―― 409 ページ
   2. DOCTYPE スイッチの一覧表 ―― 410 ページ
   3. CSS 2.1 の各プロパティリファレンス ―― 412 ページ
   4. CSS3 で新たに定義されるセレクタ ―― 422 ページ
      • [Column] :nth-child 擬似クラスと:nth-of-type 擬似クラスの使い分け ―― 426 ページ