Zurb Foundation 6で、Grid（レスポンシブ対応段組機能）を理解し実用する（基本編）

# 前置き
Foundationに限らず、CSSフレームワークにはGrid（段組）機能が存在します。縦に流れていくソースコードを、見た目上横向きに表現したい。これはWebデザイン史上、常にデザイナーが求めてきたことであり、テーブルコーディングからCSSのfloatを用いるテクニックに切り替わり、さらにそれを汎用的に扱えるようにしたい、そういう世界中のWebデザイナーたちが求めた願望が、CSSフレームワークの段組システムだと考えています（960Gridとかね）

## CSSについて

この記事は、FoundationのCSSバージョンをお使いの方にも通用する内容で書いています（Sass(SCSS)は出てきません）。FoundationのSass版とCSS版の違いについては、[こちらの記事](http://qiita.com/kohki-shikata/items/bd6cfda580a54159232e)をご参照ください。

# 基本的なこと

さて、BootstrapやPureなど他のCSSフレームワークにもレスポンシブを前提とした段組機能はありますが、Foundationにも、当然存在します。この手のフレームワークに手を出す理由としては「効率よくレスポンシブデザインを表現したい」ということが前提になるかと思うのですが、Foundationに手を出すときも、まずお世話になるのがこのGrid機能でしょう。

なお、FoundationにおけるGrid機能は、一部を除き、Foundation 4、5、6と共通となっています。ここに記載されている内容も、一部を除き旧バージョンで通用しますので、参考になさってください。

## 記法

まず、よくある段組のマークアップを記載します。

設定としては、

* 右サイドバー
* PC、タブレットの時は、メインとサイドバーが横方向に同時表示
* スマホの時だけ、サイドバーがカラム落ちする（メインコンテンツの下にサイドバーの内容がくる）

という、よくあるパターンにします。

```html:hoge.html
<div class="row">
  <div class="columns small-12 medium-8 large-8">
    <h2>メインコンテンツだぞ</h2>
    <p>ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　</p>
    <p>ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　</p>
    <p>ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　</p>
    <p>ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　</p>
    <p>ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　ここにメインのコンテンツが入る予定　　</p>
  </div>
  <div class="columns small-12 medium-4 large-4">
    <h2>サイドバーだぞ</h2>
    <div class="desc">
      <p>ここにサイドバーのコンテンツが入ります　　ここにサイドバーのコンテンツが入ります　　ここにサイドバーのコンテンツが入ります　　ここにサイドバーのコンテンツが入ります　　ここにサイドバーのコンテンツが入ります　　ここにサイドバーのコンテンツが入ります　　</p>
    </div>
  </div>
</div>
```

結果はこんな感じ。

### PCを想定
![スクリーンショット 2016-08-27 14.16.26.png](https://qiita-image-store.s3.amazonaws.com/0/116223/5dcd47e1-258f-2c6a-d882-2cb44484dbf6.png)

### タブレットを想定
![スクリーンショット 2016-08-27 14.17.02.png](https://qiita-image-store.s3.amazonaws.com/0/116223/ae40d37c-005d-b9ed-513b-388eee9250f5.png)

### スマホを想定
![スクリーンショット 2016-08-27 14.17.13.png](https://qiita-image-store.s3.amazonaws.com/0/116223/dcfa49ba-ddaa-1ef5-a617-5f51ba07ba42.png)

スマホ時に見出しが小さくなっているのは、Foundationの初期設定に由来します。Gridの話とはまた別なので、これについてはまた別の機会に。

### 前提として理解しておきたいこと

1. `.row > columns*n`（必要な数）という構造を作る
1. 初期設定では、`.row`の横幅は1200px
1. カラムの幅は、`.row`の幅の12分のn個
1. PCの時の幅は、`.columns`に`.large-n`を追加
1. タブレットの時の幅は、`.columns`に`.medium-n`を追加
1. スマホの時の幅は、`.columns`に`.small-n`を追加

3がわかりにくいかもしれませんが、今回のケースでは、PCとタブレットの時はメインコンテンツとサイドバーの比率が、8:4の幅で表示されるようにしています。つまり、**`.row`の中にある`large-n`と`large-n`、`medium`-nと`medium-n`の総和が12**になれば、Gridシステムとして成立する仕組みになってます。

![スクリーンショット_2016-08-27_14_16_26.png](https://qiita-image-store.s3.amazonaws.com/0/116223/7956ff2e-d65a-e5f5-1a80-f6e2a9dc501f.png)

一方、スマホの場合は`.small-12`となっていますが、これは12を指定すれば、`.row`に対して100%の幅を取るという意味になります。

## 左右サイドバーなパターン

ここで、上記の理解をさらに深めるため、もう少し複雑なパターンを見てみましょう。

* 左右にサイドバーがある
* スマホの時はすべて１カラム、PC、タブレットのときに左右サイドバーが出る

という前提です。

```html:hoge.html
<div class="row">
  <div class="columns small-12 medium-3 large-3">
    <h2>左サイドバー</h2>
    <div class="desc">
      <p>左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　</p>
    </div>
  </div>
  <div class="columns small-12 medium-6 large-6">
    <h2>メインコンテンツです</h2>
    <div class="desc"></div>
    <p>メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　メインのコンテンツです　　</p>
  </div>
  <div class="columns small-12 medium-3 large-3">
    <h2>右サイドバー</h2>
    <div class="desc">
      <p>左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　左サイドのコンテンツです　　</p>
    </div>
  </div>
</div>
```

### PCを想定
![スクリーンショット 2016-08-27 14.40.43.png](https://qiita-image-store.s3.amazonaws.com/0/116223/3c641115-8456-9999-50b3-2b3997fe0cda.png)

### タブレットを想定
![スクリーンショット 2016-08-27 14.40.48.png](https://qiita-image-store.s3.amazonaws.com/0/116223/9494696a-6b69-d6c7-88a7-22058b7f21f1.png)

### スマホを想定
![スクリーンショット 2016-08-27 14.40.51.png](https://qiita-image-store.s3.amazonaws.com/0/116223/6a271f12-ba3d-7e64-8bb9-406296442e8a.png)

### 解説

今回は、左カラム、メイン、右カラムの比率を、3:6:3で作っています。従って、前提条件を満たすため、`.columns.small-12.medium-3.large-3+.columns.small-12.medium-6.large-6+.columns.small-12.medium-3.large-3`という並びになっています。

![スクリーンショット_2016-08-27_14_40_43.png](https://qiita-image-store.s3.amazonaws.com/0/116223/645237bc-b7d4-eade-5d6d-ab0f330a0b62.png)

# まとめ

* `.row > .columns*n` という構造を守る
* PCの時の幅は`.columns.large-n`
* タブレットの時の幅は`.columns.medium-n`
* スマホの時の幅は`.columns.small-n`
* カラムの比率は、nの総和が12になるようにする

これを守っていれば、ひとまずGridを自由に扱えるようになると思います。