box-sizingでデザインが楽になる:CSS3

コーディングデザインの本を見ていると、CSSに必ずといっていいほど登場するのが「box-sizing: border-box」。

解説を読んでもいまいちピンと来ない。
box-sizingプロパティには「border-box」と「content-box」などがあってその違いも今いちわからない…。

で、実際に作ってみて納得。こりゃ便利なプロパティです。
グリッドレイアウト、とくにレスポンシブサイトなんて必須かもしれません。
⇒box-sizingプロパティのサンプル

今までは、CSSでボックスを作って余白や枠線を入れたりすると、幅or高さで指定した値より大きくなってデザインが崩れたりと、イラつくことも多々ありましたが。。。box-sizing: border-boxを指定するとスッキリ解消します!

全ての要素に適応させる場合は、ユニバーサルセレクタ (*)でOK

*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

-webkit-とか先頭に付けているものはベンダープレフィックスと言うらしい。

拡張機能であることを明示するための識別子
ベンダープレフィックス-CSSの基本

だそうです。
これをつけないとFirefoxでは反映されませんでした。念のため各ブラウザのものを指定しておいたほうがよさげ。

■各ブラウザのベンダープレフィックス
-moz- (Firefox)
-webkit- (Google Chrome、Safari)
-o- (Opera)
-ms- (Internet Explorer)

※IE7やIE6は対応しません。
というか対応させる方法あるんでしょうか・・・(^^;)?
もうXPは終了なので個人的にはほぼスルーします。

コメントを残す

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