Flexboxはすごい便利!最近のレイアウトやコンポーネントが簡単に実装できるスタイルシートのまとめ

2016年1月12日にIEの古いバージョンのサポートが終了して半年が過ぎ、IEの対象バージョンをIE11とEdgeに、そしてFlexboxの導入をしている制作者も多いと思います。

Flexboxを使って、最近のレイアウトやコンポーネントが簡単に実装できるスタイルシートやフレームワークを紹介します。

レイアウトやコンポーネントを実装するスタイルシートのまとめ

イラスト: Girls Design Materials

Flexboxの各プロパティの詳しい解説は、下記ページをご覧ください。

サイトのキャプチャ

Bulma
Bulma -GitHub

外部CSSを一つ加えるだけで、最近よく見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトが簡単に利用できます。カスタマイズも簡単で、ブルマをベースに自分用のデザインを適用することもできます。
参考: ブルマの紹介記事

サイトのキャプチャ

Blaze CSS
Blaze CSS -GitHub

ネーミング規則にBEMとITCSSを使い、モバイルファーストでさまざまなコンポーネントが簡単に実装できる超軽量のフレームワーク。

サイトのキャプチャ

driveway
driveway -GitHub

レスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できます。各パネルのレイアウトもさまざまなものが用意されており、インタラクション用のコンポーネントも利用できます。
参考: drivewayの紹介記事

サイトのキャプチャ

Materialize
Materialize -GitHub

Material Designをベースに、ユーザエクスペリエンスにフォーカスして実装されたフレームワーク。アニメーションを使った楽しいエフェクトもたくさん用意されています。

サイトのキャプチャ

Flexbox Grid
Flexbox Grid -GitHub

Flexboxを使った汎用性のあるさまざまなグリッドを簡単に利用できます。

サイトのキャプチャ

Flexbox Patterns
Flexbox Patterns -GitHub

Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するコードが利用できます。
参考: Flexbox Patternsの紹介記事

サイトのキャプチャ

Picnic CSS
Picnic CSS -GitHub

10kb以下のテンプレートでレスポンシブ用のレイアウトを実装し、20kb以下でのページ実装を実現させる超軽量のフレームワーク。

サイトのキャプチャ

Vital
Vital -GitHub

アイコンを含めてもトータル31kb、肥大化される他のフレームワークとは異なり、超軽量でWebアプリケーションが実装できます。

サイトのキャプチャ

Grd
Grd -GitHub

グリッドとセル、2つのclassで構成された、Flexboxでグリッドだけを実装するためのフレームワーク。

サイトのキャプチャ

Simple Grid
Simple Grid -GitHub

今回紹介している中では最軽量の1.6kb。Flexbox無しで12カラムのグリッドを実装するシンプルなフレームワーク。

サイトのキャプチャ

Responsive Comic Book Layout

CSS Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウト。しかもレスポンシブ対応です。

top of page

©2017 coliss