【HTML5/CSS3】【Foundation】Foundation6の新機能「Flex Grid」を使ってみる

Foundation6の新機能として、flexboxによるグリッドシステム「Flex Grid」の採用があります。

flexboxについてはWebクリエイターボックス様の解説が詳しいです。
これからのCSSレイアウトはflexboxで決まり！ | Webクリエイターボックス

Flex GridはCSSのflexboxを基軸とした新しいグリッドシステムです。
レスポンシブへのより柔軟な対応が行えると同時に、CSSフレームワークにありがちなHTMLの深いネストを簡素化することができます。

Flex Gridはどうすれば使えるようになるのか、従来のグリッドシステム何が違うのかについて簡単ですが調べてみました。

Flex Gridを使ってみようとされる方は参考にしてください。

注意：対応ブラウザについて
flexboxの対応状況と同じですが、Flex Gridも対応ブラウザが
Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+.
となります。

IE9、Android4.3以下を切れるかどうかがポイントになりそうです。

ADs

はじめに：Flex Gridを有効にする

Sassバージョンでの利用方法

Foundation6の導入方法については過去記事も参照してください。
Foundation6のシンプルなテンプレート「Foundation for Sites Template」を使う

デフォルトでは従来のfloatを利用したグリッドシステムが使用されますので、app.scssを修正してFlex Gridを有効にします。

1 2	//@include foundation-grid; @include foundation-flex-grid;

「@include foundation-grid;」をコメントアウトして「@include foundation-flex-grid;」を追記します。

CSSをビルドするとFlex Gridを使用できます。

ビルド済みダウンロードバージョンでの利用方法

Customize FoundationからHTMLとビルド済みCSSをダウンロードして利用する場合は、「Grid」欄の「Flex Grid」をチェックしてダウンロードします。

ただ、ビルド後のファイルはCSSの修正が難しくなるので、Sass版の使用をお勧めします。

実際にHTMLを書いてみる

公式ドキュメントのFlex Gridを参考にしています。

実際にFoundation6でHTMLを書いたもの
以下のコードがどういう動きをするかの参考にしてください。

基本

横一列をdiv.rowとし、その中にdiv.columns.large-○（1～12の数字）で枠を組んでいくのは従来のグリッドと同じです。

たとえば左：右を1:2にしたレイアウトを組みたい場合は以下のHTMLになります。

ここは4/12

</div>

こっちは8/12

</div>

Flex Gridを有効にしても従来の記述だけでは何も変わりません。
次から紹介する新機能（といってもクラスをつけるだけなので簡単）を使うことで、FlexGridのよさを活かせます。

1カラムだけ幅固定、あとは等分にする

従来のグリッドはすべてのカラムに幅（small-○のようなクラス）を指定する必要がありました。
Flex Gridは幅を指定しないカラムの幅を均等に割り振ることができます。
グリッドシステムなのに12分割じゃなくてもいい！素晴らしい！

ここは2/12

</div>

残った10/12を3等分

</div>

残った10/12を3等分

</div>

残った10/12を3等分

</div>

カラムを最小幅にする

「shrink」というクラスを付加することで、できる限り狭い1/12に満たないカラムをつくることもできます。
アイコン＋テキストというレイアウトや、1/12未満のカラムをつくりたい幅広なレイアウトを組むときに使えそうです。

marginやpaddingは適切に維持されるので最小幅と言ってもレイアウトが崩れる心配はありません。

あ

</div>

一文字分の幅を引いた残り

</div>

</div>

画像でも同様

</div>

カラムを均等幅にする

.columnsに対して「large-expand」「medium-expand」「small-expand」というクラスを付加することで、それぞれのウインドウサイズ時にカラムの幅をすべて同一にすることができます。
従来は「large-○」のように12を割り切れる幅を指定しないといけませんでしたが、expandクラスを使うことで自由なレイアウトが実装できますね。

ウインドウサイズが大きいと1/5、小さいと幅いっぱい

</div>

ウインドウサイズが大きいと1/5、小さいと幅いっぱい

</div>

ウインドウサイズが大きいと1/5、小さいと幅いっぱい

</div>

ウインドウサイズが大きいと1/5、小さいと幅いっぱい

</div>

ウインドウサイズが大きいと1/5、小さいと幅いっぱい

</div>

横並び・縦並びを制御する

ウィンドウサイズによって横並び、縦並びを制御したい場合、.rowにクラスを付加するだけで簡単に実現できます。
従来は.columnsに対して「small-○」「large-○」という幅指定を行わないといけませんでした。

