最終更新 2006年3月6日
実際に段組レイアウトをするときには float と width のほかに、margin, padding, border などのプロパティを使うことになります。 これらを正しく使うにはボックスモデルを理解しなければなりません。
ブロックレベル要素は、矩形（長方形）の領域を生成します。この領域をブロックボックスなどと呼びます。
たとえば p 要素につぎのような CSS を適用すると、マージン、パディング、ボーダー、内容領域は図のような領域になります。
p {
width:200px;
height:50px;
padding:20px;
border:10px solid;
}
width と height は内容領域の幅および高さであり、padding と border はその外側に足されることになります。 つまりこの例では「ボーダーまで含めたボックスの幅」は 260px（200+20*2+10*2）で、内容領域の幅は 200px です。
ところが、この計測方法とは違った解釈をするブラウザがあります。 Win IE5.5 以下の古いブラウザや、IE6 などのDOCTYPE スイッチを備えた比較的新しいブラウザのQuirksモード（後方互換モード）がそうです。
WinIE5 などの古いブラウザでは、width（height）を内容領域の幅（高さ）ではなく、ボーダーまで含めたボックスの幅（高さ）にします。 先の例でいえば、「ボーダーまで含めたボックスの幅」が 200px となり、内容領域の幅は 140px（200-20*2-10*2）になります。 これは CSS2 の仕様に反する解釈です。
比較的新しいブラウザにはDOCTYPE スイッチと呼ばれる機構があり、CSSを正しく解釈できるブラウザにも間違った解釈をする古いブラウザに合わせた表示をさせることができます （間違った解釈に合わせて作られた Web ページを、それらのブラウザでも制作者の意図どおりに表示するためです）。
DOCTYPE スイッチを備えたブラウザは、(X)HTML 文書の冒頭のDOCTYPE 宣言の有無や書き方によって表示モードを切り替えます。
DOCTYPE 宣言とはその(X)HTML のバージョンを示したものです。大雑把に言えば、
という具合です。
では多くのブラウザで崩れないようにするためには、具体的にはどのような DOCTYPE 宣言をすればよいのでしょうか。
※DOCTYPE 宣言は、レンダリングモードを切り替えるためのものではなく、HTMLのバージョンを示すものであることを忘れないで下さい。
まずは用語の確認です。
仕様どおりに書いて仕様どおりに解釈してもらうほうが都合が良いため、Standards モードになるような DOCTYPE 宣言をします。 したがって、実際にレイアウトするときにはボックスモデルを仕様どおりに考えますが、WinIE5 などでは解釈の違いのため崩れてしまう場合があります。 このための対策は後述します。
※ほかに、Almost Standards モードという表示モードをもつブラウザ（Mozillaなど）もあるため、実際には3つの表示モードですが、ここでは Almost Standards モードは（Full）Standards とほぼ同じであると見なします。
ここでは、XHTML1.0 または HTML4.01 の DOCTYPE 宣言をすることにします（よって HTML の文法もこれらの文書型に適合するように書く必要があります）。 以下の DOCTYPE 宣言を冒頭に記述することで、DOCTYPE スイッチをもつブラウザを Standards モード（標準準拠モード）でレンダリングするようにできます。
これら4つの DOCTYPE 宣言の場合には、WinIE6, Firefox, Mozilla, Netscape6/7, Safari, Opera7, MacIE5.0 などで Standards モード（Almost Standards モード）になるようです。 使用する(X)HTMLのバージョンに合わせて適切なものを選んでください。
※同じ文書型でもシステム識別子の有無によって表示モードが変わる場合があります。 HTML4.01 Transitional の DOCTYPE 宣言でも、システムが識別子あれば Standards モードに、システム識別子を省略すれば Quirks モードになるブラウザもあるようです。
XHTML では冒頭に XML 宣言を記述することが推奨されています。
ところが、（シェアNo.1の）WinIE6 には DOCTYPE 宣言より前に何か文字列があると Quirks モードになってしまうバグがあります。 つまり XML 宣言つきの XHTML の場合には、IE6 は Quirks モード、その他の新しいブラウザは Standards モードになってしまいます。 Quirks モードと Standards モードではボックスモデルの解釈が異なるため、うまくレイアウトができません。
この問題の対策としては以下の方法が考えられます。
XHTMLでは、文字コードがUTF-8 または UTF-16 の場合、あるいはサーバーのヘッダ情報などで文字コード情報を送信している場合には XML 宣言自体を省略できます。
HTML4.01 であれば XML 宣言は不要なので、IE6 も Standards モードになります。
XHTMLで XML 宣言もきちんと書き、しかも IE6 の Quirks モードや WinIE5 と、その他のブラウザの Standards モードとで同じように表示される ボックスモデル解釈の違いにかかわらないCSSの書き方をします。
この講座ではこの方法を採用して説明をすることにします。 よって DOCTYPE 宣言は上記の4つのいずれかで、しかも XHTML の場合には XML 宣言をつけることを前提に説明を続けます。