開発を速くするCSSフレームワーク一覧
- 2018.11.25
- 2019.01.25
- Webスキル
よこのじ(@yokonoji_work)です。
ドットインストールやPaizaといった動画学習では、Bootstrapの講座が用意されていますので、Bootstrapを使っている方は多いかもしれません。私もその一人なのですが、他のフレームワークも気になりましたので一通りの特徴を調べてみました。
- 1. CSSフレームワーク一覧
- 1.1. Bootstrap
- 1.2. Foundation
- 1.3. Materialize
- 1.4. MATERIAL-UI
- 1.5. Pure
- 1.6. Bulma
- 1.7. Skeleton
- 1.8. Milligram
- 1.9. GroundworkCSS 2
- 1.10. siimple
- 1.11. Blaze UI
- 1.12. chota
- 1.13. Semantic UI
- 1.14. UIkit
- 1.15. Spectre
- 1.16. Picnic CSS
- 1.17. WebUI
- 1.18. MUI
- 1.19. Material Design Lite
- 1.20. Material
- 1.21. mini.css
- 1.22. Mustard
- 1.23. Turretcss
- 1.24. Flat Remix CSS Library
- 1.25. Tachyons
- 1.26. Topcoat
- 1.27. Petal
- 1.28. Kube
- 1.29. Beauter
- 1.30. Simple Grid
- 1.31. Smart CSS Grid
- 1.32. Griddd
- 1.33. Cirrus
- 1.34. SkyBlue
- 1.35. lit
- 1.36. micron
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を組み合わせて、点滅したり跳ねたりといったアニメーションを付けることができます。
- 前の記事
URLパラメーター(クエリ文字列)でCSSのキャッシュを自動更新させる 2018.11.25
- 次の記事
PaizaラーニングのPHP入門で学習したら、とてもわかりやすかった 2018.11.27