phiary

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.

[syouhei08]

スマホの時にボーダー便利

[muamqm]

なんか時代が一周しとる……

[Fivestar]

時代がIE6に追いついたわけですね

[teitox]

“ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;”

[idr_zz]

いつもリセットCSSに含めてて忘れてたけど、便利すぎるんですこれ！！！ CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary

[kote2kote2]

box-sizing

[takahiro_kihara]

なんか知らんけど、border-box でイケた。

[tokumita]

ボックスサイズの算出方法の変更の仕方

[nknkt]

とりあえず入れとけ

[puni_2]

CSS3 の box-sizing

[sutanto1983]

box-sizing

[digitalglm]

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary: 今回は CSS3 から box-sizing について紹介します.…

[hardline5617]

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定

[iceleaf]

box-sizing

[kitokitoki]

box-sizing: border-box; と指定すれば、widthとborderの同時指定でも width にキリのよい値を設定できる

[mut00tum]

box-sizing

[Yukarigohan]

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定

[kkana]

“border-bo”

[junjis0203]

Android2.3だと-webkit-付けないとだめだった。3.2だと付けなくてもおｋだった

[deokisikun]

phiさん助かったよー(><)/

[enachin]

めもめも

[typista]

ぽけったー CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定

[cibea]

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定

[hondamarlboro]

便利そう

[mooz]

content-box, border-box

[hedeyoshi]

後方互換性モードを思い出す……。

[gla69]

ほほう！コレは便利。。。" IE6 や IE7 の対応を強いられている Web 屋さんは残念ながら使えません…" クソッ…まだまだ強いられているんだッ…

[gayou]

知らなかった。

[longroof]

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life

[mifio]

職場からIE7が駆逐されたら使う（IE6はなんとか撲滅できた）

[gnucat]

ほうほう