Zurb Foundation 6のGrid（レスポンシブ対応段組機能）について、小ネタとTips編

[前回の記事](http://qiita.com/kohki-shikata/items/db34b811f2e1ab25fcbb)では、Gridの基本について解説しました。

こちらの記事では、小ネタとTipsということで、ちょっと高度なことと裏話的なことを紹介します。

#【小ネタ】`.columns`と`.column`は同じスタイリング？？

Foundationの段組を使ったマークアップで要素を検証してみると、下記のようになっています。

![Developer_Tools_-_http___s_codepen_io_kohki-shikata_debug_yJmarG_と_CodePen_-_A_Pen_by_Kohki_SHIKATA.png](https://qiita-image-store.s3.amazonaws.com/0/116223/fc719a61-5fa5-3cd8-118f-791724089e29.png)

これはなぜかというと、`.row`の中には、必ずしも`.columns`が複数入るわけではない、ということに由来しています。例えば、`.row`の幅に対し、100%の幅を取りたいケースもあるからで、その時は`.columns`が１個だけになってしまいます。

そうすると、**`.row`の中に`.columns`が１個だけなのに複数形はオカシイ！！**となりますので、単数形のクラス名も用意されています。こういう細かいところが僕がFoundationの好きな理由だったりもします。

#【Tips】 `.small-12`、`.medium-12`、`.large-12`は要らない

[前回の記事](http://qiita.com/kohki-shikata/items/bd6cfda580a54159232e)で`.row`に対して100%の幅を取る時は、`-12`とする、というように書きましたが、実はこれは必要ありません。

Foundation のナレッジを見ると、便宜上`.small-12`などと書かれている場合がありますが、これは実際のところ`.column,.columns`にて`width: 100%;`が指定されているので、無くても成立します。

```html:hoge.html
<div class="row">
  <div class="columns">
    <h2>見出しやで</h2>
    <p>コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　</p>
  </div>
  <div class="columns">
    <h2>見出しやで</h2>
    <p>コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　</p>
  </div>
  <div class="columns">
    <h2>見出しやで</h2>
    <p>コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　</p>
  </div>
</div>
```

例えば、こう書くと、1200px（パディングを除くと1170px）の幅のワンカラムが縦に３つ並びます。（こういうデザインに対し、Gridを用いるべきなのかどうなのかはさておき…）

#【Tips】 `-n`というクラスは、それよりも狭い画面幅で指定された幅を引き継ぐ

↑の見出しはよくわからない日本語に思えるかもしれませんが、他に良い表現が見つかりませんでした…💦

先に実例を見せておきます。

## 前提条件
[前回の記事](http://qiita.com/kohki-shikata/items/bd6cfda580a54159232e)で紹介した、左サイドバー＋メインのコンテンツ＋右サイドバーの事例を振り返ると、

```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>
```

ですが、もっとシンプルに書こうと思うと

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

と書く事ができます。

## 理屈

![新規投稿_-_Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/116223/94d86bda-3d41-b5ab-961a-12f091680295.png)

理由と仕組みとしては上記の通り。`.small-12`は、全幅にしたいので必要なし。タブレットとPCでは同じ比率でカラム分けするので、`.medium-n`でふった数値は、`.large-n`にも引き継がれます。

スマホは1カラムにして、タブレット以上の画面幅ではタブレットとPCで共通の比率にしたいというケースが私の場合は比較的多いので、`<div class="columns medium-n">`というマークアップは比較的よく使います。

#【小ネタ】 Foundationは、モバイルファーストで設計されているので、クラスもsmall→medium→largeとふるのが都合良い

前段落の"`-n`というクラスは、それよりも狭い画面幅で指定された幅を引き継ぐ"とも関連しますが、モバイルを前提にマークアップし、それよりも幅が広い時にどうなるか、という考えのもと設計されているようです。従って、見出しのとおり、smallから順番にふっていくと良いでしょう。（引き継ぎがあるので）

一方、アダプティブデザインから発想してlargeからふるのも間違いではありません。PCのカンプしかない場合は取り敢えず

```html:hoge.html
<div class="row">
  <div class="columns large-3">
    <h2>サイドバーやで</h2>
    <p>コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　</p>
  </div>
  <div class="columns large-9">
    <h2>メインーやで</h2>
    <p>コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　</p>
  </div>
</div>
```

と書けば、PCでは左サイドバーの２カラムとなります。しかし、タブレット・スマホでは１カラムです。しかし、**「スマホで１カラムになるのは良しとして、タブレットでは、もう少しサイドバーの比率を横に広げてあげたいな」**という発想に至った場合は、

```html:hoge.html
<div class="row">
  <div class="columns large-3 medium-4">
    <h2>サイドバーやで</h2>
    <p>コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　</p>
  </div>
  <div class="columns large-9 medium-8">
    <h2>メインーやで</h2>
    <p>コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　コンテンツやで　</p>
  </div>
</div>
```

と書くのも、間違いではありません。個人的に好きな方を選べばいいと思います。

ただ、やはり引き継ぎの機能が便利なので、私自身は、smallからクラスをふるようにしています。