CSS3を勉強したい

CSS3Cascading Style Sheets

box-sizingで横幅・高さの対象を指定する

通常のボックスモデルでは、width、heightプロパティの値はコンテンツ領域の幅を示します。よって、パディング領域・ボーダー領域は、widthとheightで指定された幅の外側に存在することになります。

この仕様だと、webページのレイアウトにおいて不自由な場合も出てきます。そこで、この設定を変更するのがbox-sizingプロパティです。

box-sizingプロパティを使うと、widthとheightで決める幅を、「コンテンツ領域だけの幅」にするのか、「パディング領域とボーダー領域を含む幅」にするのかを指定することができます。ボックスのサイズの算出方法を指定するわけです。

通常のボックスモデルではwidth、heightはコンテンツ領域のみに影響します。

content-boxを指定した場合(初期値)

box-sizing: border-box;を指定することで、widthとheightの値を、ボーダー領域を含めた形で指定できます。

border-boxを指定した場合

box-sizingプロパティの指定方法

box-sizingプロパティを指定する時は、widthやheightを適用する要素にbox-sizing:値;の形で指定します。

横幅を高さを持つ全ての要素に適用することができます。また、継承はありません

使用できる値と、その内容は次の通りです。

content-box
初期値
要素の横幅と高さの指定を、コンテンツ領域に対してとする。
border-box
要素の横幅と高さの指定を、パディング領域とボーダー領域を含めた領域に対してとする。
inherit
親要素の値を継承する。

box-sizing: border-box; を指定しない場合の見本

下の見本は、ボックスに対してwidth: 400px;height: 200px;を指定し、余白・枠としてpadding: 10px;border: 5px;も指定しています。

しかしwidth: 400px;height: 200px;というのはコンテンツ領域に対しての指定なので、ボックス全体で見た大きさはそれ以上になっています。パディングとボーダーの分大きくなっているからです。

HTML
	
<div class="mihon">
    <p>中略</p>
    <p>中略</p>
</div>
CSS
	
.mihon {
    width: 400px;
    height: 200px;
    padding: 10px;
    border: solid 5px #55f;
    background-color: #fdd;
}

上記コードの結果が下です。

「width: 400px;」「height: 200px;」を指定しています。

しかし実際の大きさは、パディング・ボーダーを含めた「横幅:430px」「高さ:230px」になっています。

paddingとborderを指定しながらも、ボックス全体の大きさを横幅400px、高さ200pxにしたいとした時、box-sizing: border-box;を書き足すことで解決します。

box-sizing: border-box; を指定した場合の見本

下の見本では、ボックスに対してbox-sizing: border-box;を加えました。

box-sizing: border-box;を書き足すだけで、コンテンツ領域だけでなく、パディング・ボーダーを含めた大きさが「横幅:400px」「高さ:200px」となります。

HTML
	
<div class="mihon">
    <p>中略</p>
</div>
CSS
	
.mihon {
    width: 400px;
    height: 200px;
    padding: 10px;
    border: solid 5px #55f;
    background-color: #fdd;
    box-sizing: border-box;
}

上記コードの結果が下です。

「box-sizing: border-box;」を指定することで、「横幅:400px」「高さ:200px」は、パディングとボーダーを含めたサイズになってます。