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ピクセルで表示されていることがわかる。
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の値からパディングとボーダーの大きさを引いた長さとなる。このとき、コンテンツボックスの横幅がマイナスになることは認められていない。
- 特集: FirefoxとSafariのCSS徹底検証 (65件)
- ホワイトペーパー
- 話題のタグ

グーグル、JavaScriptプログラミングツールをリリース
Windowsの歴史 Windows Server 2008編:同じカーネルを持つ「Vista」とは対照的に早くから支持を得たサーバOS
Windowsの歴史 Windows Server 2003 R2編:安定性と先進性の両立目指す「R2」の先駆けとなったOS
モジラ、「Firefox 3.6」の第1ベータ版をリリース
100万円で実現!中小企業の情報漏えい対策
進むストレージ環境の見直し
大丈夫?あなたの会社のセキュリティ対策
【最終警告】パンデミック対策特集
最大32個のセンサーが電力を徹底管理!
企業ITシステムの企画、構築、運用のイロハ
―エン・ジャパン厳選求人☆毎週更新―