box-sizing: border-box を指定しレイアウト崩れを防止する

box-sizingプロパティには、CSS3で "border-box" という値が追加されました。この値を指定すると、widthはpaddingとborderを加えた要素全体の幅として計算されます。これにより、floatで要素を並べたときのレイアウト崩れ防止につながります。

【コンテンツ】

  1. box-sizingプロパティの概要
  2. 仕様策定の動向とブラウザの対応状況
  3. 使用例

box-sizingプロパティの概要

CSS ボックスモデルにおいては、ボックスサイズは以下の計算式で求められます。
ボックスサイズ = width + padding + border

ここでよく問題になるのは、要素をfloatで並べたときです。
レイアウト崩れを起こさないためには、width,padding,borderそれぞれの幅を厳密に計算して親要素の幅に合わせなければなりませんので、ボックスを二重構造にするなどのテクニックが必要でした。
特にリキッドレイアウトやレスポンシブWebデザインではwidthを%で指定して可変にしますが、border/paddingはemやpxで指定することがほとんどなので、サイズ調整がどうしても難しくなります。

そこで、CSS3でbox-sizingプロパティに追加された "border-box" の登場です。
この値を指定し、widthを50%にしたとすると、50%の中にpaddingもborderも含まれてしまいますので、幅の計算が非常に簡単になります。要素の間のボーダーの太さは考慮に入れる必要がないのです。

以下はこのことを図で説明したものです。

box-sizingプロパティ 概略図

仕様策定の動向とブラウザの対応状況

W3Cの仕様では、box-sizingは「CSS Basic User Interface Module Level 3」に含まれています。
記事執筆時点での最新仕様は、2012年1月17日付けの作業草案(Working Draft)となります。
http://www.w3.org/TR/2012/WD-css3-ui-20120117/

主要なブラウザの最新バージョンでは、「box-sizing: border-box」についてすべて対応しています。ベンダープレフィックスも必要ありません。

ただし同時に追加された「box-sizing: padding-box」については、Firefoxだけが対応しています。padding-boxは、widthにpaddingを含みborderを含まない指定です。

使用例

まず説明のために、基本となるHTMLを以下のようにします。

CSSは以下のように設定します。

実際の表示は以下です。

1番目のボックス
2番目のボックス
3番目のボックス
4番目のボックス

次にpaddingとborderを各要素につけてみます。

実際の表示は以下になりますが、4番目のボックスがカラム落ちしてしまいました。

1番目のボックス
2番目のボックス
3番目のボックス
4番目のボックス

そこで、「box-sizing: border-box;」を1行追加します。

今度はカラム落ちが解消され、ピッタリとレイアウトされました。

1番目のボックス
2番目のボックス
3番目のボックス
4番目のボックス

※実際にHTMLで表示していますので、非対応のブラウザで閲覧している場合はうまく表示されません。

以上、CSS3の「box-sizing: border-box」について解説しました。
最近では要素を横に並べるのに、floatを使わない「display: table」や「Flexbox」を使う例が多くなってきましたが、border-boxはfloatに限らず非常に使い勝手が良い指定となりますので是非活用してみてください。

スポンサーリンク

ページの先頭へ