「width崩れ、カラム落ちにはこれ」まるでチート!【CSS3】box-sizingが実はすごい子
レスポンシブで良く使う、CSS3 box-sizingの使い方を紹介します。ぜひともスマホサイトなんかに活用ください。
「width崩れ、カラム落ちにはこれ」まるでチート!【CSS3】box-sizingが実はすごい子
おはこんばんちわ、スニペのショートカットをネトゲみたいにファンクションキーに振って、技出してる感じでグラデーション作ったりしてニヤニヤしてるやのっぱです(´・ω・`)v
あんまし知られてない上に、IE8からしか使えないので(またおまえかIEたそ。。。)そんなに聞かないプロパティですが、
近年のレスポンシブブーム?やスマホサイトには欠かせない、box-sizingをwidth計算に悩める子羊たちへ送りたいと思います。
さて、まずはbox-sizingってなんぞや?
聞いたこともなぃわ!っという方もいらっしゃると思いますので、
このチート超絶呪文box-sizingの概要をさくっとご説明いたします。
box-sizing
ボックスサイズの算出方法(ここ重要)を指定することが出来ます。
プロパティ
content-box | 初期値:padding・borderをwidth・heightに含めない |
---|---|
border-box | padding・borderをwidth・heightに含める |
inherit | 親要素の値を継承する(まぁ使わない) |
※ベンダープレフィックス必須
ということです。
これでは、なんのこっちゃ抹茶に紅茶ですよね。
ざっくり言いますと、今までの記事でもありましたがborderやpaddingはwidth・heightに影響を及ぼします。
そのたびに計算して、width・heightを調節していたのですが
このbox-sizingの値をborder-boxにすると、自動算出によりwidthやheightの値に合わせてborderやpaddingの分、ボックスサイズが小さく調整されます。
つまり、width決めてたらborderとかpaddingとか足しても勝手にwidth内に収まるようにしてくれるんです。
これは今までレスポンシブでグローバルナビを作る時など、borderが邪魔で縮んでる途中でカラム落ちしていたのが、border含めたwidthになるのでカラム落ちしなくなります! Oh my コンブ!
2カラムとかした時に、padding調整するたびにwidth計算してたのが、しなくてよくなります!!
レスポンシブには最適でオールオッケーな夢の様なプロパティです。
でわ、実演していきましょう!
両方共widthを300px、heightを80pxにしています。
<style> .contBlock { width:500px; margin:0 auto; background:#fff; border:2px solid #ccc; } .contBlock .dreamBox01 { width:300px; height:80px; padding:10px; margin:20px auto; background:#8EF9FF; border:4px solid #ccc; } .contBlock .dreamBox02 { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; width:300px; height:80px; padding:10px; margin:20px auto; background:#A4FFA6; border:4px solid #ccc; } </style> <div class="contBlock"> <div class="dreamBox01"></div> <div class="dreamBox02"></div> </div>
おわかりいただけただろうか。。。
下のboxは設定したwidthを維持してくれていることがっ!!
これでなにができるのか。。。ということですが
実に色々なことがカンタンに実現するようになります。
まずはレスポンシブなナビでも作ってみましょう!
<style> /* clearfix ----------------------------------------------------------------------*/ .clearfix:after { content: "."; display: block; visibility: hidden; height: 0; clear: both; } /* WinIE7 only */ *:first-child+html .clearfix { height: 1%; } /* WinIE6 and below */ /* hide \*/ * html .clearfix { height: 1%; } .navTest { width:100%; padding:4px 0; border: solid #ddd; border-width: 2px 0 2px 0; background: #5b5b5b; /* Old browsers */ background: -moz-linear-gradient(top, #5b5b5b 0%, #2b2b2b 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b5b5b), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #5b5b5b 0%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5b5b5b 0%,#2b2b2b 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5b5b5b 0%,#2b2b2b 100%); /* IE10+ */ background: linear-gradient(to bottom, #5b5b5b 0%,#2b2b2b 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-8 */ } .navTest .navList { width:80%; margin:0 auto; padding:0; list-style:none; color:#FFFFFF; } .navTest .navList li { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; float:left; width:20%; padding:1% 0; background:none; border-right:2px solid #ccc; text-align:center; } .navTest .navList li:first-child { border-left:2px solid #ccc; } </style> <div class="navTest"> <ul class="navList clearfix"> <li>NAVI01</li> <li>NAVI02</li> <li>NAVI03</li> <li>NAVI04</li> <li>NAVI05</li> </ul> </div>
これだと現在の当ブログでは(←レスポンシブに改修中)縮んだ時がわからないので、navTestのwidthを80%に変えてみます。
わかりにくいですが、borderを含むwidthなのでカラム落ちをしません。
borderは%指定ができないので今までは一定のwidthまで縮むとwidthのバランスが崩れてカラム落ちしていましたが
これでレスポンシブやスマホに対応できますね!
また、その辺よくわからない方が編集をするような場合(wordpressなど)も崩れ防止の一つとして役立ちます。
では、2カラムのボックスモデルも作ってみましょう!
<style> .testBlock { width: 700px; margin:0 auto; border:2px solid #ccc; } .testBlock .header { width: 100%; height:30px; background:#FFD1D1; border-bottom:2px solid #ccc; } .testBlock .contents { width: auto; background:#fff; } .testBlock .contents .main { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; float:left; width: 580px; height:400px; background:#99E4FF; } .testBlock .contents .side { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; float:right; width:110px; height:400px; background:#C1FFE7; } .testBlock .footer { width:100%; height:30px; background:#EDCEFC; border-top:2px solid #ccc; } </style> <div class="testBlock"> <div class="header"></div> <div class="contents clearfix"> <div class="main"></div> <div class="side"></div> </div> <div class="footer"></div> </div>
では、今回はborderをがっつり入れてみましょう!
もちろんこのままwidthを変えずにいきます!
こんなかんじでwidthを再計算しなくても、収まってくれます!
気をつけないといけないことは、中の領域が狭まっているということ!
下手に一個一個box-sizingを指定するより、*などで全体に適応させたほうが良いかもしれませんね!
すべてのプロパティに言えることですが、使い所に気をつけて
楽にコーディングしていきましょう!(・ω<)ノシ