XHTML 1.0 Second Edition/CSS 2.1
Web標準の仕様からコーディングスタイル、
XHTML+CSS Tipsまで

IE7、Firefox 2、Opera 9、Safari 2などの
モダンブラウザに対応

※在庫があれば上記サイトで 　入手できます。	［著］市瀬裕哉、福島英児、望月真琴 ［監］ ［価格］3,360 円（税込） ［判型］B5変型／436頁 ［初版］2007/03/01　 ［ISBN］978-4-86167-164-7

　WWWが登場して以来、それを取り巻く現状は、ずっと変わり続けてきました。軍用ネットワークから民間用ネットワークへの転用、グラフィカルなWebブラウザの登場に伴うWebサイトの隆盛、文字や写真に留まらない多様なコンテンツの提供、あるいは双方向性による一方的な情報擬供に倒まらないコミュニケーション…。

　そんなWebの世界で、近年注目されているのが「Web Standards（Web標準）」です。
　Web Standardsとはどういう概念なのか。Web Standardsに準拠することでどんなメリットを得ることができるのか。どのように制作を進めればWeb Standardsに準拠したリソースを提供できるのか。Web Standardsに準拠しつつも新しく、それでいて魅力あるコンテンツを提供する手法とはどういうものか。
　本番では、それらを次の7章で解説しています。

1　Web Standardsの基本
2　(X)HTMLの基本
3　CSSの基本
4　froatプロパティを利用したレイアウト
5　positionプロパティを利用したレイアウト
6　実践レイアウト
7　XHTML&CSS Tips

1〜3章ではWeb Standardsという概念を理解するための解説を、4、5章ではCSSでのレイアウトの基本となるfroatプロパティ、positionプロパティを利用したレイアウトの基本を解説しています。6章ではレイアウトのパターン別にその手法を紹介、さらに具体的なデザインを例にその完成までを解説しています。また、7章では、実際の制作にあたって知っておきたいXHTML&CSSのTipsをまとめています。

本書が、Web Standardsへの準拠を目指す皆様の一助となれば幸いです。

2007年3月
著者一同

[1] Web Standardsの基本

1.1 Web Standardsとは

(X)HTML＋CSSを用いてWebリソースを作成する

　[コラム] HTML 5 (Web Applications 1.0)

Web Standardsに従うメリット

さまざまなUAへ同一のリソースで情報発信できる

共通ルールに従うことで再利用性が向上する

使用する(X)HTML＋CSSのバージョン

(X)HTMLのバージョン

　[コラム] 主要モダンブラウザのCSS 2.1対応状況

CSSのバージョン

　[コラム] Acid2 Browser Test

[2] (X)HTMLの基本

2.1 HTMLとXHTMLに共通して覚えておくべきこと

id属性とclass属性の違い

id属性の大文字・小文字の区別

数字から始まるclass属性値

見出しレベルの重要性

　[コラム] 見出しレベルのスキップ

2.2 HTMLとXHTMLにおける違い

SGMLペースかXMLベースか

　[コラム] XMLという略譜の表記にまつわるこぼれ話

要素の書き方

大文字・小文字の区別

開始タグ・終了タグ、空要素

id属性とname属性

Media Typesについて

meta http-equivによるMedia Typesの指定

HTML互換性ガイドライン

　[コラム] IEの問題点

2.3 (X)HTMLはまず文章ありき

まずはマークアップのことを考えずに文章を書く

その文章のタイトルは何か

　[コラム] titte要素にサイト名や会社名を入れる場合は前？後？

その文章の中で見出しにすべき部分は何か

見出しだけを抜き出して正しい目次になるか

ブロックレベル要素でマークアップする

　[コラム] h1要素にサイト名や会社名を入れる場合は全ページ共通？

ブロックレベル要紫とは

インラインレベル要素でマークアップする

　[コラム] body要素の直下にインラインレベル要素は配置できないのか

body要素の後にhead要素、html要素をマークアップする

DOCTYPEは最終的に宣言する

必要に応じてXML宣言をする

XML宣言の記述

　[コラム] なぜ暫定的にStrict DTDを宣告するのか

XML宣言の省略

