2. ボックスモデルと DOCTYPE スイッチ

最終更新 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 スイッチを備えたブラウザは表示モードを切り替える

DOCTYPE スイッチを備えたブラウザは、(X)HTML 文書の冒頭のDOCTYPE 宣言の有無や書き方によって表示モードを切り替えます。

DOCTYPE 宣言とはその(X)HTML のバージョンを示したものです。大雑把に言えば、

という具合です。

では多くのブラウザで崩れないようにするためには、具体的にはどのような DOCTYPE 宣言をすればよいのでしょうか。

※DOCTYPE 宣言は、レンダリングモードを切り替えるためのものではなく、HTMLのバージョンを示すものであることを忘れないで下さい。

DOCTYPE 宣言による表示モードの切り替え

DOCTYPE スイッチと 2つの表示モード

まずは用語の確認です。

DOCTYPE スイッチ
DOCTYPE 宣言によって (X)HTML 文書のレンダリングを変える機構。比較的新しいブラウザが備えている。
Standards モード
仕様どおりに解釈するモード。CSS をきちんと書けば、(概ね)きちんと解釈される。 間違った CSS を無視する。
Quirks モード
間違った解釈に合わせたモード。CSS をきちんと書かなくても間違いを補完する場合がある。 仕様どおりに書かれた CSS では制作者の意図どおりに表示されない場合がある。

仕様どおりに書いて仕様どおりに解釈してもらうほうが都合が良いため、Standards モードになるような DOCTYPE 宣言をします。 したがって、実際にレイアウトするときにはボックスモデルを仕様どおりに考えますが、WinIE5 などでは解釈の違いのため崩れてしまう場合があります。 このための対策は後述します。

※ほかに、Almost Standards モードという表示モードをもつブラウザ(Mozillaなど)もあるため、実際には3つの表示モードですが、ここでは Almost Standards モードは(Full)Standards とほぼ同じであると見なします。

実際の DOCTYPE 宣言

ここでは、XHTML1.0 または HTML4.01 の DOCTYPE 宣言をすることにします(よって HTML の文法もこれらの文書型に適合するように書く必要があります)。 以下の DOCTYPE 宣言を冒頭に記述することで、DOCTYPE スイッチをもつブラウザを Standards モード(標準準拠モード)でレンダリングするようにできます。

XHTML1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

これら4つの DOCTYPE 宣言の場合には、WinIE6, Firefox, Mozilla, Netscape6/7, Safari, Opera7, MacIE5.0 などで Standards モード(Almost Standards モード)になるようです。 使用する(X)HTMLのバージョンに合わせて適切なものを選んでください。

※同じ文書型でもシステム識別子の有無によって表示モードが変わる場合があります。 HTML4.01 Transitional の DOCTYPE 宣言でも、システムが識別子あれば Standards モードに、システム識別子を省略すれば Quirks モードになるブラウザもあるようです。

IE6 と XML 宣言

XHTML では冒頭に XML 宣言を記述することが推奨されています。

XML 宣言(文字コードがShift_JISの場合)
<?xml version="1.0" encoding="Shift_JIS"?>

ところが、(シェアNo.1の)WinIE6 には DOCTYPE 宣言より前に何か文字列があると Quirks モードになってしまうバグがあります。 つまり XML 宣言つきの XHTML の場合には、IE6 は Quirks モード、その他の新しいブラウザは Standards モードになってしまいます。 Quirks モードと Standards モードではボックスモデルの解釈が異なるため、うまくレイアウトができません。

この問題の対策としては以下の方法が考えられます。

XHTMLでも XML 宣言を書かない

XHTMLでは、文字コードがUTF-8 または UTF-16 の場合、あるいはサーバーのヘッダ情報などで文字コード情報を送信している場合には XML 宣言自体を省略できます。

HTML4.01 にする

HTML4.01 であれば XML 宣言は不要なので、IE6 も Standards モードになります。

その他の方法

XHTMLで XML 宣言もきちんと書き、しかも IE6 の Quirks モードや WinIE5 と、その他のブラウザの Standards モードとで同じように表示される ボックスモデル解釈の違いにかかわらないCSSの書き方をします。

この講座ではこの方法を採用して説明をすることにします。 よって DOCTYPE 宣言は上記の4つのいずれかで、しかも XHTML の場合には XML 宣言をつけることを前提に説明を続けます。

まとめ

次回

参考資料