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

前置き

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

CSSについて

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

基本的なこと

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

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

記法

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

設定としては、

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

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

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を想定

タブレットを想定

スマホを想定

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

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

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

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

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

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

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

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

という前提です。

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を想定

タブレットを想定

スマホを想定

解説

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

まとめ

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

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