最近増えてきたFlexboxベースのCSSフレームワークをご紹介

最近、レイアウトにFlexboxをベースにしたモダンなCSSフレームワークが出始めてきています。
背景として、主要なブラウザがFlexboxのサポート完了させた事や、2016年1月で古いIEのサポートが打ち切られた事により、よりCSS3を積極的に使える環境が整ってきた事などが考えられます。

Flexboxとは

まずFlexboxとはなんなのか、正式名称は「CSS Flexible Box Layout Module」と言うもので、ざっくり言うと「今までより簡単にレイアウトが組めますよ!」って事です。

ざっくりしすぎなので補足すると、今までレイアウトを組むときは、テーブルを使ったり、CSSのfloatを使ったりして組んでいましたが、横並びにするとレイアウトが崩れる、縦の高さを揃えるのが難しい、上下中央揃えをしようとすると面倒・・・と手間がかかりました。javascriptを使わないと出来ない場合もありWEBのレイアウトは結構不自由だったのですが、Flexboxによってそれが改善されます。
Flexbox自体の使い方は下記のブログなどが詳しいので一度目を通しておくと、Flexboxの凄さがわかると思います。

古いIEがこのFlexboxをサポートしておらず、途中で仕様が変わるなどイマイチ使いづらい印象がありましたが、現在(2016年3月2日時点)Can I Useで見ても、古いIE以外のブラウザでは対応が完了しており、いよいよ本格的にFlexboxを実務でも使えるようになってきたと思います。

161_01

Flexboxに対応したフレームワーク

自分でFlexboxを使ってレイアウトするのも、もちろんアリですが、サクッと作りたい時にはフレームワークが役立ちます。ここでは最近のFlexboxをベースにしたCSSフレームワークをいくつか紹介します。

Bulma

161_02

最近一番の話題となっているCSSフレームワークがこの「Bulma」です。レスポンシブ対応しており、オープンソースとして公開されています。ターコイズブルーを基調とした色合いも、モダンな感じですごく素敵だと思います。

161_03

Flexboxに対応したフレキシブルなグリッドレイアウトが可能です。

161_04

主要なボタンやフォーム周りのパーツは全て用意されています。

Basis

161_05

こちらは日本のフリーランスの方が作ったというFlexboxベースの軽量CSSフレームワークです。レスポンシブ対応しており、従来のフレームワークにはなかった柔軟なグリッドサイズ指定が出来るのが特徴です。

また、CSSの命名規則にFLOCSSを採用しているのもポイントです。個人的に制作する時もFLOCSSは参考にしており、BasisはFLOCSSに沿った実例としてコードを眺めるだけでも勉強になります。また、日本の方が製作者という安心感もありますね。

161_06

柔軟なグリッドサイズ指定が可能です。

161_07

フォームやボタンなど主要なパーツは用意されていますので、ベースとして使い勝手が良さそうです。

FOX CSS

161_08

モバイルファーストで設計された超軽量CSSフレームワークで、ミニファイ(圧縮)版だと23KBしかないという軽さです。

161_09

ボタンなどは無く、リセットとレイアウト周りだけ用意されています。
余計な機能は必要とせず、レイアウトだけフレームワークを使いたいという場合にとても最適なCSSフレームワークです。

INK

161_10

こちらもレスポンシブ対応のCSSフレームワークです。バージョン3.0.0以降、Flexboxにも対応したとの事(IE10以降)

161_11

フレームワークとしては重量級ですが、ナビゲーションからボタン、フォーム、テーブル、アラートなど一通りのパーツが揃っており、BootstrapやFoundation並に機能が揃っています。

Bootstrap4

161_12

CSSフレームワークの代表であるBootstrapも4からFlexboxがサポートされます。

それ以外にもIE8のサポートが打ち切られたり、開発言語がLESSからSASSに変わるなど、最近の流れに沿った開発が行われているようです。

161_13

まさに定番といえるCSSフレームワークです。導入例も多くネット上にドキュメントも多数あるので、安心感があります。

2016年3月2日現在では、まだα2版で今後β版を経て正式リリースとなるものと思われるので正式版公開まではまだ時間がかかりそうですが、今後もBootstrapの動向は要チェックですね。

これからも増えるであろうFlexboxベースのCSSフレームワーク

今後もFlexboxベースのCSSフレームワークは増えていくものと思われます。それぞれに特徴があるので自分の用途にあったものを上手く利用して効率よく制作していきたいですね。