横並びの状態を解除したい場合、「medium-unstack」「large-unstack」というクラスを.rowクラスとともに指定することで縦並びに組み直されます。

※なぜか「small-unstack」が効かない…バグかもしれません。

<div class="columns">カラム幅を指定しないと3等分、ウインドウ幅が狭くても変わらない</div>

</div>

<div class="columns">カラム幅を指定しないと3等分、ウインドウ幅が狭いと縦並び</div>

</div>

<div class="columns">カラムが12以上でもいい</div>

</div>

水平方向の行揃え

カラム数が12未満の場合、余ったカラムを制御するために「end」や「small-offset-○」というクラスを付加する必要がありました。
Flex Gridはカラムが足りない場合でも適切にレイアウトを組んでくれます。

従来なら

</div>

12に足りないと

</div>

最後に「end」が必要

</div>

Flex Gridなら

</div>

Flex Gridなら

</div>

余りが出ても大丈夫！

</div>

.rowに「align-center」を付加することで

</div>

中央揃え

</div>

12で割り切れなくてもいいです。<br />

（ここの左右の余白は1.5カラム）

</div>

均等割もできる

</div>

つまりこれは

</div>

justify-content: space-between;

</div>

左右の余白を均等に取る

</div>

justify-content: space-around;も

</div>

使えます。

</div>

垂直方向の行揃え

垂直方向の行揃えもクラスを指定するだけで簡単にできます。

.rowに「align-middle」「align-top」「align-bottom」を指定することで、含まれるカラムを指定した行揃えにしてくれます。

.columnsに指定して中央揃えや上揃えなどを混在することも可能です。
苦労したvertical-align:middle;も簡単にできる！素晴らしい！

縦揃え

</div>

こっちのほうが縦長<br />

こっちのほうが縦長

</div>

高さを揃える（わかりにくいけどcolumnsに指定した背景が追随している）

</div>

こっちのほうが縦長<br />

こっちのほうが縦長

</div>

.columnsにalign-topを指定

</div>

ここは指定なし。<br />

ここは指定なし。

</div>

.columnsにalign-bottomを指定

</div>

カラムの余白を制御する

特に指定しないとカラムにはpaddingが取られますが、「small-collapse」のように「[size]-collapse」というクラスを.rowに付加することで余白のないカラムをレイアウトすることができます。

小ウインドウでは余白なし、中・大では余白ありといった使い方ができます。

余白がある

</div>

余白がある

</div>

余白がない

</div>

余白がない

</div>

未指定では余白あり

</div>

未指定では余白あり

</div>

余談ですが、日本語環境ではデフォルトの余白が大きすぎると思うので_settings.scss内の「$grid-column-responsive-gutter」という値（これがカラムのpadding）を修正したほうがいいと思います。

$grid-column-responsive-gutter: (

small: 20px,

medium: 30px,

);

カラム間のマージンを取る

[size]-offset-○というクラスをカラムに付加することで、左側に指定カラム幅分のマージンを取ることができます。
（この機能は従来からあったような気が…）

左側に1カラム分マージンを取る

</div>

左側に1カラム分マージンを取る

</div>

カラム幅を指定しない場合、1/12のマージンを取り残りが割り当てられる

</div>

並び順を制御する

flexboxには「order」というプロパティがあり、HTMLの記述順に影響されず並び順を制御することができます。
Foundation6の場合は「[size]-order-○」というクラスをカラムに付加することで並び順を制御することができます。

HTML上は先に書かれているけど順番は2

</div>

HTML上は後に書かれているけど順番は1

</div>

まとめ

Flex Gridのカラム幅を指定しないときの柔軟な挙動は、特にCMSで使う際に効果を発揮するのではないかと思います。
従来のグリッドシステムとほぼ同じ感覚で使うことができますので、機会があればぜひ挑戦してみてください。

余談

この「Wood-Roots.blog」をFoundation6でリニューアルしようと思い少しずつ進めています。
Flex Gridを使うということはIE9を切ることになるのですが、まぁいいですよねｗ

ADs

Wood-Roots.blogをリニューアルしました

Foundation6のシンプルなテンプレート「Foundation for Sites Template」を使う

Post Comments コメントをキャンセル

Comments

コメントはまだありません。

【HTML5/CSS3】【Foundation】Foundation6の新機能「Flex Grid」を使ってみる | Wood-Roots:blog