「IE6とXML宣言の謎：ブラウザの表情を変える魔法」
XHTMLでは、XML宣言を入れることがおすすめされている。ところが、（シェアNo.1の）WinIE6にはあるバグがあって、DOCTYPE宣言の前に何か文字列があるとQuirksモードになっちゃうんだ。つまり、XML宣言入りのXHTMLなら、IE6はQuirksモード、他の新しいブラウザはStandardsモードになっちゃうんだ。QuirksモードとStandardsモードでは、ボックスモデルの解釈が違うから、レイアウトがうまくいかないんだ。
この問題に対処する方法として、以下の方法が考えられる。
1. XHTMLでもXML宣言を書かない
2. HTML4.01にする
3. その他の方法
講座では、この3番目の方法を採用して説明をすることにする。つまり、DOCTYPE宣言は上記の4つのいずれかで、しかもXHTMLの場合にはXML宣言をつけることを前提に説明を続ける。
まとめると、ボックスモデルの解釈には2通りあって、DOCTYPEスイッチを持つブラウザは、DOCTYPE宣言の書き方やXML宣言の有無によって、content-boxであるStandardsモードと、border-boxであるQuirksモードを切り替える。同じDOCTYPE宣言でもブラウザごとに違うんだ。また、DOCTYPEスイッチを持たないブラウザもあるようだ。
それじゃあ、content-boxでもborder-boxでも同じ表示にするにはどうすればいいかって？簡単な方法があるんだ。
1. widthとともにpaddingとborderは指定しない
2. paddingまたはborderを指定した要素にはwidthやheightを指定しない
この方法を使えば、content-boxでもborder-boxでもボックスのサイズに違いが出ないんだ。
でも、不便じゃないの？確かにレイアウトには制約が出るかもしれないけど、実際にやってみると、そう厳しくないんだよ。パディングがほし「IE6とXML宣言の謎：ブラウザの表情を変える魔法」
XHTMLでは、XML宣言を入れることがおすすめされている。ところが、（シェアNo.1の）WinIE6にはあるバグがあって、DOCTYPE宣言の前に何か文字列があるとQuirksモードになっちゃうんだ。つまり、XML宣言入りのXHTMLなら、IE6はQuirksモード、他の新しいブラウザはStandardsモードになっちゃうんだ。QuirksモードとStandardsモードでは、ボックスモデルの解釈が違うから、レイアウトがうまくいかないんだ。
この問題に対処する方法として、以下の方法が考えられる。
1. XHTMLでもXML宣言を書かない
2. HTML4.01にする
3. その他の方法
講座では、この3番目の方法を採用して説明をすることにする。つまり、DOCTYPE宣言は上記の4つのいずれかで、しかもXHTMLの場合にはXML宣言をつけることを前提に説明を続ける。
まとめると、ボックスモデルの解釈には2通りあって、DOCTYPEスイッチを持つブラウザは、DOCTYPE宣言の書き方やXML宣言の有無によって、content-boxであるStandardsモードと、border-boxであるQuirksモードを切り替える。同じDOCTYPE宣言でもブラウザごとに違うんだ。また、DOCTYPEスイッチを持たないブラウザもあるようだ。
それじゃあ、content-boxでもborder-boxでも同じ表示にするにはどうすればいいかって？簡単な方法があるんだ。
1. widthとともにpaddingとborderは指定しない
2. paddingまたはborderを指定した要素にはwidthやheightを指定しない
この方法を使えば、content-boxでもborder-boxでもボックスのサイズに違いが出ないんだ。
でも、不便じゃないの？確かにレイアウトには制約が出るかもしれないけど、実際にやってみると、そう厳しくないんだよ。パディングがほしい要素には、子要素にpaddingかmarginを設定すればいいし、段組みなどのレイアウトには通常div要素を使いる。子要素には構造を記述するためのブロックレベル要素が含まれるから、marginを確保すれば、外側のdiv要素自体にはpaddingを設定する必要がなくなる。
この方法で、レイアウトが限られてしまうけど、実際にはそれほど厳しくはないと思うよ。こんな方法があるんだけど、使い方次第で実は悪くないんだ。要素には、子要素にpaddingかmarginを設定すればいいし、段組みなどのレイアウトには通常div要素を使いる。子要素には構造を記述するためのブロックレベル要素が含まれるから、marginを確保すれば、外側のdiv要素自体にはpaddingを設定する必要がなくなる。
この方法で、レイアウトが限られてしまうけど、実際にはそれほど厳しくはないと思うよ。こんな方法があるんだけど、使い方次第で実は悪くないんだ。
「要素の謎：ブロック要素の悩ましい世界」
「p」「hn」「address」要素、これらの中ではpaddingやmarginは使えない。特に「hn」要素には必要なことが少ないろう。
「blockquote」要素、こちらはpaddingやborderを使うことが多い。通常、中身はブロック要素なので、それらにpaddingやmarginを指定する方が安全だろう。ただしwidthはあまり必要ないケースが多い。
まとめると、DOCTYPE宣言は書くべき。多くのブラウザで適切なモードを選ぶ。XHTMLの場合、XML宣言はできるだけ書くが、WinIE6は注意が必要。widthを指定したボックスにはborderもpaddingも指定しない。これでQuirksモードとStandardsモードでボックスサイズに差が出ない。
実際に段組を作ってみる、ということでfloatを使って四つのボックスで段組のレイアウトを構築する。コンテナブロックはdiv要素を使うが、注意が必要だ。
「コンテナブロックになるdiv要素の幅設定とセンタリング」
このコードでは、<div id="container"></div>が4つのボックスのコンテナブロックとして機能する。幅の設定や全体のセンタリングはここで行いる。本来はbody要素をコンテナブロックとして使えるはずだが、Quirksモードでは正しく機能しないため、この<div>が必要となる。
<div id="container">
<div id="1">
1
</div>
<div id="2">
2
</div>
<div id="3">
3
</div>
<div id="4">
4
</div>
</div>
