開発を速くするCSSフレームワーク一覧

よこのじ（@yokonoji_work）です。

ドットインストールやPaizaといった動画学習では、Bootstrapの講座が用意されていますので、Bootstrapを使っている方は多いかもしれません。私もその一人なのですが、他のフレームワークも気になりましたので一通りの特徴を調べてみました。

CSSフレームワーク一覧

以下、見出し部分が公式ページへのリンクになっています。

Bootstrap

ブートストラップは、HTML、CSS、およびJSで開発するためのオープンソースのツールキット。グリッドシステムによるレスポンシブ対応、モーダルやタブなどを簡単に実装できる。

Foundation

Bootstrapと並ぶ、総合的なフレームワークです。特定の要素を削除したり、列、色、フォントサイズなどをカスタマイズしてcss、jsファイルをダウンロードすることもできます。

Materialize

マテリアルデザインでWebサイトを作成するためのフレームワークです。グリッド、折りたたみ、ボタンなどの一通りの機能を実装することが可能です。

MATERIAL-UI

Reactにマテリアルデザインを導入するためのコンポーネントです。Googleのデザインガイドラインに沿って開発されています。

Pure

グリッド、フォーム、ボタンなどの一連の機能を実装できるフレームワークですが、機能は最小です。ファイルサイズはたったの3.8KBです。

Bulma

シンプルでデザインも良いフレームワークです。JavaScriptによる処理はないため軽量です。

Skeleton

軽量でシンプルなCSSフレームワークです。グリッド、ボタン、フォームなど最小限だけど必要なものは揃っています。美しいタイポグラフィでスッキリしたサイトを作ることができます。

Milligram

gzip圧縮されたファイルはたったの2KB。最小限の機能は提供されますので、Webページのベースとして使うことができそうです。

GroundworkCSS 2

総合的な機能を持つフレームワークです。アニメーションにより動きを取り入れることで、シンプルながらそれを感じないデザインとなります。

siimple

フラットデザインが美しいフレームワークです。シンプルなWebページをデザインしたい場合に適しています。

Blaze UI

カメラやマイクの起動、カレンダーの表示、タイムラインによる年表など、使いたくなる機能を実装できます。

chota

ヒンディー語で「小」を意味するchotaは、3KB未満のファイルサイズです。

様々なアイコンを利用できるicongramが紹介されています。各カテゴリのSourceから一次ソースにたどり着ける。Deviconは使い道が多そうです。

Semantic UI

フレンドリーなHTMLを使用して、美しくレスポンシブなレイアウトを作成するのに役立つ開発フレームワークです。メニュー、タブ、カードなどの豊富な機能を実装できます。デザインも美しいです。

UIkit

スライダー、ドロップダウン、カウントダウンなど、cssとjsを組み合わせて多彩な表現ができます。

Spectre

軽量でレスポンシブなモダンCSSフレームワークです。gzip圧縮されたファイルは10KB未満なので、レスポンシブなどの最小限の機能のみが必要であれば、軽量なフレームワークを選択しても良いかもしれません。

Picnic CSS

Picnic CSSは軽量で美しいCSSライブラリです。デザインがシンプルで美しいと感じます。画像のドロップダウン入力をJavaScriptと組み合わせて実装することもできます。

WebUI

ドロップダウンメニュー、画像のアップロード、タブなどの機能を簡単に実装できます。20列のグリッドシステムとなっています。

MUI

MUIは、Googleのマテリアルデザインガイドに準拠した軽量なCSSフレームワークです。ReactとAngularでコンポーネントとして使うこともできます。

Material Design Lite

マテリアルデザインのためのフレームワークです。ローディングバーやスピナー、値を設定するスライダーバーなどをシンプルで美しいデザインで実装できます。ドキュメントも見やすくなっています。

Material

マテリアルデザインのためのフレームワークです。Bootstrapの要素にマテリアルデザインを与えることを目的としており、基本的にそのままクラス名を使えます。

mini.css

グリッドはもちろん、モーダル、スピナーなど一通りの機能を実装できます。JavaScriptの処理はないので軽量です。

Mustard

価格表、ストライプの美しいプログレスバーを簡単に実装できます。もちろん一通りの機能も揃っています。

Turretcss

全体的にシンプルなデザインだと感じます。チェックボックス、ラジオボタン、セレクトフォームなどはシンプルながら綺麗なデザインです。

Flat Remix CSS Library

フラットデザインを導入するためのライブラリです。フラットアイコンのダウンロードも可能です。

Tachyons

ボーダーのデザインや色使いがシンプルで美しいです。gzipで圧縮されたファイルは14KBほどでとても軽量です。

Topcoat

Webアプリケーション向けのフォームやボタンのCSSライブラリです。アイコンやフォントをダウンロードすることもできます。

Petal

デザイン、色使いが美しく使いたくなるフレームワークです。アイコンも使えます。

Kube

オフキャンバスで外側からメニューをスライド表示させたり、メッセージを外から表示させたり、言語翻訳をするために言語変数を取得したりと、使い勝手が良くなる機能を実装できます。

Beauter

アコーディオン、プログレスバーは綺麗なデザイン・アニメーションですので、ぜひ使ってみたいと思えます。

Simple Grid

Webサイトにグリッドシステムを導入できます。それだけ。とても潔いです。

Smart CSS Grid

グリッドシステムを取り入れるためのフレームワークです。シンプルなクラス名で使用できます。

Griddd

Gridddもまた、グリッドシステムを取り入れるためのフレームワークです。7KB未満の軽量なファイルサイズ。

Cirrus

aタグをホバーしたときのスタイルなど、シンプルながら目立たせることができます。テーブルもスッキリしつつも綺麗に整っています。

SkyBlue

ファイルサイズの大きいBootstrapではなく、軽量なフレームワークが必要ということで作られたものです。

外部サイトのアイコンが紹介されています。提供元のPixedenはフリーのアイコンを数多く用意されています。

lit

レスポンシブやタイポグラフィのためのlitと、それを拡張するためのutilという2つのフレームワークを使用してデザインします。

micron

CSSとJavaScriptを組み合わせて、点滅したり跳ねたりといったアニメーションを付けることができます。

 

[toggle title=”参考サイト”]

[/toggle]