ＣＳＳ作成編
-4 ボックスモデルの解釈
ボックスモデルの概念
ボックスモデルを理解することは、ページビルディングのメイン作業である画面構成において必須の事項です。
上図の通り、ボックスとは 内側から「コンテンツ領域」、「内側の余白（詰め）」、「枠線」、「外側の余白」の４つの要素で成り立っています。
ページ内に占めるボックス全体の幅はこれら４つの要素の合計値になります。
注意しなければならないのはwidthプロパティが表すのは、あくまでもコンテンツ領域のみであって、４つの要素の合計値である全体幅ではないということです。
ピクセル単位の固定値でレイアウトを決める際には この点に注意して計算する必要があります。
ブラウザ解釈の違い
このボックスモデルの解釈と同時に理解しておかなければならない項目として、ブラウザの解釈の違い(＝「実装差異」)に対する知識があります。
ボックスモデルにおいてブラウザ解釈が違うというのは、レイアウトそのものが崩れる危険性が大きいものなので、注意が必要です。
Windows版 IE 5.x の場合、widthで指定される数値は コンテンツ領域、内側の余白、枠線の３つの要素の合計値と解釈されるのです。
解釈差の比較のため上図に併記しましたが、例の様に「width=400px」と指定しても ブラウザ上の表示が変わることを認識しておくべきです。
CSSハック
そこでこのバグを回避するためには CSSハックと呼ばれる裏ワザを用いなければなりません。
上で図解したボックスを例にとります。width=400pxのボックスの指定の仕方です。
上図をご参考下さい。
まず、Windows版 IE 5.xが解釈するwidthの数値（414px)を指定します。
その下、「IE5.x対策 ハック①」とした部分のvoice-familyプロパティはIE5.xが解釈できない記述なので、IE5.xではエラーとなり読み込みが中断されます。その下に指定された width数値（400px)は読まれません。
一方、CSSを正しく解釈するモダンブラウザは voice-familyプロパティを解釈することができるので、一度、414pxと読んだ後に400pxと再度上書き読み込みします。
また一方、モダンブラウザであるOperaにもIE5.xと同様、voice-familyプロパティを解釈できないというバグがあり、このままではOperaはIE5.x用に指定した数値（414px)を適用してしまうので、「Opera対策 ハック②」とした記述を置き 400pxを読み込ませるわけです。
この html>bodyの記述もIE5.xには読み込めないので、IE5.xには一番最初に指定した数値だけが適用されることになります。
CSSハックは上記以外、様々な種類・ケースがありますが、あくまでも当座の回避策であり極力使わない方がいいものです。
ボックスはレイアウトの基礎となるものなので、ここであえてボックスモデルハックをご紹介致しました。
