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

前回の記事を踏まえて、さらにステップアップかつ実践的な内容にトライしてみます。

前提条件

まずはこちらをお読みください

• Zurb Foundation 導入前の予備知識
• Zurb Foundation 6で、Grid（レスポンシブ対応段組機能）を理解し実用する（基本編）
• Zurb Foundation 6のGrid（レスポンシブ対応段組機能）について、小ネタとTips編
• Zurb Foundation 6で、Grid（レスポンシブ対応段組機能）を使って、アイテムリストを作る（Block Grid）

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

PCの時

タブレットの時

スマホの時

実践

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>

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の時

タブレットの時

スマホの時

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

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

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

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

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

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

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高さがついてしまいます。

そこで、

app.css

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

.rowに対し、margin-bottomのネガティブマージンを設定して相殺しています。

色をつける内側の隙間は、padding-top:とpadding-bottom:で指定

app.css

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

これも地色が見えて欲しいからです。

まとめ

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

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