レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSSでのレイアウトつくり、段組みつくりがとっても簡単にできるCSSグリッドシステムをご紹介。
既に使っている人もたくさんいるとは思いますが、未体験の人はぜひお試しください :)
Webデザインに欠かせないCSSでのレイアウト作り。
コンテナ作って、ここにラッパー作って、メインが600pxでpaddingが20pxだから、サイドバーが、えーと…なんてことになりがちです。
そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。
全てのWebデザインに使える訳ではありませんが、結構重宝します。
すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。
CSSグリッドシステムとは？
CSSグリッドシステム（CSSグリッドレイアウト）というのは、レイアウトを均等に分けてマス目上に考えるレイアウト。
何が便利かっていうと、この段は4等分にしたいとか、ここは3等分にしたいとかが簡単にできる仕組みになっています。
横幅を12等分にして、グリッドを分けてレイアウトしていくので 7:5 の2カラムとか、6:3:3などの3カラムとかも簡単です。
940pxグリッドシステム
言葉で説明するより見てもらった方が早いかも。
横幅を940pxに設定（左右マージン10pxずつで960px）して60pxのカラムを12個並べます。
カラムとカラムの間は20pxです。
960pxディスプレイでは左右マージンが10pxずつになるので940pxがちょうどいいサイズとされてますね。
これを使って2カラムのブログレイアウトを作ってみましょう。
XHTML
<div class="container clearfix"> <div>ヘッダー</div> <div class="grid8 first">メインコンテンツ</div> <div class="grid4">サイドバー</div> <div>フッター</div> </div>
2カラムだと全然ありがたみがありませんが、3カラムだとこんな感じ。
XHTML
<div class="container clearfix"> <div>ヘッダー</div> <div class="grid6 first">メインコンテンツ</div> <div class="grid3">サイドバー1</div> <div class="grid3">サイドバー2</div> <div>フッター</div> </div>
ラッパーもなくシンプルなマークアップです。
でも本領を発揮するのはこんな感じの時です。
ページごとにレイアウトを変更するのはもちろん、同じページの中でも2カラムで均等割、3カラム、4カラムで均等割などがとっても簡単にできちゃいます。
こっちは float:left でラッパーで囲んで…なんて面倒なこともなく、簡単なCSSで大丈夫。
マークアップもとってもシンプルです。
XHTML
<div class="container clearfix"> <div class="grid6 first">2等分</div> <div class="grid6">2等分</div> <div class="grid4 first">3等分</div> <div class="grid4">3等分</div> <div class="grid4">3等分</div> <div class="grid3 first">4等分</div> <div class="grid3">4等分</div> <div class="grid3">4等分</div> <div class="grid3">4等分</div> </div>
内包することもできちゃいます。
XHTML
<div class="container clearfix">
<div class="grid3 first">3カラム</div>
<div class="grid9">
<div class="grid3 first">3カラム</div>
<div class="grid3">3カラム</div>
<div class="grid3">3カラム</div>
<div class="grid5 first">5カラム</div>
<div class="grid4">4カラム</div>
</div>
</div>
グリッドシステムを使うとこんなに簡単にレイアウトを組めちゃいます。
クラス grid3 なら3カラム分、クラス grid8なら8カラム分といった感じなので、足して12になる横幅で色んなレイアウトが自由自在です！
CSS
.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;}
たったコレだけです。
コンテナにclearfix、一番左にくるカラムにはクラスfirstを付けるだけ。
あとは横幅の合計が12になるようにするだけ…簡単すぎます :)
940pxという数字は12カラムとマージン20pxで、ちょうど割り切れる数字なんですね。
978pxグリッドシステム
Web Designer Wall では960pxはもう古い、これからは978pxだー的なグリッドシステムが紹介されています。
The Simpler CSS Grid
960pxだと左右マージンに10pxずつ使っているのでコンテンツエリアは940pxになります。
それではちょっと狭いと…
978pxで12カラムを均等割にすると1カラムが54px、マージンが30pxになります。
CSS
.container {width: 978px;margin: 0 auto;}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
float: left;
display: inline;
margin-left: 30px;
}
.grid1 {width: 54px;}
.grid2 {width: 138px;}
.grid3 {width: 222px;}
.grid4 {width: 306px;}
.grid5 {width: 390px;}
.grid6 {width: 474px;}
.grid7 {width: 558px;}
.grid8 {width: 642px;}
.grid9 {width: 726px;}
.grid10 {width: 810px;}
.grid11 {width: 894px;}
.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;}
使い方は同じです。
全てのデザインに使える訳ではありませんが、重宝すること間違いなしのCSSグリッドシステム。
未体験の方はぜひ活用してみてください。
とっても楽ができますよ :)