WebMatrix 2 でレスポンシブな CSS グリッドを作ってみる

執筆日時：

f:id:daruyanagi:20120914073223p:plain

WebMatrix 2 は iPhone での見栄えも簡単にチェックできてなかなかいい。

CSS グリッド

最近、Twitter Bootstrap は大げさすぎるなぁ、もうちょっと軽量のグリッドシステムないかな、と思っていたのだけど、こういうのを見つけた。

いい感じかもしれない。

.container { width: 940px; margin: 0 auto;}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
float: left;
display: inline;
margin-left: 20px;
}
.grid1 {width: 60px;}
.grid2 {width: 140px;}
.grid3 {width: 220px;}
.grid4 {width: 300px;}
.grid5 {width: 380px;}
.grid6 {width: 460px;}
.grid7 {width: 540px;}
.grid8 {width: 620px;}
.grid9 {width: 700px;}
.grid10 {width: 780px;}
.grid11 {width: 860px;}
.first {margin-left: 0;clear: left;}

/* clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/* IE6 */
* html .clearfix { zoom: 1;}
/* IE7 */
*:first-child+html .clearfix {zoom: 1;}

で、grid* で幅を指定して、先頭になるグリッドに .first をつければいいみたい。ネストもできるよ。あったまいい！

More responsible！

でも、それだと一つ問題がある。レスポンシブじゃない。今回はブラウザー幅に応じて並び替えもやってほしいと思っていたのだけれど、このやり方だと先頭になるグリッドを決めなきゃいけない。でも、ブラウザー幅に応じて並び替えが前提だと、事前にどのグリッドが先頭であるかを指定することができない。

f:id:daruyanagi:20120914072338p:plain

640px ぐらいの幅を……

f:id:daruyanagi:20120914072341p:plain

ちょっと大きく……

f:id:daruyanagi:20120914072345p:plain

もっと大きく！

というわけで、少しだけ手直しをした（ダミーイメージには DummyImage 1.0.0 - だるろぐ を使っています（ステマ））。

.container {
overflow: auto;
margin: 0 auto 2em auto;

* {
max-width: 100%;  // <– 画像とかがはみ出ないように
}
}


.grid1, .grid2, .grid3, .grid4, .grid5, .grid6,
.grid7, .grid8, .grid9, .grid10, .grid11, .grid12 {
float: left;
display: inline;
margin-left: 20px;
position: relative; // <– 追加
left: -20px;        // <– 追加
}
.grid1  { width: 60px;  }
.grid2  { width: 140px; }
.grid3  { width: 220px; }
.grid4  { width: 300px; }
.grid5  { width: 380px; }
.grid6  { width: 460px; }
.grid7  { width: 540px; }
.grid8  { width: 620px; }
.grid9  { width: 700px; }
.grid10 { width: 780px; }
.grid11 { width: 860px; }
.grid12 { width: 940px; } // <– 追加


/.first {margin-left: 0;clear: left;}/


.claerfix {
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/* IE6 */
* html & {
zoom: 1;
}
/* IE7 */
*:first-child + html & {
zoom: 1;
}
}

全体に左マージンをつけて、その分左にずらす。これで first は要らなくなった（というか使えなくなった）。 clearfix も LESS で書いておけば意味的にまとめられていい感じ。

@media (min-width: 981px) {
.container {
width: 960px;
}
}

@media (max-width: 980px) {
.container {
width: 640px;
}
}

@media (max-width: 640px) {
.container {
width: 300px;
}
}

ここら辺は適当だけど、あとは MediaQuery でコンテナの幅を変えてやると、さっきみたいなレスポンシブなデザインになる。

WebMatrix 2 の LESS とモバイルテスト機能があれば、こういう CSS の作成も結構楽になる！　Razor や Node.js がわかんない人でも、WebMatrix は便利やな（ステマ）。あとはこういうのをどんどん NuGet にしてもらえれば……Web 開発はバラ色や！