XML宣言におけるlE7のバグ

　[コラム] 後方互換モードで解釈されるとどうなる？

マークアップ順序のまとめ

(X)HTMLによる論理的なマークアップ

div要素による構造化

XHTML 2.0による構造化

XHTML 1.0による構造化

複数のh1レベルの出現も許容

id属性はどの要素に対して指定するべきか

　[コラム] div cIass＝"section"で構造化する場合の副次的メリット

id属性が指し示す範囲

head要素内の記述について

　[コラム] 内部スタイルシートと外部スタイルシート

head要素内の内容を可視化すること

　[コラム] meta http-equivによるコンテンツ内容の指定

[3] CSSの基本

3.1 これだけは守らなければならない書式

CSSの大まかな構文

@charset規則

@import規則

declaration　blocks（宣言ブロック）

　[コラム] プロパティや値を記述する際に空白文字を含めてもよいのか

3.2 心がけるとメンテナンスしやすい書式

宣言の記述順の規則を定めておく

例1：CSS2 Specificationに挙げられている順番で記述

例2：分類ごとに記述

CSSの視認性を高める

規則集合の記述

規則集合におけるセレクタの記述

宣言の出現順序

宣言におけるプロパティの記述

宣言における値の記述

コメントの記述

@規則における注意点

　[コラム] @規則以外でもインデントを行う

特定のブラウザの仕様に対する配慮

XHTMLのモジュールごとに要素セレクタを配置

CSSの先頭にガイドラインをメモしておく

3.3 CSS管理のコツ

各種の値の形式をしっかり理解する

　[コラム] IEとinherit値

セレクタ、カスケード、継承を理解する

セレクタ

　[コラム] 擬似要素と擬似クラスの記述上の区別

継承

カスケード

　[コラム] 固有性におけるCSS2とCSS2.1の違い

固定スタイルシート・優先スタイルシート・代替スタイルシート

　[コラム] IEの!importantのバク

　[コラム] 代替スタイルシートにおけるOpera7.xのバグ

xml-stylesheet処理命令

　[コラム] xml-stylesheet処理命令を挿入する位置

@import規則を用いた複数のCSSの連携

link要素、style要素のmedia属性と@media規則

ブラウザごとのデフォルトスタイルをリセット

ペースとなるスタイルを指定する

　[コラム] 次世代のXHTML&CSS

3.4 視覚整形フォーマット

ボックスモデル

　[コラム] IEのボックスモデルの解釈

包括ブロック

通常フロー

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

4.1 寄せと流し込み

画像を寄せる

表を寄せる

見出しを寄せる

フロートと周囲のボックスの関係

流し込みの解除

4.2 重なったブロックボックスにマージン

見出しと本文の列を分割したレイアウト

ナビゲーションと本文の列を分割したレイアウト

4.3 複数フロートの横並び

画像を敷き詰めて表示する

横並びのタブ型ナビゲーション

カラムレイアウトへの応用

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

子供セレクタに対応しないブラウザ

フロートするボックスの重なり順序

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

「重なったブロックボックスにマージン」のレイアウト方法

「複数フロートの横並び」のレイアウト方法

4.6 フロートしたボックスを含む親ボックスの高さの算出

親ボックスの高さを算出させる方法

後続の要素でfloatをclearする

clearを指定できる要素がない場合

幅を明示的に指定できない場合

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

5.1 指定できる4つの配置方法

static―通常配置

relative―相対配置

absolute―絶対配置

fixed―固定配置

5.2 絶対配置を利用したレイアウト

カラムレイアウトへの利用

絶対配置の基点を変える

複数の基点を利用したレイアウト

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

ナビゲーションを常に上部に表示する

フレームのように表示するカラムレイアウトへの利用

固定配置に対応していないブラウザのへ対応

　[コラム] JavaScriptで擬似的に固定配置を表現する

[6] 実践レイアウト

6.1 レイアウトバターン

01：1カラム

フロート流し込み／floatプロパティ

02：2カラム

フロート＋重なったボックスにマージン／floatプロパティ

03：2カラム

複数フロート＋重なったボックスにマージン／floatプロパティ

