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

前回の記事では、Gridの基本について解説しました。

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

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

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

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

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

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

前回の記事で.rowに対して100%の幅を取る時は、-12とする、というように書きましたが、実はこれは必要ありません。

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

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というクラスは、それよりも狭い画面幅で指定された幅を引き継ぐ

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

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

前提条件

前回の記事で紹介した、左サイドバー＋メインのコンテンツ＋右サイドバーの事例を振り返ると、

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>

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

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>

と書く事ができます。

理屈

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

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

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

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

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

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

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からクラスをふるようにしています。