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に限らず非常に使い勝手が良い指定となりますので是非活用してみてください。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