前回はサンプルを交えながら(X)HTMLとCSSの関係をおさらいしました。どれだけ画像を沢山利用したグラフィカルなサイトでも，
ところがリファレンス等を参考にしながら正しく(X)HTML/
W3Cが技術を標準化するため(X)HTMLやCSSの仕様書を勧告していますが，
ブラウザの特徴を理解とは言っても，
(X)HTMLとCSSを書く上での基本ワークフロー
- まず第一に比較的仕様に忠実な新しいブラウザを使って動作確認を行うようにする
- 最後の仕上げの段階に古いブラウザ
（仕様サポートが不十分なブラウザ） との表示の差を埋める
この基本のワークフローを守り，
ブラウザ表示の差を埋めることを楽しめるようになってしまおう
私が今までに独学で(X)HTMLやCSSを学んできて，
全てのブラウザで仕様どおりに忠実に表現されるものだとしたら，
ただし，
まずは比較的Web標準に準拠した新しいブラウザ
- ※1）
Web標準に準拠したブラウザはどんなブラウザか - Web標準に準拠している
（勧告に準拠している） かどうかを測るために， Web Standards Projectが作成したAsid2 testが有名です。リンク先のページを開き， Take The Acid2 Test をクリックしてスマイリーマークが正しく表示されたでしょうか。表示されたならば， 今お使いのブラウザは準拠していると言えます。その他， Acid2 testに合格したソフトウェアについてはAcid2のWikipediaも参考にしてください。
他のブラウザと比較して思うようにいかなくなってしまう原因
つまずくと思われる点は，
- レイアウトが崩れる
- 予期しない空白ができてしまう
- フォントサイズが揃わない
今回は一番問題が大きく感じられる
レイアウトが崩れる原因のほとんどが，
DOCTYPE宣言とは，
仕様通りに正しく書かれた(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宣言です
そのDOCTYPE宣言は，
- 標準準拠(standards)モード = CSSを仕様通り解釈するモード
- 後方互換(quirks)モード = CSSの間違った解釈をするモード
を簡単に変更できるようにするためのスイッチが用意されています。
これをDOCTYPEスイッチ
- ※2）
- そもそもなぜこのように(X)HTMLにもバージョンがいろいろあるのかというのを解説すると長くなってしまうのでここでは割愛しますが，
(X)HTMLのバージョンによって利用できる要素・ 属性などのルールが多少異なるため， 目的に応じて選びます。 - ※3）
- DOCTYPEスイッチについてはこちらの資料が参考になります。http://
www. seo-equation. com/ www/ cat25/ doctype_ switching
