レイアウト作りを簡単にしてくれるCSSグリッドシステム

Posted under - Web Design

24

CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね!

CSS Grid System
Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。

1. CSSグリッドシステムとは?

CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にしたいとか、ここは3等分にしたいとかが簡単にできる仕組みになっています。横幅を 12等分にして、グリッドを分けてレイアウトしていくので、7:5 の2カラムとか、6:3:3 などの 3カラムとかも簡単です。

2. 940pxグリッドシステム

言葉で説明するより、見てもらった方が早いかも。横幅を 940px に設定して、60px のカラムを 12個並べます。カラムとカラムの間は 20pxです。

12カラム

1カラム
60px
1カラム
60px
1カラム
60px
1カラム
60px
1カラム
60px
1カラム
60px
1カラム
60px
1カラム
60px
1カラム
60px
1カラム
60px
1カラム
60px
1カラム
60px

解像度が 960px のディスプレイでは、左右マージンが 10px ずつになるので、940px がちょうどいいサイズとされてますね。これを使って、2カラムのブログレイアウトを作ってみましょう。

2カラムレイアウト

HEADER
940px
8カラム
class=”grid8″
8:4
620px
4カラム
class=”grid4″
8:4
300px
FOOTER
940px
HTML
<div class="container clearfix">
  <div class="grid first">ヘッダー</div>
  <div class="grid8 first">メインコンテンツ</div>
  <div class="grid4">サイドバー</div>
  <div class="grid first">フッター</div>
</div>

2カラムだと全然ありがたみがありませんが、3カラムだとこんな感じです。

3カラムレイアウト

HEADER
940px
6カラム
class=”grid6″
6:3:3
460px
3カラム
class=”grid3″
6:3:3
220px
3カラム
class=”grid3″
6:3:3
220px
FOOTER
940px
HTML
<div class="container clearfix">
  <div class="grid first">ヘッダー</div>
  <div class="grid6 first">メインコンテンツ</div>
  <div class="grid3">サイドバー1</div>
  <div class="grid3">サイドバー2</div>
  <div class="grid first">フッター</div>
</div>

ラッパーもなく、シンプルなマークアップです。でも本領を発揮するのはこんな感じの時です。

グリッドシステム

6カラム
class=”grid6″
6:6
460px
6カラム
class=”grid6″
6:6
460px
4カラム
class=”grid4″
4:4:4
300px
4カラム
class=”grid4″
4:4:4
300px
4カラム
class=”grid4″
4:4:4
300px
3カラム
class=”grid3″
3:3:3:3
220px
3カラム
class=”grid3″
3:3:3:3
220px
3カラム
class=”grid3″
3:3:3:3
220px
3カラム
class=”grid3″
3:3:3:3
220px

ページごとにレイアウトを変更するのはもちろん、同じページの中でも、2カラムで均等割、3カラム、4カラムで均等割などが、とっても簡単にできちゃいます。こっちは float: left でラッパーで囲んで … なんて面倒なこともなく、簡単な CSS でOKです。マークアップもとってもシンプルですね!

HTML
<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>

カラムの中に、カラムを内包することもできちゃいます。

グリッドシステム

3カラム
class=”grid3″
3:9
220px
3カラム
class=”grid3″
3:3:3
220px
3カラム
class=”grid3″
3:3:3
220px
3カラム
class=”grid3″
3:3:3
220px
5カラム
class=”grid5″
5:4
380px
4カラム
class=”grid4″
5:4
300px
HTML
<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>

グリッドシステムを使うと、こんなに簡単にレイアウトを組めちゃいます。3カラム分なら、grid3、8カラム分なら grid8 というクラスをつけます。カラムの数が、足して 12 になるようにするだけで、色んなレイアウトが自由自在ですね!それでは CSS を見てみましょう。

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 で、ちょうど割り切れる数字なんですねー。

940 GRID SAMPLE

3. 978pxグリッドシステム

Web Designer Wall では、960px はもう古い、これからは 978px だー的なグリッドシステムが紹介されています。

940pxだとちょっと狭い … みたいな。978px で 12 カラムを均等割にすると、1カラムが 54px、カラム間のマージンが 30px になります。

12カラム

1カラム
54px
1カラム
54px
1カラム
54px
1カラム
54px
1カラム
54px
1カラム
54px
1カラム
54px
1カラム
54px
1カラム
54px
1カラム
54px
1カラム
54px
1カラム
54px
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;} 

使い方は、さっきの 940 グリッドと同じです。

978 Grid Sample


全てのデザインに使える訳ではありませんが、重宝すること間違いなしの CSS グリッドシステム。未体験の方はぜひ活用してみてください!

また、人気のグリッドシステムのフレームワーク – 960 Grid System の使い方を書いた記事もあるので、ぜひご覧になってくださいね!

Comments

Thank you for the comment.