Zurb Foundation 6のGrid（レスポンシブ対応段組機能）を使って、サイト背景に色がついてるアイテムリストを作りたい

[前回の記事](http://qiita.com/kohki-shikata/items/8fc97635e44c4cbbe683)を踏まえて、さらにステップアップかつ実践的な内容にトライしてみます。

# 前提条件

## まずはこちらをお読みください
* [Zurb Foundation 導入前の予備知識](http://qiita.com/kohki-shikata/items/bd6cfda580a54159232e)
* [Zurb Foundation 6で、Grid（レスポンシブ対応段組機能）を理解し実用する（基本編）](http://qiita.com/kohki-shikata/items/db34b811f2e1ab25fcbb)
* [Zurb Foundation 6のGrid（レスポンシブ対応段組機能）について、小ネタとTips編](http://qiita.com/kohki-shikata/items/1edfb347d72dae0ae852)
* [Zurb Foundation 6で、Grid（レスポンシブ対応段組機能）を使って、アイテムリストを作る（Block Grid）](http://qiita.com/kohki-shikata/items/8fc97635e44c4cbbe683)

## XDでこんなカンプを作ってみました。

PCの時

![Web 1920 – 1.png](https://qiita-image-store.s3.amazonaws.com/0/116223/a89540ab-26ea-056a-bb33-b7406bbb24d1.png)

タブレットの時

![Web 1920 – 2.png](https://qiita-image-store.s3.amazonaws.com/0/116223/ff7aafa5-36d7-e686-bd67-aa1d6bde0315.png)

スマホの時

![Web 1920 – 3.png](https://qiita-image-store.s3.amazonaws.com/0/116223/6998ece7-2a4b-c47a-4fdb-0e2e11f62ac4.png)

# 実践
```html:hoge.html
<h1><img src="http://placehold.jp/CFF2FA/777777/1170x200.png?text=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E7%94%BB%E5%83%8F" alt="タイトル画像"/></h1>
<div id="main">
  <div class="row medium-up-2 large-up-3">
    <div class="columns">
      <div class="inner">
        <h2>見出し</h2>
        <div class="desc">
          <p>ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　</p>
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="inner">
        <h2>見出し</h2>
        <div class="desc">
          <p>ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　</p>
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="inner">
        <h2>見出し</h2>
        <div class="desc">
          <p>ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　</p>
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="inner">
        <h2>見出し</h2>
        <div class="desc">
          <p>ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　</p>
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="inner">
        <h2>見出し</h2>
        <div class="desc">
          <p>ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　</p>
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="inner">
        <h2>見出し</h2>
        <div class="desc">
          <p>ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　ディスクリプション　　</p>
        </div>
      </div>
    </div>
  </div>
</div>
```
```css:app.css
h1 {
  text-align: center;
  margin-bottom: 70px;
}

#main {
  background-color: #EAF7DA;
  padding-top: 48px;
  padding-bottom: 48px;
}

.inner {
  background-color: #fff;
  padding: 15px;
}

.columns {
  margin-bottom: 30px;
}

#main .row {
  margin-bottom: -30px;
}

h2 {
  font-size: 20px;
  text-align: center;
}

.desc p {
  font-size: 14px;
  margin-bottom: 0;
}
```

## 結果

PCの時

![スクリーンショット 2016-08-27 18.09.02.png](https://qiita-image-store.s3.amazonaws.com/0/116223/f6faae59-eaf7-304e-4b68-543ff8391bdf.png)

タブレットの時

![スクリーンショット 2016-08-27 18.09.06.png](https://qiita-image-store.s3.amazonaws.com/0/116223/66b516b6-34d7-2c78-2bfc-a5eef3961b21.png)

スマホの時

![スクリーンショット 2016-08-27 18.09.09.png](https://qiita-image-store.s3.amazonaws.com/0/116223/4004f027-2e8b-ada1-0243-80d06f73419a.png)

# このマークアップ＆スタイリングのポイント

## サイト幅いっぱいに色をつける時は、`.row`の一つ上に要素を作る

`.row`は、あくまでウインドウ幅に対し、1200pxの幅を中心に取ります（large/PCの時）。従って、その外側の領域に何かしたい場合は、その一つ上の要素に対して指定をします。

Foundationでは、Gridを用いない素のマークアップは、常に親要素に対し100%を取るので、これを使って色をつけたい領域を指定します。

色だけでなく、背景画像などでも同じですね。

## アイテムリストが縦に並ぶ場合、`.columns`に下マージンをつける

```css:app.css
.columns {
  margin-bottom: 30px;
}
```

`.columns`には、左右15px相当分のpaddingが指定されています。これがカラム間の隙間（ガター）になっています。一方、.columnsの縦方向にはpaddingもmarginも設定されていません。

そこで、カラム間のガター15px+15pxに相当する、30px分を`margin-bottom: 30px;`として指定しています。marginで指定するのは、もちろん`#main`で指定した地色が見えてほしいからです。

しかし、今回は3カラム２行の6項目ですが、後半の3カラム分にも`margin-bottom: 30px;`が適用されるため、上辺に対して余分に30px高さがついてしまいます。

そこで、

```css:app.css
#main .row {
  margin-bottom: -30px;
}
```

`.row`に対し、margin-bottomのネガティブマージンを設定して相殺しています。
![A_Pen_by_Kohki_SHIKATA_2.png](https://qiita-image-store.s3.amazonaws.com/0/116223/0d611775-fd50-ae25-ce83-56576e209d1a.png)


## 色をつける内側の隙間は、`padding-top:`と`padding-bottom:`で指定
```css:app.css
#main {
  background-color: #EAF7DA;
  padding-top: 48px;
  padding-bottom: 48px;
}
```
これも地色が見えて欲しいからです。

![A_Pen_by_Kohki_SHIKATA.png](https://qiita-image-store.s3.amazonaws.com/0/116223/eb59e592-567a-a117-644c-39d2773db10a.png)

# まとめ

Gridを理解してくると、スマホ、タブレット、PCの時それぞれの段落・レイアウト・カラム落ちさえ決まっていれば、おのずとスラスラっとマークアップできるようになってきます。

ただし、枠線や背景色など、求められるスタイルによっては、Foundation公式ドキュメントに書いてあるソースだけでは実現できません。きちんとHTMLとCSSを理解していることが前提です。その上で、適切に手の入ったマークアップを心がける必要があります。