目次: ボックス・テスト
 内容
 補遺

Box Model Hack

「Box Model Hack」イコール「CSSハック」と思ってらっしゃるかたが多いようですので、CSSハックの簡単な紹介記事にもリンクしておきます。

この文書は、Creative Commons Licenseに則って、Tantek,Çelik様のBox Model Hackを翻訳、公開しているものです。
この翻訳には、翻訳による間違いがあり得ます。正確さを要求されるのでしたら、原文をご覧ください。

また、このページのみ、実際のサンプルをエミュレートする為にXML宣言を省いてあります。ご了承ください。

ボックス・テスト

ここに"boxtest"というクラスのサンプルのdiv要素があります。

このdivボックスには20pxのボーダー、30pxのパディング、そして300pxの幅を指定しています。

div.boxtest {
	border:20px solid;
	padding:30px;
	background: #ffc;
	width:300px;
}

ボーダー、パディングを含めた幅の合計は400pxとなるはずです。

20+30+300+30+20 = 400

CSS1ボックス・モデルを間違って解釈して、ボーダーやパディングを指定された幅（width）に含めてしまうUAでは、合計の幅は300pxにしかならず、したがって内容部分の幅は200pxにしかなりません。

300-20-30-30-20 = 200

比較の為に、下に赤と青のバーが置いてあります。この(ボーダーを含んだ)div要素は青いバーと同じだけの幅のはずです。

内容

ここに"content"というクラスのサンプルのdiv要素があります。

このdiv要素には、次の様に、"boxtest"div要素とほとんど同じスタイルを指定しています:

div.content {
	border:20px solid;
	padding:30px;
	background: #ffc;
}

ただし、大切なおまけがあります。二つ目のスタイル規則があり、それは、上書きされた幅を指定する際に、IE5/Windows と IE5.5/WindowsのCSSのパースのバグを利用しています。

div.content {
	width:400px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:300px;
}

この(ボーダーを含んだ)div要素は、IE5/Windows と IE5.5/Windowsでも青いバーと同じ幅となっているはずです。

加えて、上記のスタイル規則の直後にもう一つの規則を加えています。CSS2のセレクタとボックス・モデルをサポートしているが、上で挙げたIE5.x/Windowsと同じパースのバグを持っているUAを助け出す為です。私はこれを"be nice to Opera 5"規則と呼んでいます。 '>'の周りには決してスペースを空けないように！

html>body .content {
	width:300px;
}

最後に、次の点に注意して下さい。つまり、"\"}\""という値のパースに失敗するバグを持っているUAの場合、潜在的に次の規則を無視するはずであろうということに。したがって、"be nice to Opera 5"規則によって、それらの誤ったパーサにスタイルシートの読み進むべき方向を示してやるわけです。

UAのCSSのパージングがこの位置で回復することを立証する為に、前の規則の直後に、もう一つ規則を足してみましょう。これで明らかになります。

p.ruletest { color: blue }

この段落はclass="ruletest"なので青色になっているはずです。もし赤なら、(後ろの規則に上書きされているはずの)前の規則が間違って適用されています。この最後のスタイル規則（つまり、p.ruletest { color: blue } ）は蛇足であることに注意してください。それ以前のボックス・モデル・ハック規則が適切に完了していることを例示するためのものに過ぎません。

補遺

不必要なXML宣言を避ける

2002年04月04日、Prerit Bhaktaのメモ: 次のようなXML宣言を含めると、

							<?xml version="1.0"?>

IE6/Windowsは互換モードで動作します。

訳注：和文の場合、charset="UTF-8"でないと XML宣言を省略できません。

XML宣言は不要ですので、私は単純にこれを書かないことをお勧めします。

メディアに依存しないファイルとしてスタイルシートを検証する

2002年09月03日、Jonathan Hornのメモ: W3C CSS検証サービスは、メディア型'screen'のスタイルシートで'voice-family'プロパティが使用されていると、エラーを返します。

Dave Sheaのmezzoblueにおけるコメントで私が言及したように、これはW3C CSS検証サービスそれ自身のミスです。特定のメディアにサポートされていないプロパティが使用されている時、検証サービスはエラーではなく、警告を報告するべきなのです。そして、これはW3Cに報告されるべきです:

私の助言: メディア非依存のファイルとしてお手元のスタイルシートを検証てください。そうすれば、そのCSSが妥当であるかどうかが分かります。そして必要な時は、メディア依存の要素を含むそのスタイルシートを@importしてください。

Bidouillage de Boîtes

2002年09月15日、Christophe Ducampの提供: Box Model Hackのフランス語への翻訳版.

Portuguese Box Model Hack

2004年02月10日、Mauricio Samy Silvaの提供: Box Model Hackのポルトガル語訳版.