レスポンシブデザインで役立つグリッドレイアウト

グリッドレイアウトのサンプルイメージ

複雑なレイアウトってどうしてます?画面領域に合わせてレイアウトが変化するレスポンシブデザインを採用するときなんかは、特に困りますよね。そんな時に活用できるグリッドレイアウトの方法を紹介します。

グリッドレイアウトの概要

まず、グリッドレイアウトを内包する親要素の横幅を60pxの倍数にします。60という数字は2・3・4・5・6で割り切れるので、複雑なレイアウトを採用するウェブサイトは60pxを基準に設計すると何かと便利です。

次に、親要素の横幅を12分割します。なぜに12分割なのかと言えば、きれいに2等分(6+6)・3等分(4+4+4)・4等分(3+3+3+3) ができるからです。

例えば、親要素の横幅が960pxの場合に12分割すると、1個分の横幅は80pxになります。一行の合計が12個分になるよう設定すれば、きれいにボックスが並びます。2等分なら 480(6) + 480(6)、3等分なら 320(4) + 320(4) + 320(4)、4等分なら 240(3) + 240(3) + 240(3) + 240(3) です。

  • 1 = 80px
  • 2 = 160px
  • 3 = 240px
  • 4 = 320px
  • 5 = 400px
  • 6 = 480px
  • 7 = 560px
  • 8 = 640px
  • 9 = 720px
  • 10 = 800px
  • 11 = 880px
  • 12 = 960px

内容量に合わせて比率を変えれば、160(2) + 320(4) + 480(6) のように等分ではないレイアウトも簡単です。

横幅の指定をパーセントにすると汎用的に利用できます。ただし、要素間に左右の余白をとりたい場合は、レイアウトボックス内の子要素にmarginプロパティ等を指定する必要があります(CSS3のbox-sizingプロパティが普通に使えればいいんですけどね)。

  • 1 = 8.33%
  • 2 = 16.66%
  • 3 = 24.99%
  • 4 = 33.33%
  • 5 = 41.66%
  • 6 = 49.99%
  • 7 = 58.33%
  • 8 = 66.66%
  • 9 = 74.99%
  • 10 = 83.33%
  • 11 = 91.66%
  • 12 = 100%

親要素の横幅が画面領域に追従するような場合、小数点以下の扱いが微妙な古いブラウザでは、カラム落ちする可能性があります。なので、画面領域に応じて横幅を決めておくといいでしょう。

横幅をbody要素に指定しているときの Media Queries の一例
/* 1200px以上 */
@media only screen and (min-width: 1200px) {
  body {
    width: 1200px;
  }
}
/* 960px以上 1199px以下 */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
  body {
    width: 960px;
  }
}
/* 720px以上 959px以下 */
@media only screen and (min-width: 720px) and (max-width: 959px) {
  body {
    width: 720px;
  }
}
/* 719px以下 */
@media only screen and (max-width: 719px) {
  body {
    width: 480px;
  }
}

グリッドレイアウトのHTMLとCSS

汎用的に使えるよう、.boxes というグリッドレイアウトの範囲を示す要素用の class と、実際にレイアウトする要素用の .box01 から .box12 までの class を用意します。

以下のコードで冒頭のイメージのようなレイアウト結果になります。

HTML
<ul class="boxes">
  <li class="box01"><div>box01</div></li>
  <li class="box11"><div>box11</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box10"><div>box10</div></li>
  <li class="box03"><div>box03</div></li>
  <li class="box09"><div>box09</div></li>
  <li class="box04"><div>box04</div></li>
  <li class="box08"><div>box08</div></li>
  <li class="box05"><div>box05</div></li>
  <li class="box07"><div>box07</div></li>
  <li class="box06"><div>box06</div></li>
  <li class="box06"><div>box06</div></li>
  <li class="box04"><div>box04</div></li>
  <li class="box04"><div>box04</div></li>
  <li class="box04"><div>box04</div></li>
  <li class="box03"><div>box03</div></li>
  <li class="box03"><div>box03</div></li>
  <li class="box03"><div>box03</div></li>
  <li class="box03"><div>box03</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box02"><div>box02</div></li>
  <li class="box12"><div>box12</div></li>
</ul>
CSS
.boxes {
  overflow: hidden;
  list-style: none;
  letter-spacing: -0.5em;
  word-spacing: -0.5em;
  *letter-spacing: 0;
  *word-spacing: 0;
  *zoom: 1;
}
.boxes>* {
  letter-spacing: 0;
  word-spacing: 0;
}
.boxes>[class^=box] {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  *display: inline;
  *zoom: 1;
}
.boxes>.box01 {
  width: 8.33%;
}
.boxes>.box02 {
  width: 16.66%;
}
.boxes>.box03 {
  width: 24.99%;
}
.boxes>.box04 {
  width: 33.33%;
}
.boxes>.box05 {
  width: 41.66%;
}
.boxes>.box06 {
  width: 49.99%;
}
.boxes>.box07 {
  width: 58.33%;
}
.boxes>.box08 {
  width: 66.66%;
}
.boxes>.box09 {
  width: 74.99%;
}
.boxes>.box10 {
  width: 83.33%;
}
.boxes>.box11 {
  width: 91.66%;
}
.boxes>.box12 {
  width: 100%;
}

このコードではボックスを横に並べるのにfloatプロパティを使用せず、ボックスをinline-blockにすることで実現しています。HTML内での改行が半角スペースとなって現れるので、この半角スペースを排除するためにletter-spacingプロパティとword-spacingプロパティにマイナス値を指定しています。

floatプロパティを使わなければ、一行ごとにclearプロパティを適用する必要がなくなるので、自然な形で要素をグループ化することができます。

実際のサンプルを見る