ボックスモデルとは
「標準モード」と「互換モード」の違いが顕著な例として、ボックスモデルが挙げられます。ボックスモデルとはブロックレベル要素がもつ内容、パディング、ボーダー、マージンから構成される矩形領域の概念です。この概念は、CSSデザインをする上で必要不可欠なものです。また、クロスブラウザなデザインを実装するうえで、つまづきやすいポイントでもあるので、ぜひ押さえておきましょう。
- 内容領域（content）：テキストや画像などが表示される領域
- パディング（padding）：内容とボーダーの間の余白
- ボーダー（border）：パディングの外側にある枠線
- マージン（margin）：ボックスの最も外側にある、他の要素との余白
ボックスモデルで見る表示モードの違い
では実際に、「標準モード」と「互換モード」での表示の違いを見てみましょう。p要素に対し、次のようなスタイルを適用させてみます。
p{
width:200px;
height: 200px;
padding:10px;
border:20px #00f solid;
}
これをIE6の「標準モード」と「互換モード」で表示した結果は次のようになります。
仕様上では、ボックスの幅と高さは、内容の幅と高さとなっています。「標準モード」であれば、意図したように表示されるはずですが、IE6の「互換モード」では、ボーダーとパディングも含めたものをボックスの幅や高さとして解釈しています。
このように、せっかく前方互換性を意識したWebページを制作しても、ブラウザの表示モードが「互換モード」になっていると、意図した結果が得られにくくなります。
標準モードのススメ
ここではボックスモデルを例にとりましたが、他にも、フォントサイズやブロックレベル要素のセンタリングなど、「互換モード」のCSSの解釈は、標準の仕様とは異なる部分が多くあります。「互換モード」では、ブラウザごとにスタイルの実装方法が異なってくるため、それぞれに合わせたスタイルを適用させる必要がでてきます。その分、工数は増えますし、保守性も悪くなってしまいます。
結論から言うと、クロスブラウザな表示を実現する一番の近道は、各ブラウザの表示モードを「標準モード」に統一することです。Web標準に従ってWebページを制作し、ブラウザには、仕様通りの解釈してもらうのが賢明だと言えるでしょう。
なお、あえて互換モードを採用する場合や、過去のブラウザにおけるボックスモデルバグに対応したい場合の対処方法については、以降の連載の中で紹介していく予定です。
