独学で極める “Webデザイン”の技と心
第8回 クロスブラウザ対応CSSでつまずかない
前回はサンプルを交えながら(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
山田あかね（やまだあかね；purprin）
エスカフラーチェLLC，デザイナー。名古屋出身。Web業界とまったく関係ない業種で独立して働く傍ら，Web/XHTML/CSS等技術を独学。2005年「コトノハ -○×ソーシャル」のデザインリニューアルを行ったのをきっかけに上京し転職。株式会社paperboy&co.で主にソーシャルブックマークサービス（POOKMARK Airlines）等の Webサービス開発に携わる。2007年１月，エスカフラーチェLLC の設立に参画し，デザイナーとして幅広く活躍中。
独学で極める “Webデザイン”の技と心
- 2010年3月第2週号 1位は，CSSだけで実現するフキダシ作成テクニック，気になるネタは，Evernoteの日本語化や今後の展望について聞いてきた
- 2009年12月第1週号 1位は，RGBAカラーの使い方，気になるネタは，思いどおりの日本語入力 - Google 日本語入力
- 2009年11月第5週号 1位は，すばらしいWebデザインのための4つの重要な要素，気になるネタは，ポメラとiPhoneがついにつながった！
- 2009年11月第4週号 1位は，CSS3の新機能をデザインに活かす方法，気になるネタは，THE NORTH FACE タッチパネル対応のグローブを発売中
- 「Web Directions East 2009」レポート（後編）
![[改訂第3版] SQLポケットリファレンス](http://image.gihyo.co.jp/assets/images/cover/2009/thumb/TH40_9784774138350.jpg){kind=small}
