Foundation4の基本1

前回、Foundation4の導入方法をご紹介しましたので、今回は、Foundation4を使用する上での基本1として、グリッドについてご紹介したいと思います。

グリッド

Foundation4はデフォルトでは、Twitter Bootstrap同様、12カラムのグリッドシステムを採用しています。rowクラスの中にcolumsクラスを挿入するのが基本となります。ネストできるのもTwitter Bootstrapと同様です。

Foundation4は、レスポンシブデザインを基本として作られていますので、ブラウザの大きさを768pxを境に、largeとsmallに分けています。768pxより大きい場合は、large、それ以下の場合はsmallとしてグリッドを分けるようにしています。

Foundation4のドキュメントの例をわかりやすくするために、下記のようなファイルを作成してみました。※いつまでこのサンプルサイトを公開できるかは不明ですが、皆さんもブラウザのサイズを変更しながら、ご自身の目で確かめてください。その方が説明を見るよりも理解は早いと思います。

sample.html

<h4>例1</h4>
<div class="row">
 <div class="small-2 large-4 columns">small-2 large-4</div>
 <div class="small-4 large-4 columns">small-4 large-4</div>
 <div class="small-6 large-4 columns">small-6 large-4</div>
</div>
<hr>
<h4>例2</h4>
<div class="row">
 <div class="large-3 columns">large-3 columns</div>
 <div class="large-6 columns">large-6 columns</div>
 <div class="large-3 columns">large-3 columns</div>
</div>
<hr>
<h4>例3</h4>
<div class="row">
 <div class="small-6 large-2 columns">small-6 large-2 columns</div>
 <div class="small-6 large-8 columns">small-6 large-8 columns</div>
 <div class="small-12 large-2 columns">small-12 large-2 columns</div>
</div>
<hr>
<h4>例4</h4>
<div class="row">
 <div class="small-3 columns">small-3 columns</div>
 <div class="small-9 columns">small-9 columns</div>
</div>
<hr>
<h4>例5</h4>
<div class="row">
 <div class="large-4 columns">large-4 columns</div>
 <div class="large-8 columns">large-8 columns</div>
</div>
<hr>
<h4>例6</h4>
<div class="row">
 <div class="small-6 large-5 columns">small-6 large-5 columns</div>
 <div class="small-6 large-7 columns">small-6 large-7 columns</div>
</div>
<hr>
<h4>例7</h4>
<div class="row">
 <div class="large-6 columns">large-6 columns</div>
 <div class="large-6 columns">large-6 columns</div>
</div>

ブラウザの大きいサイズ(768px以上)の場合は下記のように表示されます。

foundation005

ブラウザの小さいサイズ(768px未満)の場合は下記のように表示されます。※正確に以下なのか未満なのかの検証はしていませんので間違っていたら悪しからずご容赦ください。(^0^) 尚、画像が縦長になってしまいましたので、例1~例3と例4~例7に分割して表示しています。

foundation006

foundation007

例1

まず、例1の場合を考えてみましょう。768px以上の場合は、smallクラスは、無視されています。large-4が3つ、つまり、1行が3等分されています。

それが、768px未満になると、largeクラスは、無視されて、smallクラスのsmall-2、small-4、small-6の指示通り、2:4:6に分割されています。面白いですね。既存のCSSフレームワークのほとんどがモバイルサイズの場合は1カラムが原則でしたので、モバイルサイズのレイアウトイメージが広がりますよね。

例2

例2の場合は、全てlargeクラスで、記述されています。この場合、768px以上は、指示通り3:6:3で表示しますが、指定されていない768px未満の場合は、従来のCSSフレームワークと同様、1カラムずつ3行で表示されています。※尚、768px以上とか768px未満とか、毎回記述するのは面倒なので、これ以降、768px以上のことをPCサイズ、768px未満のことをモバイルサイズと呼ぶことにします。

例3

例3の場合は、PCサイズの場合は、指示通り2:8:2の3カラムで1行を表示していますが、モバイルサイズの場合は、small-6ずつで、1行、small-12で1行というように2行に分けて表示しています。

これが、Foundation4のモバイルファーストという考え方の真骨頂でしょう。既存のCSSフレームワークのほとんどが、PCサイズを基準に考え、モバイルサイズに関しては、「とりあえず1カラムで表現しておけば問題ないでしょう。後は各自で調整してくださいね。」的な考えで作られていますが、Foundation4は、「最初からモバイルサイズの事も考えてレイアウトしてくださいね。」的な考えではないでしょうか。

例4

