CSS3 ボックスサイズ(box-sizing)

CSSを使用して3ボックスサイズ調整機能を使用すると、要素の有効幅を指定できます。

使用するボックスサイズ(box-sizing)でボックス幅を再定義

デフォルトでは、要素のボックスは可視です/実際にウェブページに表示される幅や高さはそれに依存していますwidthまたはheight、paddingおよびborder属性値。例えば、あなたが幅が100%の<div>要素には内側の余白や枠が適用されている場合、水平スクロールバーが表示されます。以下の例を参照してください。

.box　{
　　　　width:　100%;
　　　　padding:　20px;
　　　　border:　5px solid #f08080;
}

これはWebデザイナーが長年直面してきた非常に一般的な問題です。しかし、CSS3導入により、box-sizing属性を使用してこの問題を解決し、CSSレイアウトをよりシンプルかつ直感的にします。このbox-sizing属性を使用して、デフォルトのCSSボックスモデルを以下のように変更し、要素上のpaddingやborderで指定された要素のレイアウトと描画を内容エリア内に配置し、要素のレンダリング幅と高さを指定されたCSS widthとheight属性に等しくします。

.box　{
　　　　width:　100%;
　　　　padding:　20px;
　　　　border:　5px solid #f08080;
　　　　box-sizing:  border-box;
}

この例の出力を見ると、スクロールバーが消えたことが分かります。

Box-Sizingでレイアウトを作成

CSS box-sizing属性を使用して、パーセントで多列レイアウトを作成することが非常に簡単です。今では、要素のフレームの最終的なサイズに心配する必要はありません。フレームに枠線や枠線を追加する必要はありません。

以下の例では、各列が等しい幅を持ち、float属性を並べて配置します。

.box　{
　　　　width:　50%;
　　　　padding:　20px;
　　　　background:  #f2f2f2;
　　　　float:  left;
　　　　box-sizing:  border-box;
}

同様に、このシンプルな技術を使用してより複雑なレイアウトを作成することができます。

.box　{
　　　　width:　30%;
　　　　padding:　20px;
　　　　margin-left:　5%;
　　　　background:  #f2f2f2;
　　　　float:  left;
　　　　box-sizing:  border-box;
}
.box:first-child　{
　　　　margin-left: 0;
}