ページの先頭へ
トップに戻る
2017年1月17日 Web制作

【CSS】ボックス幅の計算が簡単になる「box-sizing」の使い方

ブロック要素の横幅は、widthheight)だけではなくpaddingborderの幅も加算されます。

レイアウト時のこの計算がけっこうめんどくさいんですが、CSS3のbox-sizingプロパティを使うと計算が超簡単に!というか計算する必要がなくなります。

box-sizingとは

ボックス幅の算出方法を指定するプロパティです。

デフォルトの値はcontent-boxで、widthheight)にpaddingborderを加えた幅が実際のボックス幅となります。

値にborder-boxを指定すると、widthheight)に指定した値がそのまま要素の幅となり、paddingborderを含めたサイズで描画されます。

それでは実際に挙動の違いを見てみましょう。

実際の挙動

同じスタイルのボックスを2つ用意し、片方のみbox-sizing: border-box;を指定しています。

HTML

CSS

DEMO

BOX1
BOX2
BOX1の実際の横幅が250+50+50の350pxなのに対し、BOX2はwidthに指定した250pxのままになっています。

まとめ

使い勝手が良い上に理解するのも簡単!CSS3ですがほぼ全てのブラウザ(IEは8以上)が対応しているので、使える所はどんどん使っていきましょう。

ちなみにスマートフォン用サイトの横幅指定(width: 95%;とか)のときに使うと幸せになれます。