CSSの計算が劇的に簡単になる box-sizing

cssでボックスに幅を指定したいときに使うwidthですが、それはあくまで内容物が入る事ができる幅になります。その際にborderやpaddingを設定するとその幅がwidthに追加されてしまい、ボックスの所有する幅が増えてしまいます。

そんな時には

box-sizing: border-box;

を設定しましょう。

box-sizing

このプロパティー(box-sizing)ではボックスサイズ(width, height) の算出方法を指定する際に使用するプロパティで、padding と border の幅を要素の幅と高さに含める事ができます。
なので計算がとても楽になり、レスポンシブ化する際にも役に立ちます。

例えば通常の幅設定でwidthの値を全体の70%として、borderが3px付いたとする。
この場合に全体の幅が変わるとwidthは相対的に可変されるが、borderはそのままの3pxとなる。じゃあborderも%で設定すればいいじゃん!となるが、全体の幅が狭くなった時に、borderの幅が1pxを切ってしまうことになる場合がある。そうなったら消えちゃうかもしれない。
これに対しbox-sizing: border-box;を設定していれば、borderは3pxのままになります。

気になる角ブラウザの対応ですが、最近のブラウザは対応済みです。ただしIE6 や IE7はダメ。

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ WordPressへ にほんブログ村 IT技術ブログ Webサイト構築へ

投稿者: おーあえ

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください