CSS3のbox-sizingを使うとボックスモデルが感覚的に扱えて便利

box

HTMLやCSSを使い始めた最初のころ、paddingやborderを設定するとボックスが指定したwidthやheightを超えて反映されて苦労しました。

ただ、今ならbox-sizingというプロパティを知っているので、ボックスモデルをわりと感覚的に扱えるようになりました。

今回はそのbox-sizingプロパティの紹介です。

スポンサーリンク

ボックスを感覚的に扱うとは?

「ボックスを感覚的に扱う」といってもいまいちピンと来ない方もいるかもしれないので、少し説明します。

divなどのブロック要素に対してCSSで設定したボックスは、paddingやborderの具合によって本来のwidthやheightを超えてしまいます。

box-sizingを使わない例

これは、100×100pxのボックスにborderとpaddingを10pxずつ適用してみた例です。

本来の大きさである100×100pxを、付加したborderとpaddingのぶん超えていることがわかります。

これだと、後からborderやpaddingを付け足した時に全体のデザインに支障がでてきます。

これを、ボックスの大きさが100×100pxのまま扱えるようになると便利ですよね?

それを可能にするのがCSS3のbox-sizingプロパティです。

box-sizingの使用方法

box-sizingの値をborder-sizingとするだけです。

実際に使用してみると、ボックスの大きさがすべて100×100pxになっていることがわかりますね。

box-sizingを使う例

これで、ボックスモデルが感覚的に扱えるようになりました!やったね

Sublime Textを使っている方への補足

ちなみに、Sublime Textを使っている方はbox-sizingの部分の色が変わりません。

色は変わってなくても、ちゃんと適用されているので大丈夫です。

sublimetextでbox-sizingを見た時の図

以上、補足でした。

スポンサーリンク

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*