基本

Foundationとは何か?使用するための準備、基本のグリッドシステムなどの説明。

グリッドシステム

Foundation5はBootstrap3と同様、横幅を12等分にしたグリッドシステムです。12の振分けをいくつにするかでカラムが決まります。
例えば8:4の2カラムとか、3:6:3などの3カラムとかも簡単に作成できます。 また、ブレイクポイントが2箇所、画面サイズ3種で設定されていて、各サイズでどのように表示するかも指定できます。
※ブレイクポイントとは表示デバイス(ウィンドウサイズ)によってレイアウトの表示を切り替えるポイントになります。スマホ、タブレット、PCなどそれぞれレスポンシブでレイアウトを変更することが可能です。

グリッドシステムのブレイクポイント

2箇所のブレイクポイント、3種の画面サイズ

Foundation5のブレイクポイントは641pxと1025pxに用意されており、640x以下、641px以上〜1024px以下、1025px以上の3種類でレイアウトを切り替えることが可能です。
それぞれsmall-[数字]、medium-[数字]、large-[数字]というクラスで指定することで該当のブレイクポイントでレイアウトを変更できます。
※Bootstap3のブレイクポイントは768px,992px,1200pxに用意されており4種類のレイアウトを切り替えることが可能です。

ブレイクポイント

デバイスの表記は目安になります。例えば1024pxはipadなどの横表示のサイズになります。解像度ではなくブラウザの表示サイズが基準です。

スマホ
(640px以下)
タブレット
(641px〜1024px)
PC
(1025px以上)
class名 .small-[数字] .medium-[数字] .large-[数字]

グリッドシステムの基本

レイアウト方法

グリッドシステムを利用してレイアウトしていくためのルール

  • クラス.rowで行を設定
  • クラス.columnsと.small-[数字](任意の大きさ-数字)を併記でカラム設定

[数字]でカラムの幅を設定。1行ごとに[数字]の合計が12になるように指定します。12以上になるといわゆるカラム落ちで表示されます。Foundationの場合は右寄せのカラム落ちになります。

例えばタブレットサイズ以上で8:4の2カラムを設定したい場合は下記のようなソースになります。

			<div class="row">
				<div class="columns medium-8">medium-8</div>
  			<div class="columns medium-4">medium-4</div>
			</div>

Bootstap3との違いは.container(または、.container-fluid)で囲む必要がなく、カラム指定する場所に.columnsの指定が必要な点です。

Bootstap3と同様に最小のスマホサイズ用の.small-[数字]の指定がない場合は基本的にウインドウサイズを小さくすると1カラムになります。上記の場合ですと.medium-8、.medium-4とそれぞれ指定した部分はウインドウサイズが640px以下になるとそれぞれ1カラムになって縦に並びます。
上記例以外も含めたデモページを用意したのでレイアウトの変化を確認してみてください。

グリッドシステムの様々な設定例

ブレイクポイントごとにカラムを設定

例えばタブレットでは4カラム、スマホでは2カラムで表示したい場合などは複数クラスを指定することで設定できます。

			<div class="container">
				<div class="row">
					<div class="col-sm-3 col-xs-6">.col-sm-3 .col-xs-6</div>
					<div class="col-sm-3 col-xs-6">.col-sm-3 .col-xs-6</div>
					<div class="col-sm-3 col-xs-6">.col-sm-3 .col-xs-6</div>
					<div class="col-sm-3 col-xs-6">.col-sm-3 .col-xs-6</div>
				</div>
			</div>

上記例以外も含めたデモページを用意しましたので表示の確認をしてみてください。

カラムを入れ子にした設定

カラムを入れ子にしてカラムの中にカラムを設定することも可能です。

      <div class="row">
        <div class="columns medium-9">Level 1:.medium-9
          <div class="row">
            <div class="columns small-7">Level 2:.small-7</div>
            <div class="columns small-5">Level 2:.small-5</div>
          </div>
          </div>
        <div class="columns medium-3">Level 1:.medium-3</div>
      </div>

上記例以外も含めたデモページを用意しましたので表示の確認をしてみてください。

カラムのオフセット