例4は、smallクラスだけで、指定されています。このようにsmallクラスだけで指定した場合は、largeクラスもそのままの比率で、つまり、smal-3対small-9(1:3の比率)で表示されます。

例5

例5は、例2と変わりませんので、省略します。

例6

例6も、例3とあまり変わりないと思いますが、一応説明します。PCサイズの時は、5:7の比率で2カラム、モバイルサイズの場合は6:6ですので、約分して、1:1の比率で2カラムを表示します。

例7

例7も、例2とほとんど変わりありませんので、省略します。

グリッドのネスト(入れ子)

ドキュメントのネストを調べるために、下記のようなファイルを作成しました。

sample2.html

<div class="row">
 <div class="small-8 columns">small-8
 <div class="row">
 <div class="small-8 columns">ネストsmall-8
 <div class="row">
 <div class="small-8 columns">孫ネストsmall-8</div>
 <div class="small-4 columns">孫ネストsmall-4</div>
 </div>
 </div>
 <div class="small-4 columns">ネストsmalll-4</div>
 </div>
 </div>
 <div class="small-4 columns">small-4</div>
 </div>

ブラウザで確認すると下記のようになっています。全てsmallクラスで記述されていますので、PCサイズもモバイルサイズも同様に表示されます。

foundation008

  • 上記の画像を見て頂ければ、わかると思いますが、rowクラスの中は、全て12分割になっています。
  • つまり、small-8カラムの中のネストも8:4になっていますし、孫ネストも8:4の合計12になっていますので、かなり細かなレイアウトができるのがわかると思います。
  • もちろん青色のsmall-4の中も12分割のネストを作成することができます。

グリッドのオフセット

ドキュメントのオフセットについて調べるために、下記のようなファイルを作成してみました。

sample3.html

<div class="row">
 <div class="large-1 columns">large-1</div>
 <div class="large-11 columns">large-11</div>
</div>
<div class="row">
 <div class="large-1 columns">large-1</div>
 <div class="large-10 large-offset-1 columns">large-10 large-offset-1</div>
</div>
<div class="row">
 <div class="large-1 columns">large-1</div>
 <div class="large-9 large-offset-2 columns">large-9 large-offset-2</div>
</div>
<div class="row">
 <div class="large-1 columns">large-1</div>
 <div class="large-8 large-offset-3 columns">large-8 large-offset-3</div>
</div>

ブラウザで下記のように表示されます。

foundation009

  • カラムとカラムの間に間隔を開けたいときは、offsetを使用します。つまり、offset-1の場合は、1/12の大きさの間隔が作成されます。offsetにもlarge、smallを付けます。
  • 言わなくてもおわかりだとは思いますが、上記は全てlargeクラスで記述されていますので、モバイルサイズの場合は、カラムの比率もoffsetも無視され、全て1カラムずつで表示されます。
    foundation010

 センターカラム

次に、ドキュメントのCentered Columsを調べるために下記のようなファイルを作成しました。

sample4.html

<div class="row">
 <div class="small-3 small-centered columns">small-3 small-centered</div>
</div>
<div class="row">
 <div class="small-6 large-centered columns">small-6 large-centered</div>
</div>
<div class="row">
 <div class="small-9 small-centered large-uncentered columns">small-9 small-centered large-uncentered</div>
</div>
<div class="row">
 <div class="small-11 small-centered columns">small-11 small-centered</div>
</div>
<div class="row">

ブラウザで表示してみます。まずは、PCサイズです。

foundation015

次にモバイルサイズです。

foundation016

  • small-centered
    Foundationのグリッド全般に言えることですが、モバイルファーストのFoundationはsmallが基本となります。smallで支持しておけば、largeは指定しなくてもsmallが適用されます。つまり、このsmall-centeredは、smallサイズもlargeサイズもセンタリングするということです。
  • large-centered
    large-centeredは、PCサイズにのみ指定されます。ですので、モバイルサイズの時は、センタリングされずに、左側に表示されます。
  • large-uncentered
    small-centeredの箇所でも述べましたが、small-centeredで指定すれば、PCサイズでもセンタリングされてしまいます。このlarge-uncenteredは、PCサイズでセンタリングされるのを強制的に解除するために使用します。

Source Ordering

なんと訳せばいいのか単語が思いつかないので、そのまま表記していますが、カラム位置の指定ができるSource Orderingについてご紹介します。例のごとくFoundationのドキュメントを元に下記のようなファイルを作成しました。

sample5.html

<div class="row">
 <div class="small-2 push-10 columns">small-2 push-10 ①</div>
 <div class="small-10 pull-2 columns">small-10 pull-2 ②</div>
