元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

CSS入門(box-sizingプロパティの使い方)

box-sizingプロパティの基本的な使い方について書きます。box-sizingプロパティは、要素の幅と高さをどのように計算するのかを設定するプロパティです。つまり、要素の幅と高さにパディングとボーダーを含めるか含めないかを指定します。具体的な書き方は、サンプルコードを確認してください。

記述の仕方

/* 記述例 */
セレクタ名{ box-sizing: 値; }

box-sizingプロパティの基本情報

box-sizingが取る値

  • content-box
    • 要素の幅と高さにパディングとボーダーを含めない。
    • 幅 = 要素の幅
    • 高さ = 要素の高さ
  • border-box
    • 要素の幅と高さにパディングとボーダーを含める。
    • 幅 = 要素の幅 + パディング + ボーダー
    • 高さ = 要素の高さ+ パディング + ボーダー

サンプルコード

2つのdivタグに同じスタイルを適用します。box-sizingが「content-box」または「border-box」の場合で、表示される要素の大きさを比較します。

content-boxの場合

<div id="sample1">あああああ</div>
#sample1{
  width:100px;
  height:100px;
  background:cyan;
  box-sizing:content-box;
  padding:10px;
  border:solid 2px #666666;
  margin:0 auto;
}

表示例

あああああ

div要素の幅 = 要素の幅 + パディング + ボーダー

= 100px + 20px(10px × 2) + 4px(2px × 2)

= 124px

border-boxの場合

<div id="sample2">あああああ</div>
#sample2{
  width:100px;
  height:100px;
  background:cyan;
  box-sizing:border-box;
  padding:10px;
  border:solid 2px #666666;
  margin:0 auto;
}

表示例

あああああ

div要素の幅 = 要素の幅 + パディング + ボーダー

= 76px(100 - 20 - 4) + 20px(10px × 2) + 4px(2px × 2)

= 100px

content-boxとborder-boxでは、表示される要素の大きさに違いが出ました。

余談

box-sizingプロパティが無かった時代は、要素の幅と高さにパディングとボーダーが含まれませんでした。そのため、固定幅でマルチカラムをレイアウトするときは、要素が固定幅に収まるように計算(要素の幅の他にパディング、ボーダー、マージンの幅を考慮)してレイアウトしていました。要素、パディング、ボーダー、マージンのうちどれかひとつの幅の値が変わると、他の3つにその分の値を振り分けていました。幅の値を変更するたび、計算し直してCSSを書き直していたのです。要素全体の幅の合計が、固定幅を超えるとレイアウトは崩れます。

box-sizingがborder-boxの場合、要素の幅にパディングとボーダーを含めるので、それぞれの幅がいくつであっても要素の幅を特定の値にできるようになりました。

まとめ

box-sizingプロパティの基本的な使い方について書きました。レイアウトする際、要素にbox-sizing:border-box;を指定すると「幅の再計算」と「CSSの変更」の手間が減り、制作の負担が減るのではないでしょうか。便利なプロパティを積極的に活用していくと良いです。

» HTML入門のまとめはこちらです。