途中に空欄を設けた形でカラムを設置することも可能です。空欄を設けたいカラムに.サイズ-offset-[数字]を入れることで左に空欄ができます。

      <div class="row">
        <div class="columns medium-4">.medium-4</div>
        <div class="columns medium-4 medium-offset-4">.medium-4 .medium-offset-4</div>
      </div>

上記例以外も含めたデモページを用意しましたので表示の確認をしてみてください。

カラムの順序

普通は先に記述したカラムが左にきますが、.[大きさ]-push-[数字] と.[大きさ]-pull-[数字] クラスを使うことで表示される順序を変更することができます。

      <div class="row">
        <div class="small-8 small-push-4 columns">.small-8 .small-push-4</div>
        <div class="small-4 small-pull-8 columns">.small-4 .small-pull-8</div>
      </div>

上記例以外も含めたデモページを用意しましたので表示の確認をしてみてください。

1行の合計が12に満たない場合

基本1行の合計が12になるように設定していきますが、12以下の場合最後のカラムが右寄せになります。(※合計12の時でも最後のカラムは右寄せの設定です。).endを最後のカラムで指定すると左寄せにすることが可能です。※Bootstrap3では12に満たない場合も左寄せです。

      <div class="row">
        <div class="medium-3 columns">.medium-3</div>
        <div class="medium-3 columns">.medium-3</div>
        <div class="medium-3 columns">.medium-3</div>
      </div>
      <div class="row">
        <div class="medium-3 columns">.medium-3</div>
        <div class="medium-3 columns">.medium-3</div>
        <div class="medium-3 columns end">.medium-3 .end</div>
      </div>

上記例デモページを用意しましたので表示の確認をしてみてください。

左右の余白無し表示

.rowには標準で左右に余白が15px(基のcssはrem指定)入りますが.rowを指定したタグに併記して.[大きさ]-collapse、.[大きさ]-uncollapseを使用することでサイズ毎に余白の有無を調整できます。.[大きさ]-collapseを指定すると左右の余白が0になります。.[大きさ]-uncollapseを指定すると通常の余白ありに戻ります。こちらもモバイルファーストなのでsmallでcollapseを使用した場合は大きなサイズでuncollapseを指定しない限り余白がない状態になります。

      <div class="row large-collapse">
        <div class="small-6 columns">スマホからタブレットサイズは左右余白あり。<br>PCサイズでは左右余白無し。</div>
        <div class="small-6 columns">スマホからタブレットサイズまは左右余白あり。<br>PCサイズでは左右余白無し。</div>
      </div>

上記例以外も含めたデモページを用意しましたので表示の確認をしてみてください。

カラムの中央寄せ

1行、合計12ではない時に.[大きさ]-centered指定でカラムの中央寄せができます。また、.[大きさ]-uncenteredで中央寄せの解除もできます。
こちらも上記の左右の余白無し表示と同様モバイルファーストな点に注意してください。

      <div class="row large-collapse">
        <div class="small-6 columns">スマホからタブレットサイズは左右余白あり。<br>PCサイズでは左右余白無し。</div>
        <div class="small-6 columns">スマホからタブレットサイズまは左右余白あり。<br>PCサイズでは左右余白無し。</div>
      </div>

上記例以外も含めたデモページを用意しましたので表示の確認をしてみてください。

ブレイクポイントごとの表示設定

ブレイクポイントごとに表示・非表示を切り替えることが出来るクラス設定の一覧です。
実際には表示・非表示のブレイクポイントはxlarge(1441px~1920px)とxxlarge(1921px)以上も存在しますがこちらでは割愛しています。
Boorstrap3と違いある大きさ以上は表示・非表示の切替にする-upクラスがあります。

スマホ
(640px以下)
タブレット
(641px〜1024px)
PC
(1025px〜1440px)
.show-for-small-only 表示
.show-for-medium-only 表示
.show-for-large-only 表示
.show-for-medium-up 表示 表示
.show-for-large-up 表示
.hide-for-small-only 表示 表示
.hide-for-medium-only 表示 表示
.hide-for-large-only 表示 表示
.hide-for-medium-up 表示
.hide-for-large-up 表示 表示

上記例デモページを用意しましたので表示の確認をしてみてください。

© 2015 foudation5-guide.com