要素がpaddingやborderの分だけはみ出してしまう、といった事は無かったでしょうか?
そういった事が無いように出来るbox-sizingプロパティの使い方を詳しく解説していきます。
box-sizingプロパティとは
box-sizingプロパティは、要素の幅(width)と高さ(height)に内余白(padding)とボーダー(border)を含めるかどうかを指定出来るプロパティとなります。
例えば、以下のようなCSSがあった場合を例にあげると、
div {
width: 300px;
height: 100px;
padding: 10px;
border 2px solid #000;
}含めない場合
幅と高さの中にpaddingとborderを含めないので、
- 幅 = 300px + 10px + 10px + 2px + 2px = 324px
- 高さ = 100px + 10px + 10px + 2px + 2px = 124px
となり、paddingやborderの値の分要素の幅が広がります。
含める場合
幅と高さの中にpaddingとborderが含まれているので、要素の幅は300px、高さは100pxとなります。
レスポンシブ化をするうえで、要素の幅と高さの計算をする必要が無いためこちらの方が手間がかかりません。
box-sizingプロパティの使い方
box-sizingプロパティの使い方は以下のようになります。
div {
box-sizing: 値;
}上記のようにセレクタに対し、値を指定します。
指定出来る値は2つありますので、次の項目で解説していきます。
指定出来る値
box-sizingプロパティで指定出来る値は以下の2つとなります。
content-box
幅と高さにpaddingとborderを含めません。
デフォルトでcontent-boxとなります。
border-box
幅と高さにpaddingとborderを含めます。
上記のように、要素の幅と高さにpaddingとborderを含めるかどうかを指定出来ます。
※marginは外余白となり、要素の幅・高さに含まれません。
値がcontent-boxの場合
値がcontent-boxの場合は以下のようになります。
div {
width: 100%;
height: 100px;
padding: 20px;
border: 2px solid #000;
background-color: #f2F2F2;
box-sizing: content-box;
}幅、高さともにpaddingとborderの分が増えて、はみ出して表示されています。
はみ出さないように表示するには、widthやheightの指定をはみ出す分を含めて計算しなければいけません。
値がborder-boxの場合
値がborder-boxの場合は以下のようになります。
div {
width: 100%;
height: 100px;
padding: 20px;
border: 2px solid #000;
background-color: #f2F2F2;
box-sizing: border-box;
}指定した幅100%、高さ100pxの中にpaddingとborderが含まれて表示されています。
指定した幅、高さに全て含まれていますので、はみ出す事はありません。
全ての要素や疑似要素に対してborder-boxを適応させる
コーディングの際は、全ての要素・疑似要素にあらかじめbox-sizing: border-box;を指定しておくと楽になります。
全ての要素・疑似要素に適応するには、以下のようにCSSで記述します。
*,
*::before,
*::after {
box-sizing: border-box;
}セレクタの「*(アスタリスク)」を使用する事で全ての要素に適応させる事が出来ます。
古いバージョンのブラウザに対応する場合はベンダープレフィックス(-webkit-box-sizing: border-box;)で対応可能です。
さいごに
いかがでしたでしょうか。
今回は、box-sizingプロパティの使い方について詳しく解説しました。
あらかじめすべての要素・疑似要素にborder-boxを適応させておくとコーディングが楽になりますので、忘れずに記述するようにしておきましょう。
