今回は CSS3 から box-sizing について紹介します.

width や height と同時に border や padding を指定しているときに,
少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？

これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます.

あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.

box-sizing プロパティとは

box-sizing プロパティとはボックスサイズ(width, height) の算出方法を
指定する際に使用するプロパティです.

指定可能な値はこちら

っといってもいまいちわかりませんよね. 実際に使用しているサンプルを作ってみました.

※プレビュー画面の右下にある拡縮ボタンを押すとコードも見れます!

上の要素はデフォルト, 下の要素は box-sizing: border-box を指定しています. box-sizing プロパティに指定している値が違うだけで表示サイズが異なるのが分かるかと思います.

css の世界では, width に 300px と指定していても padding や border-width が指定されていた場合,
実際に表示される要素の幅は width + 両サイドのpadding + 両サイドのborder-width でした.

つまり上記のサンプルの上の要素は 300px + (15*2)px + (5*2)px = 340px として表示されているわけです.

対する下の要素は border-box を指定しているので padding や border-width の幅に関係なく width に指定した値, つまり 300px として表示されています.

このように box-sizing に border-box を指定しておくことで, 指定した width の通りに要素を表示してくれるようになります.

一応モダンブラウザはひと通り対応していますが ベンダープレフィックスを指定しないと反映されませんのでご注意を!

段組時に効果発揮!!

box-sizing の解説をしてきましたが, まだ便利さがピンとこないかたもいるかと思います.
実際にどう便利なのかが分かるようサンプルを作りました.

width に 984px だとか 686px なんて中途半端な指定をしているのを見たことありませんか？
それは padding や border の幅を計算に入れて幅を設定しているためです.

ですが, 上記のサンプルをみて分かる通り, box-sizing に border-box を指定しているので, width にキリの良い整数を指定しても段組が崩れていないのがわかるかと思います.

オススメの設定

もうデフォルト値を変えちゃうことをオススメします! すべての要素に box-sizing: border-box; を指定しましょう♪

私がサイトを作る際, 必ずリセットスタイルに下記の 指定を加えています.

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

各ブラウザの box-sizing 対応状況(追記)

追記です.

各ブラウザの対応状況を知りたいという方が多かったので 載せておきます.

っということで未だに IE6 や IE7 の対応を強いられている Web 屋さんは残念ながら使えません...

でも少し調べたら IE 5.5 以前は box-sizing: border-box; を指定した際の計算方法が デフォルトだったらしい...