04：3カラム左右メニュー

複数フロート＋重なったボックスにマージン／floatプロパティ

05：3カラム右メニュー2カラム

複数フロート＋重なったボックスにマージン／floatプロパティ

06：2カラム

複数フロート／floatプロパティ

07：3カラム

複数フロート／floatプロパティ

08：2カラム

複数フロート＋クリア／floatプロパテ

09：2カラム

複数フロート＋ネガティブマージン／floatプロパティ

10：2カラム

絶対配置＋重なったボックスにマージン／positionプロパティ

11：3カラム

絶対配置＋重なったボックスにマージン／positionプロパティ

12：3カラム右メニュー2カラム

絶対配置＋重なったボックスにマージン／positionプロパティ

6.2 接合レイアウトで情報を整理したプログページの制作

　[コラム] 見出しとデザイン

XHTML文書の制作

基本要素のマークアップ

DOCTYPEの宣言とdiv要素による構造の補強

CSSファイルのモジュール化

ベースとなるスタイルの制作

主要なレイアウトの構築

　[コラム] IE6互換モードでのボックスのセンタリング

div#content内のレイアウト

　[コラム] IE6でフロートするボックスのマージンが増加するバグ

div#main内のレイアウト

　[コラム] フロートの入れ子による複雑なレイアウト

細部のスタイルの指定

div#header内のスタイル

div.entry内のスタイル

div#headline内のスタイル

dl#subNavi内のスタイル

　[コラム] Windows版のIE6でli要素の上下に隙間が生じるバグ

フッターのスタイル

6.3 ボックスを自由に配置したページデザイン

XHTML文書の制作

ペースとなるスタイルの制作

主要なレイアウトの構築

絶対配置させるボックスの領域を作る

h1要素を通常フローから外して重ね合わせる

インフォメーションの配置

コンテンツメニューの配置

その他のコンテンツメニューの配置

ボタンメニューのスタイル

フッター領域のスタイリング

[7] XHTML&CSS Tips

01：トピックパスのマークアップ

02：outlineプロパティによるドロップシャドウ

03：Mac OS XのDock風ナビゲーション

04：CSSによる自動番号付け（カウンタ生成）

　[コラム] カウンタによる番号生成は構造とは別物

　[コラム] カウンタを1、3、5…としたい場合

05：CSSでフォトギャラリー・

　[コラム] スタックレベルのルート

06：アイコンリモート表示メニュー

　[コラム] positionプロパティの値

07：CSSを使って画像をポップアップ表示

08：CSSだけで動作するドロップダウンメニュー

09：背景画像を利用したロールオーバー効果

　[コラム] 背景画像を1つにまとめる理由

10：visibilityプロパティを利用してimg要素をロールオーバー

　[コラム] visibilityプロパティによる不可視化

11：さまざまなブラウザで文字の見栄えを揃えるCSSライブラリ

12：IE6以下での子供セレクタの使用

13：印刷用CSSの作成

14：line-heightプロパティの指定値

　[コラム] 単位なしの指定はエラー？

15：定義リストのdtとddを横並びさせる

　[コラム] 非置換要素をフロートさせる場合

16：背景画像を利用して訪問済みリンクを一工夫する

17：img要素のサイズをCSSで指定

18：positionプロパティを利用して要素を画面中央に固定

19：positionプロパティでフッタを常に画面の下部に固定

20：行ボックスの高さで垂直センター配置

21：背景画像を利用した画像置換

　[コラム] outlineプロパティ対応ブラウザに注意

　[コラム] CSS3の生成・置換内容モジュール

22：リンク先のファイルタイプをCSSで明示する

　[コラム] 草案（ワーキングドラフト）であるCSS3

23：CSSでフォームをスタイリング

　[コラム] legend要素に対する各ブラウザの対応

　[コラム] label要素

24：モダンブラウザ向けのCSSハック

　[コラム] コンディショナルコメント

[Appendix]

DTDの読み方ガイド

DOCTYPEスイッチの一覧表

CSS2.1の各プロパティリファレンス

サンプルファイルが以下のURLにあります。右クリックでダウンロードしてください。 ・サンプルファイル