Flexboxでグリッドデザインを実装できるCSSフレームワーク15選
- 2017年2月2日
- 478
ライター・コラムニスト。デザインやテクノロジー、マーケティングやライフハック系の記事が得意。2016年からferretでも記事の執筆を開始。Twitterでも面白いWebサービスなどを紹介しています。よろしければそちらもチェックしてみてください。
>> 著者詳細はこちら
CSSでよく使うコンポーネントをフレームワークとしてまとめているCSSフレームワーク。
その多くは、レスポンシブに対応した機能も標準対応しているので非常に便利です。
そうしたCSSフレームワークの中でも、レイアウトにFlexboxを使用したモダンなフレームワークが次第に増えてきました。
また、古いIE（インターネットエクスプローラー）のサポートの打ち切りや、主要ブラウザがCSS3の機能の多くをサポートしているので、Flexbox（フレックスボックス）を使う機会も多くなってきました。
そこで今回は、Flexbox対応のCSSフレームワークをまとめてご紹介していきます。
Flexboxを使えば段組が簡単になりますが、さらにCSSフレームワークを使うことで、Flexboxの基本的な設定もすでに組み込まれているので非常に便利です。
それぞれに特徴があるので、ぜひ自分にあったCSSフレームワークを見つけてみてください。
参考：
今さら聞けない！Webデザインの定番とも呼べるレイアウト方法「グリッドレイアウト」の基本｜ferret
インターネットエクスプローラー｜ferretマーケティング用語辞典
Flexboxとは
Flexboxとは、正式にはCSS Flexible Box Layout Moduleと呼ばれるもので、今までtableタグやfloatプロパティなどを使ってきた面倒なレイアウトとは違って、簡単にレイアウトが組めるようになったプロパティや考え方のことです。
tableやfloatを使うと、横並びの際にレイアウトが崩れたり、ブラウザによって表示が上手くいかないというケースも出てきます。
Flexboxを使うことで、CSS側でシンプルな記述で横並びにさせたり、簡単に並べ方を変更することが可能です。
最近のCSSフレームワークでは、Flexboxを使ってレイアウトを組めるようになったものがだんだんと多くなってきました。
また、CSSフレームワークの多くはMediaQueryを使ったレスポンシブ対応のデザインが組めるので、自分でFlexboxを用いてレイアウトを組むよりもフレームワークを使ったほうが簡単かつ自在に段組みができるようになります。
それでは、実際にFlexboxに対応したCSSフレームワークをご紹介しましょう。
Flexbox対応のCSSフレームワーク
1. Bootstrap
http://v4-alpha.getbootstrap.com
Twitterから登場したBootstrapは、現在最も人気のあるCSSフレームワークの1つです。
CSSのプリプロセッサであるSassにも対応していて、Flexboxだけではなく、ボタンやプログレスバーなどのコンポーネントも非常に充実しています。
また、Bootstrapのテーマを着せ替えることで、さらにリッチな表現をすることも可能です。
2. Bulma
Bulmaは、Githubでもスターを12,000弱獲得している人気のフレームワークの1つです。
人気の理由は、ほかのフレームワークにはないシンプルさにあります。
例えば、このように6つのボックスを横並びにしたい時に、以下のコードで簡単に実装できます。
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
<div class="column">6</div>
</div>
そのほかにも、以下のようなメディアオブジェクトも簡単に実装できたり……
水平方向の段組の横幅調整もシンプルに行えます。
3. Grd
Grdも非常にシンプルなCSSフレームワークです。
Grdでは、親要素のGridと子要素のCellを組み合わせて段組を行います。
<div class="Grid">
<div class="Cell -3of12">3of12</div>
<div class="Cell -9of12">9of12</div>
</div>
また、上の例のようにダッシュから始まる要素を付加することで、オプションを指定することができます。
例えば、「-3of12」は12分の3の横幅、「-top」で上揃え、「-right」で右揃え、といった具合にオプションを指定できます。
4. Basis
Basisでは12グリッドのグリッドシステムを採用しています。
親要素に「_c-row」、子要素に「c-row_col」を指定していきます。
<div class="_c-row">
<div class="_c-row__col _c-row__col--1-1 _c-row__col--md-1-3">...</div>
<div class="_c-row__col _c-row__col--1-1 _c-row__col--md-1-3">...</div>
<div class="_c-row__col _c-row__col--1-1 _c-row__col--md-1-3">...</div>
</div>
Basisのユニークなところは、入れ子構造での段組が簡単に実装できるところです。
このような入れ子構造も組むことができます。
5. Foundation
Foundationも非常に人気のあるCSSフレームワークの1つで、軽量化を目指しており、従来より50％のコードの軽量化に成功しています。
また、最近話題になっているMotion UIにも対応しているので、マイクロインタラクションも簡単に実装することが可能です。
6. FOX CSS
http://ronanlevesque.fr/projets/fox-css/
FOX CSSはたった23キロバイトしかない、超軽量のCSSフレームワークです。
CSSリセットも標準装備しており、できるだけブラウザ間の誤差を最小限にすることができます。
また、Sass対応で、いくつかのMixinも用意されています。
7. Flexbox Grid
Flexbox Gridは、オフセットや入れ子、幅の自動調整などのグリッドに関する豊富な機能を持ったCSSフレームワークです。
ほかのフレームワークと異なり、グリッドに特化した要素に絞ることで軽量化に成功しています。
以下の例のように、親要素にrow、子要素にcol-xxx(xxxは任意のプロパティ)と指定するのが基本です。
<div class="row">
<div class="col-xs-12">
<div class="box">12</div>
</div>
</div>
8. INK
INKは、SassとJavaScriptも同梱されている、カスタマイズがしやすいCSSフレームワークです。
「ink-navigation」「horizontal」「column-group」のように、クラス名はできるだけ自然言語に近いように名付けられています。
<div class="ink-grid">
<div class="column-group">
<div class="all-50 small-100 tiny-100">...</div>
<div class="all-50 small-100 tiny-100">...</div>
</div>
</div>
また、INKでは、JavaScriptを使うことでカスタマイズを行うことが推奨されています。
Ink.requireModules(
['Ink.Dom.Css_1'],
function(Css) {
var elm = Ink.s('.ink');
Css.addClassName(elm,'hot');
}
);
もちろん、Sassで作られているので、Mixinなどを使って新しく機能を設定することも可能です。
9. Gridlex
Gridlexも、Flexbox Gridなどと同じように、Flexboxによるグリッドレイアウトに特化したCSSフレームワークです。
1段は12カラムで、親要素にgrid、子要素にcol-xxxを指定します。
次の例では、2段表示(12グリッドのカラムと、6＋3＋3＝12グリッドのカラム)で表示されます。
<div class="grid">
<div class="col-12">...</div>
<div class="col-6">...</div>
<div class="col-3">...</div>
<div class="col-3">...</div>
</div>
また、marginを無くしてこのようなギャラリーも作成することもできます。
10. Material-UI
Material-UIは、ReactとGoogleのマテリアルデザインに着想を得たフレームワークです。
このうちグリッドレイアウトの機能はほんの一部で、コンポーネントだけでなくマテリアルカラーまで揃っています。
Reactをベースにしているため、JavaScriptの基本を理解していないと使いこなせませんが、機能が豊富で中～上級者は選択肢の1つに入れておきましょう。
11. Pavilion
Pavillionはたったの9キロバイトと驚くほど軽量なCSSフレームワークです。もちろんグリッドだけでなくUIパーツも同梱されています。
グリッド部分は上記のようにFlexboxのプロパティを1つずつ足していくように使うこともできるので、Flexboxを扱うことに慣れている方は、Pavillionが一番使いやすいかもしれません。
12. Cutestrap
Cutestrapは、その名のとおりBootstrapにフィーチャーしつつも、8キロバイトという軽量化に成功したCSSフレームワークです。
Cuteの名のとおりピンク色のUIが特徴的です。
Normalize.cssのリセット機能も備えているので、リセット系CSSを別に用意しなくてもいいのは大きなメリットです。
13. Milligram
Milligramは、驚くべきことにたったの2キロバイトしかない、今回紹介する中でも一番軽量なCSSフレームワークです。
フォームやボタンなどのコンポーネントだけではなく、下記のようにグリッドシステムも同梱されています。
<div class="row">
<div class="column">.column</div>
<div class="column column-50 column-offset-25">.column column-50 column-offset-25</div>
</div>
オフセットを指定することも可能です。
14. Pure
PureはYahoo!から登場したCSSフレームワークです。
12カラムのグリッドレイアウトを持つCSSフレームワークが多い中で、Pureは5カラム、24カラムをベースとしたグリッドレイアウトに対応しています。
また、テーブルやメニューなどのコンポーネントも豊富に揃っています。
15. ZEUS
ZEUSはあらゆるデバイスに対応した、レイアウトに関する細かい設定が行えるCSSフレームワークです。
上図のように様々なブレイクポイントでレイアウトを組み替えることができ、縁やグリッドの方向なども細かく設定することができます。
まとめ
今回は、Flexboxでグリッドデザインを実装できるCSSフレームワークを紹介しました。
レイアウトをFlexboxで組んでいるという点は同じですが、ファイルサイズや記述の方法、グリッドに特化しているのかコンポーネントも用意されているのかなど、どこに重きを置くのかによってどのCSSフレームワークを選べばいいのかが変わってきます。
Bulmaのようにシンプルなのがいい方もいれば、ZEUSのように細かい設定までできた方がいいという場合もあるでしょう。