【CSS入門】box-sizingを学んで楽をしよう【border-boxがおすすめ】

この記事ではサイトを作るときに必ず指定することになる、CSSのbox-sizingプロパティについて解説します。

box-sizingとは？

要素のwidth（幅）とheight（高さ）の中にpaddingとborderを含めるかどうかを指定します。

box-sizingの使い方

box-sizingに指定できる値は以下の通りです。

content-box

box-sizingの初期値がこれです。

要素のwidth（幅）とheight（高さ）の中にpaddingとborderを含めません。例えば、ある要素のwidth(幅)を200pxと指定したとしても、同時に左右のpaddingに10pxずつ指定したら、要素の幅は合計で220pxとしてレイアウトを考えないといけなくなります。

HTML

<div class="box"></div>

CSS

.box{
  width: 200px;
  height: 200px;
  padding: 10px;
  box-sizing: content-box;
}

/*　この要素の幅は合計220px */

box-sizing: border-box;

　
要素のwidth（幅）とheight（高さ）の中にpaddingとborderを含めます。例えば、ある要素のwidth(幅)を200pxと指定したとして、同時に左右のpaddingに10pxずつ指定しても、要素の幅は合計で200pxとして扱われます。

デフォルトのcontent-boxと違い、要素の幅と高さを考えてレイアウトするのに余計な計算をしなくて済むので重宝します。特にレスポンシブデザインのWebサイトを作る際に非常に便利なので、*（アスタリスク）を使い全ての要素につける事が多いです。

HTML

<div class="box"></div>

CSS

.box{
  width: 200px;
  height: 200px;
  padding: 10px;
  box-sizing: border-box;
}

/*　この要素の幅は合計200px */

まとめ

この記事に書かれていることで、特に覚えておいて欲しいことは以下の1点です。

CSS関係の記事は他にも書いているので、宜しければそちらもチェックしてみてください。