box-sizingで横幅の算出方法を指定する--FirefoxとSafariのCSS対応

　CSS 3の勧告候補「Basic User Interface Module」では、横幅や高さの算出方法を指定するbox-sizingというプロパティが定義されている。これまではFirefoxとOperaが対応しているだけだったが、Safari 3やInternet Explorer 8（ベータ版）でもサポートされ、主要な4種類のモダンブラウザが対応したプロパティとなっている。

　今回はこのbox-sizingプロパティの機能と、各ブラウザでの表示を確認していきたい。

box-sizingプロパティ

　CSSではHTML/XHTMLでマークアップした部分の横幅をwidth、高さをheightプロパティで指定することができる。このときbox-sizingプロパティを利用すると、widthやheightで指定した横幅や高さに、パディングやボーダーの大きさを含むかどうかを指定することができる。

　box-sizingプロパティで指定できる値はcontent-boxとborder-boxの2種類となっている。content-boxと指定した場合はパディングとボーダーの大きさを含まずに、border-boxと指定した場合は含めて処理を行う。

　たとえば、次のサンプルは<div>でマークアップした部分の横幅を300ピクセル、パディングを30ピクセル、ボーダーを30ピクセルに設定して、画面の中央に配置したものだ。上の<div>には「box-sizing: content-box」、下の<div>には「box-sizing: border-box」と指定してある。

　すると、上の場合はコンテンツ部分だけが、下の場合はボーダーまで含めた部分が横幅300ピクセルで表示されていることがわかる。

box-sizingの設定による表示の違い

div	{
	width: 300px;
	border: solid 30px #ffaa00;
	padding: 30px;
	background-color: #ffff00;
	margin: 20px auto;
	}

div#content	{
	box-sizing: content-box;
	}

div#border	{
	box-sizing: border-box;
	}

<div id="content">
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</div>

<div id="border">
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</div>

　なお、box-sizingプロパティを指定せずに標準の状態で表示すると、パディングやボーダーを横幅に含まないcontent-boxでの表示となる。

　また、「box-sizing: border-box」と指定した場合、文字や画像を表示したコンテンツ部分（コンテンツボックス）の横幅は、widthの値からパディングとボーダーの大きさを引いた長さとなる。このとき、コンテンツボックスの横幅がマイナスになることは認められていない。