前回はサンプルを交えながら(X)HTMLとCSSの関係をおさらいしました。どれだけ画像を沢山利用したグラフィカルなサイトでも，画像を使わないシンプルなサイトでも基本はまったく同じであり，(X)HTMLは文書構造を，CSSでは文書の要素に対して見た目等の振る舞いを指定することにより，ブラウザで私たちが閲覧できる状態になります。
ところがリファレンス等を参考にしながら正しく(X)HTML/CSSを書くように頑張ってみたわりには，ブラウザ（閲覧環境）によっては表示が崩れてしまうなど，最初はなかなか思い通りに表示されないことが多いものです。
W3Cが技術を標準化するため(X)HTMLやCSSの仕様書を勧告していますが，現実に普及しているブラウザでは，仕様に完全準拠しているとは限りません。そのため，普及しているそれぞれのブラウザの特徴まで理解した上で(X)HTMLとCSSの設計をすることが必要です。
ブラウザの特徴を理解とは言っても，難しく考える必要はありません。
(X)HTMLとCSSを書く上での基本ワークフロー
- まず第一に比較的仕様に忠実な新しいブラウザを使って動作確認を行うようにする
- 最後の仕上げの段階に古いブラウザ（仕様サポートが不十分なブラウザ）との表示の差を埋める
この基本のワークフローを守り，きちんと理想の状態で組み立ててから現実にあわせるテクニックで補うことが大切です。
ブラウザ表示の差を埋めることを楽しめるようになってしまおう
私が今までに独学で(X)HTMLやCSSを学んできて，各種ブラウザの表示の差異を埋めることの学習こそが一番時間のかかるものなのではないかと思うくらい，Internet Explorer6以前のブラウザ対応には手をやいてきました。
全てのブラウザで仕様どおりに忠実に表現されるものだとしたら，(X)HTMLとCSSはもっともっと簡単になると思います。もちろんそれが本来理想とするところでもあるのですが，実は各種ブラウザの表示不具合があるからこそ解決できたときの楽しみが大きいと言う見方もあります（私自身もそう思っています）。勉強すればするほど，なかなか思い通りに動いてくれないブラウザすらも可愛らしいものと思えてしまうほどです。
ただし，ブラウザの表示の差異を埋めるテクニックには「標準」「仕様」という観点から見てバッドノウハウとされるものも多くあることを頭の片隅に置いておいてください。
まずは比較的Web標準に準拠した新しいブラウザ（※1）を使ってページを制作していきましょう。
- ※1）Web標準に準拠したブラウザはどんなブラウザか
- Web標準に準拠している（勧告に準拠している）かどうかを測るために，Web Standards Projectが作成したAsid2 testが有名です。リンク先のページを開き， Take The Acid2 Test をクリックしてスマイリーマークが正しく表示されたでしょうか。表示されたならば，今お使いのブラウザは準拠していると言えます。その他，Acid2 testに合格したソフトウェアについてはAcid2のWikipediaも参考にしてください。
他のブラウザと比較して思うようにいかなくなってしまう原因
つまずくと思われる点は，大きく分類してこの3点ではないかと思います。
- レイアウトが崩れる
- 予期しない空白ができてしまう
- フォントサイズが揃わない
今回は一番問題が大きく感じられる「1．レイアウトが崩れる原因」について解説します。
レイアウトが崩れる原因のほとんどが，(X)HTML文書のDOCTYPE宣言の違いによってレンダリングモードが変わることによるものです。
DOCTYPE宣言とは，平たく言えば「(X)HTMLのバージョンと仕様はこれですよ」と宣言する記述のことです。
仕様通りに正しく書かれた(X)HTMLのソースを覗いてみてください。文書の一番先頭に， 例えば以下のような記述がされています。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
これらがDOCTYPE宣言です（上の例はXHTML1.0 Transitional，下の例はHTML4.01 Strictです（※2））。
そのDOCTYPE宣言は，それぞれ(X)HTMLのバージョンごとに記述が決まっていますが，CSSの解釈が乏しいブラウザと互換性を保つために，ほとんどのブラウザで
- 標準準拠(standards)モード = CSSを仕様通り解釈するモード
- 後方互換(quirks)モード = CSSの間違った解釈をするモード
を簡単に変更できるようにするためのスイッチが用意されています。
これをDOCTYPEスイッチ（※3）と言います。
- ※2）
- そもそもなぜこのように(X)HTMLにもバージョンがいろいろあるのかというのを解説すると長くなってしまうのでここでは割愛しますが，(X)HTMLのバージョンによって利用できる要素・属性などのルールが多少異なるため，目的に応じて選びます。
- ※3）
- DOCTYPEスイッチについてはこちらの資料が参考になります。http://www.seo-equation.com/www/cat25/doctype_switching