</div>
<div class="row">
 <div class="small-3 push-9 columns">small-3 push-9 ①</div>
 <div class="small-9 pull-3 columns">small-9 pull-3 ②</div>
</div>
<div class="row">
 <div class="small-4 push-8 columns">small-4 push-8 ①</div>
 <div class="small-8 pull-4 columns">small-8 pull-4 ②</div>
</div>
<div class="row">
 <div class="small-5 push-7 columns">small-5 push-7 ①</div>
 <div class="small-7 pull-5 columns">small-7 pull-5 ②</div>
</div>
<div class="row">
 <div class="small-6 push-6 columns">small-6 push-6 ①</div>
 <div class="small-6 pull-6 columns">small-6 pull-6 ②</div>
</div>

ブラウザで確認してみます。largeサイズは下記のように表示されます。わかりやすいように、最初に記述されていた方を①、次に記述された方を②として表示してあります。まずは、PCサイズは下記のようになりました。

foundation013

次にモバイルサイズでは、下記のように表示されています。

foundation014

  • PCサイズの表示とモバイルサイズの表示が違うのが、いまいち理解できませんが、これがバグではないのなら、Foundattion4の仕様ということになるのでしょうか。つまり、pullとpushはsモバイルサイズには適用されないということになるのでしょう。
  • ですので、PCサイズ(768px以上のブラウザ)での説明をします。
  • pullは、左へ移動、pushは右へ移動と言う事です。pullまたは、pushの後に続く数字の数だけカラムを移動します。
  • まず最初の例ですが、本来なら、赤色のsmall-2 push-10のカラムが左側に表示されるはずですが、push-10というクラスの指示で、右に10カラム移動して表示され、逆に青色のsmall-10 pull-2の指示で左に2カラム移動して表示されています。

ブロックグリッド

グリッドをブロック単位で指定できるブロックグリッドについて調べてみましょう。ブロックグリッドを調べるために下記のようなファイルを作成しました。ブロックグリッドの数字は1行に何カラム表示するかを指定します。

sample6.html

<h5>small-block-gridのみ使用</h5>
<ul class="small-block-grid-2">
 <li><img src="img/kura001.png"></li>
 <li><img src="img/kura002.png"></li>
 <li><img src="img/kura003.png"></li>
 <li><img src="img/kura004.png"></li>
</ul>
<h5>large-block-gridのみ使用</h5>
<ul class="large-block-grid-4">
 <li><img src="img/kura001.png"></li>
 <li><img src="img/kura002.png"></li>
 <li><img src="img/kura003.png"></li>
 <li><img src="img/kura004.png"></li>
</ul>
<h5>両方のblock-gridを一緒に使用</h5>
<ul class="small-block-grid-2 large-block-grid-4">
 <li><img src="img/kura001.png"></li>
 <li><img src="img/kura002.png"></li>
 <li><img src="img/kura003.png"></li>
 <li><img src="img/kura004.png"></li>
</ul>
  • small-block-gridのみの場合は、PCサイズの時もモバイルサイズの時も指定したブロック数を堅持します。つまり、上記の例で言えば、1行で2画像を2行表示します。画像の大きさは、ブラウザのサイズと画像のサイズにより変動します。2ブロック表示しているときに、ブラウザの幅が、画像の合計幅よりも大きいときは、元画像のサイズで余白とともに表示されます。また、ブラウザの幅が画像の合計幅よりも小さいときは、元画像のサイズが縮小されて2画像が均等に表示されるように調整されます。
  • large-block-gridのみの場合は、PCサイズの時は、指定したブロック数を堅持します。つまり、798pxまでは、1行に4画像を表示します。モバイルサイズの時は、元画像のサイズに応じて、ブロック数を変更します。つまり、3ブロックと1ブロックの2行で表示したり、2ブロックずつの2行で表示したり、1ブロックで4行表示したりと変わっていきます。
  • 両方のblock-gridを一緒に使用している場合は、それぞれの指示に応じて表示します。上記の例で言えば、PCサイズの時は、4ブロック1行で表示しますし、モバイルサイズの時は、2ブロックずつの2行で表示します。

ブラウザのPCサイズの時は、下記のようになります。

foundation017

モバイルサイズに関しては、ブラウザのサイズが変更されるに伴って微妙に変化しますので、画像では説明しづらいです。上記のsample6.htmlをクリックして、ご自身の目でお確かめください。

グリッドの説明だけで、結構長くなりました。只、このグリッドがレイアウトの基本ですので、グリッドの使い方さえ覚えれば、Foundation4は、ほぼ使いこなせると思います。

本日は、以上です。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