HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎41. borderとpaddingの算出方法の変更のプロパティ(box-sizing)

      2017/07/20   hatano

box-sizingプロパティ(ボックスサイジング)とは

box-sizingプロパティはpaddingborderの値を幅、高さに含めるかどうかのプロパティです。CSS3で追加されたプロパティです。通常、要素に幅、高さの指定がある場合paddingborderの値を加算して再計算する必要があります。paddingborderの値が変われば、その都度、幅、高さを再計算する必要があります。これは非常に手間のかかる作業です。box-sizingを使えば、この手間が解消されます。またbox-sizingは他のCSS3と違いCSS3策定前のブラウザInternetExplorer8(IE8)でも対応している点も重要です。これはbox-sizingがIEの独自プロパティだったものをCSS3に採用したからです。ベンダープレフィックスも不要です。

ブラウザごとのbox-sizingの対応状況は下記のサイトで確認できます。

box-sizingの各ブラウザの対応状況
Can I use -CSS3 Box-sizing-


<div>幅と高さのみを使用した場合</div>
<div class="boxsixing">box-sizingを使用してpaddingとborderを指定</div>
<div class="normal">box-sizingを利用していない場合</div>


div{
	width: 200px;
	height: 200px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	background-color: #ddd;
}
.boxsixing{
	box-sizing: border-box;
	padding: 20px;
	border: 10px solid #666;
}
.normal{
	padding: 20px;
	border: 10px solid #666;
}

box-sizing利用した場合と利用しない場合

box-sizingの値

  • content-box…初期値。borderpaddingとも幅、高さに含みません。
  • padding-box…paddingのみ幅、高さに含まれます。borderは含みません。
  • border-box…borderpaddingの値は幅、高さに含まれます。

box-sizingの使い方

使用したい要素ごとに指定するのもありですが一番のオススメは全称セレクタを使い、リセットCSSに指定する方法です。使用する値はborder-boxです。


*{
	box-sizing: border-box;
}

まとめ

  • box-sizingプロパティはpaddingとborderの値を幅、高さに含めることができる
  • paddinngとborderの値を含める場合の指定はbox-sizing: border-box;
  • box-sizingプロパティはbody内で使用できるすべての要素に指定できる