Foundation6を使ってみる。グリッドシステム編


Foundation6を使ってみよう。グリッドシステム編

 

cssフレームワークといえばやはりグリッドシステムでしょう。

Foudation6 のグリッドも Bootstrap 同様、デフォルトでは12カラムになるようにします。

ブレイクポイントは Bootstrap と異なるので注意ですね。

ユーザーによるグリッド数やガターのサイズ変更など出来ますが、ここではデフォルトの設定を基準とします。

*ブロックグリッド(Block Grids)ついては次回

 

Foundation-グリッドシステム

Foundation6のグリッドシステムについて

  • 横幅は12等分されたグリッド、そのうちいくつ使うかを指定
  • class=”row” で囲む。(Bootstrap では class=”container” が必要)
  • .small-#, .medium-#, .large-#, というクラスで画面幅に応じて何グリッド使うかを指定する。(#は数字1~12)
  • 併せて .column または .columns を記述する。(どちらでも可)
  • 指定がない場合スモールサイズのデフォルト値の12グリッドを使用したスタイルがより大画面サイズへと継承される
  • 12に満たない場合最後のグリッドは右寄せとなる、最後のグリッドに .end を指定すると左寄せ出来る
  • class=“expanded row” とすることで全幅指定ができる
  • .サイズ-centered とすることでグリッドをセンターリング可能
  • ネスト化やオフセットも使用可能
  • push/pullでカラムの順序入れ替えも可能
  • カラムの余白をサイズ毎に有り無し設定可能
  • SASSを変更することで、フレックスグリッド使用可能

 

Foundation6 – ブレイクポイント

Foundation6のブレイクポイントは、640px以上の幅、1024px以上の幅が用意されている。

Fluid rowを使用しない限り、コンテナの幅は1200pxまでとなっている。

画面サイズ 主にモバイル  主にタブレット 主にデスクトップ
Class Prefix .small-数字 .medium-数字 .large-数字
デバイス幅 39.9375em(639px)まで 40em(640px)以上

63.9375em(1023px)まで

64em(1024px)以上

 

Foundation6 – グリッドの使い方

 

Foundation6のグリッドの基礎。

1、.row で水平方向のブロックを作る。

2、.row ブロックの中に「指定の画面サイズで12分のうち何グリッド使用するかの数」というクラス名「small-2」「large-4」など記述。

3、上記に併記してクラス名 .columns を記述。

例:スモールサイズとミディアムサイズの画面では2.4.6の3カラム、ラージサイズ画面では4.4.4の三等分した3カラム。

上記のサンプルイメージ

64em(1024px)以上の画面サイズ
Foundation6のグリッド

40em(640px)以上、63.9375em(1023px)までの画面サイズ
Foundation6の使い方

39.9375em(639px)まで画面サイズ
Foundation6のグリッド

Bootstrap同様、mediumサイズの指定は無いが、特に指定がない限り、より小さい画面サイズの指定クラスを継承する。

 

Foundation6の全幅指定(Fluid row)。

.row に .expanded を付けるだけでフルードグリッドを利用できる。

div class=”expanded row”

Foundation6-グリッドの使い方

 

Foundation6のネスティング(Nesting)。

カラムの入れ子。入れ子にしたカラムは○/12グリッドを指定。

Foundation6のグリッド

 

Foundation6のオフセット(Offsets)。

オフセットを指定することで指定グリッド数の空白列を設定することが可能。

.サイズ(large medium small)-offset-数字

Foundation6のグリッド

 

Foundation6のグリッド数が12に満たない場合(Incomplete Rows)。

.row の指定が12に満たない場合、最後のカラムは右寄せとなるが、クラス end を与えることで左詰めが出来る。

Foundation6のグリッド

 

Foundation6のグリッドの余白を有り無し。(Collapse/Uncollapse Rows)。

グリッドのパディングをサイズ毎に付けたり無くしたりを、クラス名.collapse/uncollapseで指定できる。

デフォルトでは左右に 0.9375em(15px)のパディング設定有り。

パディング有=.collapse

パディング無=.uncollapse

Foundation6のグリッド

Foundation6のグリッド

 

Foundation6のカラムのセンター配置(Centered Columns)。

画面サイズに合わせてカラムを中央に配置ができる。

画面サイズ(small medium large)-centered

smallサイズでセンター配置し、ラージサイズで解除したい場合は .uncentered を記述。

1行目:スモール画面でcentaredを指定、大画面へ引き継ぐ。

2行目:ラージ画面でcenteredを指定。スモール・ミディアム画面ではセンターは解除される。

3行目:スモールサイズでcenteredを指定、ラージ画面でuncentaredで解除。

4行目:スモールサイズでcenteredを指定。グリッド数が11でもセンター配置されているのがわかる。

*ラージサイズ画面のイメージ

Foundation6のグリッド

*ミディアムサイズ画面のイメージ

Foundation6のグリッド

*スモールサイズ画面のイメージ

Foundation6のグリッド

 

Foundation6のカラムの順序入れ替え(Source Ordering)。

指定画面サイズでカラムの左右入れ替えを指定できる。

.push で右側へ押し出す。

.pull で左側へ引き出す。

上記記述はスモールサイズとミディアムサイズでは12グリッド表示となりhtmlの記述順通りに配置されるが、ラージサイズになると後に記述した3カラムが左側へ配置される。

メインコンテンツとサイドコンテンツの入れ替えなどに使う。(SEOの観点からなどで)

*スモール/ミディアムサイズ画面のイメージ

Foundation6のグリッド

*ラージサイズ画面のイメージ

Foundation6のグリッド

 

次回はブロックグリッド(Block Grids)を。

 


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL