CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
今回は CSS3 から box-sizing について紹介します.
width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか?
これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます.
あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
Table of contents
box-sizing プロパティとは
box-sizing プロパティとはボックスサイズ(width, height ) の算出方法を 指定する際に使用するプロパティです.
指定可能な値はこちら
値 | 説明 |
---|---|
content-box | padding と border の幅を要素の幅と高さに含めない. デフォルト値. |
border-box | padding と border の幅を要素の幅と高さに含める. |
っといってもいまいちわかりませんよね. 実際に使用しているサンプルを作ってみました.
上の要素はデフォルト, 下の要素は box-sizing: border-box
を指定しています.
box-sizing プロパティに指定している値が違うだけで表示サイズが異なるのが分かるかと思います.
css の世界では, width に 300px と指定していても padding や border-width が指定されていた場合,
実際に表示される要素の幅は width + 両サイドのpadding + 両サイドのborder-width
でした.
つまり上記のサンプルの上の要素は 300px + (15*2)px + (5*2)px = 340px
として表示されているわけです.
対する下の要素は border-box を指定しているので padding や border-width の幅に関係なく
width に指定した値, つまり 300px
として表示されています.
このように box-sizing に border-box を指定しておくことで, 指定した width の通りに要素を表示してくれるようになります.
一応モダンブラウザはひと通り対応していますが ベンダープレフィックスを指定しないと反映されませんのでご注意を!
段組時に効果発揮!!
box-sizing の解説をしてきましたが, まだ便利さがピンとこないかたもいるかと思います. 実際にどう便利なのかが分かるようサンプルを作りました.
とりあえず下記のリンクをどうぞ.
width に 984px だとか 686px なんて中途半端な指定をしているのを見たことありませんか? それは padding や border の幅を計算に入れて幅を設定しているためです.
ですが, 上記のサンプルをみて分かる通り, box-sizing に border-box を指定しているので, width にキリの良い整数を指定しても段組が崩れていないのがわかるかと思います.
オススメの設定
もうデフォルト値を変えちゃうことをオススメします!
すべての要素に box-sizing: border-box;
を指定しましょう♪
私がサイトを作る際, 必ずリセットスタイルに下記の 指定を加えています.
* { -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 対応状況(追記)
追記です.
各ブラウザの対応状況を知りたいという方が多かったので 載せておきます.
ブラウザ | 対応状況 |
---|---|
Google Chrome | version 1 ~ |
Safari | version 3 ~ |
Firefox | version 2 ~ |
Opera | version 8 ~ |
IE | version 8 ~ |
っということで未だに IE6 や IE7 の対応を強いられている Web 屋さんは残念ながら使えません…
でも少し調べたら IE 5.5 以前は box-sizing: border-box;
を指定した際の計算方法が
デフォルトだったらしい…
padding と border を要素に含むか含まないかを指定できるプロパティ「box-sizing」の解説。 IE6/7 非対応。
(メモメモ。)
atode
box-sizing: border-box;
あとでよむ
デフォルトを逆にしてくれれば…
便利そう!
IE8から使えるのがより便利なんです。
しらんかった、こりゃ便利だ / CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life
ちゃんと勉強しよう
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life
prefixをそんなに書かなくても、webkitとmozだけで、ええかな。|CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life
時代がIE6に追いついたわけですね
from はてなブックマーク – 人気エントリー http://b.hatena.ne.jp/hotentry
box-sizing
starred items / from はてなブックマーク – 人気エントリー http://b.hatena.ne.jp/hotentry
box-sizingいいよねー
IEの後方互換モードみたいなカンジか。最初はこれが標準だと思ったままCSS使ってたなー。[css3]
メモ
サイズ指定
コレに依存しております。
こんなのあるんだ
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life
どっちにしろ、「width – (paddingとかborderとか)」を計算しなきゃならないので、あまり使ってないなー。
結局ブラウザの対応が面倒だからこういうプロパティってあまり使わないって言う
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life
おー!!助かるー!!!
starred items / from はてなブックマーク – 人気エントリー http://b.hatena.ne.jp/hotentry
なんでデフォルトでない方にリセットするかな。IE6仕様に戻してどうするよ。
starred items / from はてなブックマーク – 人気エントリー http://b.hatena.ne.jp/hotentry
なんか時代が一周しとる……
なんかマリオが落ちてきた
box-sizing プロパティについて
ああ、これはぜったい便利だわ。覚えておこう。
box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定できるとのこと。IE6~7は使えない。
[…] CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life […]
ほうほう
職場からIE7が駆逐されたら使う(IE6はなんとか撲滅できた)
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life
[CSS] / “CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life” http://t.co/wYoujiMU
http://t.co/y3Ynnngo
Webサイトのコーディング時に段組みの強い見方、box-sizing がヤベえ!!! 絶対に使うぞコレ。
Webサイトのコーディング時に段組みの強い見方、box-sizing がヤベえ!!! 絶対に使うぞコレ。 http://t.co/4hbXaDaB
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/10S5lCag
padding 、もはや覚えておらず。 http://t.co/puiZ0Ia5
「ボックス幅は%やemで算出するけどボーダーはpx幅で」みたいな場面では確かに便利なのだけど、サンプルみたいに全部px指定でOKな場合には特に有り難みを感じないので、デフォルトにしてしまうのはどうかと思うなあ / “CSS3 の bo…” http://t.co/H73rmWve
「ボックス幅は%やemで指定するけどボーダーはpx幅で」みたいな場面では確かに便利なのだけど、サンプルみたいに全部px指定でOKな場合には特に有り難みを感じないので、デフォルトにしてしまうのはどうかと思うなあ
CSS:CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/QjmQnG1I
[…] 4. CSS:CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 […]
知らなかった。
なるほどです。
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/6Sc4HD8b @phi_jpさんから
ほほう!コレは便利。。。" IE6 や IE7 の対応を強いられている Web 屋さんは残念ながら使えません…" クソッ…まだまだ強いられているんだッ… / “CSS3 の box-sizing が便利すぎる!! padding や …” http://t.co/THXS4AkI
ほほう!コレは便利。。。" IE6 や IE7 の対応を強いられている Web 屋さんは残念ながら使えません…" クソッ…まだまだ強いられているんだッ…
“CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life” http://t.co/ud5CIp7N
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/NLJa3FIC
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/NLJa3FIC
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/Mj6AZa4x @phi_jpさんから
“CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life” http://t.co/KsaUb2zy
あとでよむ((φ(-ω-)カキカキ CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/YtbIeo6l @phi_jpさんから
便利そう。CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/GEjR3MgU @phi_jpさんから
RT @webcreatorbox CSS:CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/4BEoMsEb
後方互換性モードを思い出す……。
あとでよむ →→→ CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/bCagmIKR
あとでよむ →→→ CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/bCagmIKR
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/OaItYAyO @phi_jpさんから
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/pfLxtGjB
これ知らなかった!/CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/VFqX8FVL
これは便利。知らなかったー|CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/7LhkRRw5 @phi_jpさんから
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/ksHR5Oxk @phi_jpさんから
そうか、Firefox/Chromeのプレフィックス使えばいけるのか。IE8以降/Operaは対応してるのでbox-sizingだけでオッケー。 RT CSS3 の box-sizing が便利すぎる!! http://t.co/MJN37Ikb @phi_jpさんから
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/4drDi27r
かゆいところに手が届くなあ RT @webcreatorbox CSS:CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/qUq9Y8yl
content-box, border-box
[webデザイン][web制作][CSS][css3] / “CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life” http://t.co/LQbY0C3S
[あ] CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/dyFo24FM
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/xwsGwp96
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/qyFRtDj4
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/1U8815kF
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/xtVbm7ZN
“CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life” http://t.co/S7Bl6Teq
box-sizing、マヂで便利。スマホサイトの時はフル活用。PCサイトではまだ。早くIE7を捨てたいなぁ → <a href="http://tmlife.net/web/css3/css3-box-sizing.html">http://tmlife.net/web/css3/css3-box-sizing.html</a>
box-sizing、マヂで便利。スマホサイトの時はフル活用。PCサイトではまだ。早くIE7を捨てたいなぁ → http://t.co/lJGiWzXG
RT @webcreatorbox CSS:CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/smJ6i0Vk
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/oKOVTGS4
メモメモ_φ(・_・ / CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life あとで新聞 – 新着速報版 http://t.co/AyCZgDiI
便利そう
便利そう / “CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life” http://t.co/Z8RUkUgY
メモメモ_φ(・_・ / CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life あとで新聞 – 新着速報版 http://t.co/AyCZgDiI
便利そう / “CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life” http://t.co/Z8RUkUgY
RT @webdesignsokuho CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/HcpbmKAo
こんなプロパティあったのかー。IE6、7対応が必須でなければ、、か。。 / CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/Wkq4LJah @phi_jpさんから
starred items / from はてなブックマーク – 人気エントリー – コンピュータ・IT http://b.hatena.ne.jp/hotentry/it
これは便利だな。確かにキリの悪い数字を記述していることはある。CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/5gOcY0JE @phi_jpさんから
これは便利だな。確かにキリの悪い数字を記述していることはある。CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/5gOcY0JE @phi_jpさんから
Pocket で読んだ : CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/bw4a4spj
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/SFHgvOFy
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/5yh9qcU1 えっ何これ便利
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM… http://t.co/PzSsqDUA
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life http://t.co/mjrym3VH
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/rWQaSohX9j @phi_jpさんから
“CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life” http://t.co/z2jE8jotOo
これがほしかったんや |CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/4FJqm7Adow @phi_jpさんから
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/ZoqYUx0Diz @phi_jpさんから
“CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life” http://t.co/CJofu5gk28
CSS3で久々に役に立ちそうな新しいアレを覚えた@CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/jRtaoW3tNe
RT @REMUx2: CSS3で久々に役に立ちそうな新しいアレを覚えた@CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/jRtaoW3tNe
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/G3A2fcK9JO
あとで読む / RT @REMUx2: CSS3で久々に役に立ちそうな新しいアレを覚えた@CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/zhDkkeE3R6
RT @Luz_Network: あとで読む / RT @REMUx2: CSS3で久々に役に立ちそうな新しいアレを覚えた@CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/zhDkkeE3R6
RT @Luz_Network: あとで読む / RT @REMUx2: CSS3で久々に役に立ちそうな新しいアレを覚えた@CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/zhDkkeE3R6
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 http://t.co/yy8P8Lj5uf @phi_jpさんから
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
IE6はもとからborder-boxだし、コメントみてもそれを知らない人が増えてるんですね。時代を感じる。
まぁ「未だに IE6 や IE7 の対応を強いられている Web 屋さんは残念ながら使えません…」とかいうのはユーザー目線ではない意見だなぁ
ぽけったー CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
めもめも
[…] CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定[TM ife]さん […]
[…] 参考:「CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定」TM Life […]
[…] 参考ブログ記事 CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定TM Life!!(ティーエム ライフ) […]
phiさん助かったよー(><)/
[…] もっと先に触れるつもりだったけど、参考:CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 によると […]
[…] http://tmlife.net/web/css3/css3-box-sizing.html […]
Android2.3だと-webkit-付けないとだめだった。3.2だと付けなくてもおkだった
“border-bo”
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
[…] CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life […]
[…] マイズにとても役立つ便利なコード。 こちらのサイトで詳しく解説されているので参考にしてください。 CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定|TM Life […]
box-sizing
[…] CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life […]
box-sizing: border-box; と指定すれば、widthとborderの同時指定でも width にキリのよい値を設定できる
[…] http://tmlife.net/web/css3/css3-box-sizing.html […]
box-sizing
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定
[…] CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life […]
paddingの数値を気にしなくていい使いやすいCSS