box-sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ

  • あとで読みたい人は…

CSS3 の box-sizing プロパティがかなり便利です。

あるのは知っていたのですが実際何案件か使ってみてやっぱり便利でした。

CSS覚えたての頃よくやった横幅や高さを指定する時のミスがなくなります。

「あれ、なんで崩れるんだろ?」

「padding と border 分マイナスするの忘れてた~」

ってのがよくありました。(今もたまに。。)

それが魔法のコトバ「box-sizing」を唱えれば、マイナスすることなく横幅や高さを指定することができます。

これはものすごい効率化になりますね!

box-sizing の書き方

box-sizing プロパティでボックスサイズ(width, height ) の算出方法を 指定します。

指定できるのはこちらの2種類です。

  • content-box … 【デフォルト値】padding と border を要素の幅と高さに含めない。
  • border-box … padding と border を要素の幅と高さに含める。

ベンダープレフィックスもつけて box-sizing を指定します。

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

box-sizing の使い方

1)box-sizing 用のクラスをつくる

例えば「.boxSizing」というクラスをつくって、使いたい要素に都度指定するという使い方です。
このやり方が一番表示速度など考慮した方法になるかなと思います。

2)div などの主要なブロック要素のみ指定する

box-sizing の使用頻度が多くなりそうなら主要なブロック要素にこんな感じで直接指定してしまえば楽ですね。
リセットCSSを指定しているところに追加しちゃうのも手だと思います。

div,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,form,input,textarea,button,table,tr,th,td,article,aside,footer,header,hgroup,nav,section{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

3)ユニバーサルセレクタで全指定する

もう全要素やったれ~い!っていう場合は、ユニバーサルセレクタ(全称セレクタ)でしょう。読み方はアスタリスクではないので注意!

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

ユニバーサルセレクタがいいのか、主要なタグを指定するタイプセレクタがいいのかは個人の考え方によりますが、box-sizing のみならどちらでも大きな影響はないかと思います。
ユニバーサルセレクタでリセットCSSを指定だとフォームまわりに影響がでるようですが、どこで調整するかデフォルトの指定のまま使うのかなど状況と考え方次第ですかね。

改めてユニバーサルセレクタについて調べていたら、色々まとまった記事があって面白かったです。
ユニバーサルセレクタ(全称セレクタ)が結局使いやすい。

box-sizing のブラウザ対応

IE7 では非対応ですが、それ以外のブラウザなら現状ほぼ問題なさそうです。(IE6のことは忘れましょう)

大枠のブロック要素に使う時に注意さえしていれば、多少崩れるくらいでコンテンツ自体が見えなくなるような致命的な問題はないと思うので、
個人的には積極的に使って行きたいなと思っています。

[参考サイト]
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
レスポンシブWebデザインに使うグリッド・システムには、box-sizing: border-boxがいいんじゃなかろうか?

Pocket
article clipper box sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ

3 thoughts on “box-sizing は魔法のコトバ!もうpaddingやborderを含めた幅の計算はヤメヤメ

  1. Pingback: CSS3のbox-sizingのborder-boxを使って、paddingやborderを設定してもwidthの幅を一定に | R_B_wordpress

  2. Pingback: CSS: box-sizing | deadwood

  3. Pingback: 【もう弄ばれない】box-sizingで思い通りのレイアウトに | fab-log

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)