【特集一覧】最新ガジェットから独占取材まで!
オタクに捧ぐ公式Twitter、始動(告知バナー)

【2022年最新】用途・テーマ別CSSフレームワークをとにかく沢山紹介

「Best CSS Framework」とかでよく見るCSSフレームワークを王道からマイナーまでとにかく沢山テーマ別に容量・用途と共に一覧形式でご紹介します。
Vue・ReactのUIフレームワークは含みません

【表】CSSフレームワーク一覧

まずは表で気になるものを探してみてください。テーマはそれぞれ目次に掲載していますので適宜スキップして御覧ください。

2022-03-29更新・追加10個
2022-04-11更新・+Onsen UI
カテゴリ名称CSS容量特徴・最近の動向JavaScript公式サイト・ドキュメント
四天王Bootstrap 5152KB5以降は脱jQuery必須https://getbootstrap.com/docs/5.0
Bulma201KBNavBar等はJSが必要一部必須https://bulma.io/
Tailwind CSS301KBユーティリティファーストの代名詞不要https://tailwindcss.com/
Foundation 6154KBBootstrap並の人気jQuery依存https://get.foundation/
機能豊富Tachyons72.2KBTailwindより軽いユーティリティファースト不要https://tachyons.io/
Primer482KBGitHub謹製。ボタンとかまんまGitHubhttps://primer.style/css/
HiQ112KBちょっと丸く汎用性に長けているhttps://jonathanharrell.github.io/hiq
UIKit69.19KB130KB程度でjQuery非依存必須https://getuikit.com/
PatternFly178KB+αNavBarの完備のモダンデザインhttps://www.patternfly.org
Pico.css68.9KB軽量ながら豊富なコンポーネントを完備不要https://picocss.com/
Blaze UI82.5KB上記同様軽量が売りhttps://www.blazeui.com/
Semantic UI613KBクラス名が直感的。jQuery非依存必須https://semantic-ui.com/
Carbon Design System570KBIBMのUIフレームワークhttps://www.carbondesignsystem.com
Fomaitic UI1,300KBSemantic-UIのフォークjQuery依存https://fomantic-ui.com
turretcss91.4KB非常に”今風”漂うデザイン不要https://turretcss.com
Vanilla Framework276KBUbuntuチームが開発https://vanillaframework.io/
マテリアル
デザイン
Materialize176KBここ3年更新無しjQuery依存https://materializecss.com/
Material Components462KBMDLの後継プロジェクト必須https://material.io/components/web/
MUI43.4KB+JSここ2年更新なしhttps://www.muicss.com
軽量
シンプル
Pure.css0.9KB(Core)+αのトッピング形式不要https://purecss.io/
Water.css22.1KB自動ダークモードにも軽量ながら対応https://watercss.kognise.dev/
Skeleton11.1KBミニツール等に使われるhttp://getskeleton.com/
Milligram8.8KBSkeleton CSSに似ているhttps://milligram.io/
Base9KB(Core)+αのトッピング形式。モダンhttps://unpkg.com/@getbase/[email protected]/index.html
Mini.css45.7KBリポジトリはArchive済みhttps://minicss.org/
Chota18.1KBタブ実装もされている軽量CSShttps://jenil.github.io/chota/
NoクラスTacit5.49KBNoクラスながらボタン等の実装もありhttps://yegor256.github.io/tacit/
MVP.css8.45KBNoクラスフレームワークhttps://andybrewer.github.io/mvp/
new.css4.5KBNoクラスフレームワークhttps://newcss.net/
awsm.css13.1KBもはやMarkdownパーサー並https://igoradamenko.github.io/awsm.css/elements.html
マイナー
最新
Beercss60.9KBStar数170の新しいマテリアルデザイン必須https://www.beercss.com/
Picnic CSS38.5KBGitHub Star数3.5k不要https://picnicss.com/
Spectre45KB最終更新は2年前だが筆者超お気に入りhttps://picturepan2.github.io/spectre/index.html

追加更新分(04/11以降)

Onsen UI

Onsen UI 2: Beautiful HTML5 Hybrid Mobile App Framework and Tools
Make beautiful hybrid mobile apps using HTML5, CSS and JavaScript. Works with or without any framework including Angular, Meteor, React and Vue. iOS and Android...

https://docs.google.com/spreadsheets/d/1qD5dZpiQigSOm5rUSxj811PaeZKgOFHVQmy8g0MEF7k/edit?usp=sharing上記表をスプレッドシートにて公開中(最終更新:2022/03/31)

超王道!CSSフレームワーク四天王

早速簡潔にご紹介。それぞれのデモや詳しい使い方は適宜公式ドキュメントをご確認してください!

1. Bootstrap 5

ファイル容量:152KB (別途JS必須)

もはや説明不要のCSSフレームワークの王様です。ver5からjQuery非依存になり高速動作も期待出来ます。MDB等のテーマも充実。
https://getbootstrap.com

2. Bulma

ファイル容量: 201KB (一部動作にJSが必要)

こちらも有名で、基本的にCSSオンリーで完結します。VueフレームワークとしてBurfy等の派生もあります。機能拡張パッケージも提供しています。
https://bulma.io

3. Tailwind CSS

ファイル容量: 301KB

CSSの記述を減らす「ユーティリティファースト」の代名詞的な存在。人気はあるものの開発者によって好き嫌い分かれます。
!https://tailwindcss.com

4. Foundation 6

ファイル容量: 154KB (jQuery依存)

昔からBootstrapと同じくらい人気のあるフレームワークです。
https://get.foundation

基本的にすべて実装済みのフレームワーク

続いて四天王ほど有名ではないがアラートやNavBarまで実装済みの高機能フレームワークを紹介。

5. Tachyons
ファイル容量: 72.2KB
Tailwind CSSをより軽量なユーティリティファーストなフレームワークです。
https://tachyons.io
6. Primer

ファイル容量: 482KB

開発元がGitHubなだけあって、GitHubのような見た目のアプリを作れます。
https://primer.style/css/

7. Materialize

ファイル容量: 176KB (jQuery必須)

マテリアルデザインが特徴でモバイルとの親和性も良いですが、最終コミットが2年前で今後更新の気配はありません。
https://materializecss.com

8. UI Kit

ファイル容量: 250KB (JS必須)

丸みを帯びたデザインが特徴の明るいテーマでおなじみのフレームワーク。
https://getuikit.com

9. Semantic UI
ファイル容量: 613KB (JS必須)
ボタンコンポーネントと言っても、”分岐ボタン”といったユニークな部分まで作り込まれている徹底ぶりが伺えます。
https://semantic-ui.com/elements/button.html

とにかくシンプル!超軽量フレームワーク

続いてちょっとした社内ツールやミニツールにピッタリのシンプルかつ軽量なフレームワークの紹介。

10. Pure.css

ファイル容量: 0.9KB (Core)

コアCSS+フォーム用CSSといった風に自由に付け足せるトッピング形式が特徴です。グリッドすら分離しているのでグリッド不要なページなどにも有用です。

https://purecss.io

11. Water.css

ファイル容量: 27.1KB

日本ではあまりポピュラーではありませんが、GitHub Star数6k超えです。軽量の部類ながら、ダークテーマにも対応。
https://watercss.kognise.dev/

12. Skeleton

ファイル容量: 11.1KB

こちらはおそらく一番最初に連想する超軽量フレームワーク人が多いのではないでしょうか。軽量ながらレスポンシブなグリッドにも対応してます。
http://getskeleton.com/

13. Milligram

ファイル容量: 8.8KB

かつてNode.jsの公式ホームページにも採用されていた、Skeletonに非常に似ているフレームワークです。
http://getskeleton.com/

14. Base

ファイル容量: 9KB(core)

Pure.cssと同様+αトッピング方式が特徴のフレームワークです。若干ユーティリティファーストの思想も取り込まれています。
https://unpkg.com/@getbase/[email protected]/index.html

15. Mini.css

ファイル容量: 45.7KB

軽量CSSのなかでは割と実装はしっかりとしていますが、プロジェクトのGitHubリポジトリはArchiveになっており更新はありません。
https://minicss.org

クラス付与すら不要なNoクラス

単純にHTMLをマークアップするだけ。あとはCSSを読み込むだけでスタイルが適用されるのが特徴のNoクラスフレームワークを紹介。
ここらへんから急にマイナーになります。Noクラスは独特な特徴はあまりない印象です。

16. Tacit

ファイル容量: 5.49KB

Noクラスとして主に海外で人気のフレームワークです。
https://yegor256.github.io/tacit/

17. MVP.css

ファイル容量: 8.45KB

Noクラスフレームワークの中では独特なスタイルで作り込まれています。
https://andybrewer.github.io/mvp/

18. new.css
ファイル容量: 4.5KB
今回紹介した中でもっともシンプルなフレームワークです。もはやMarkdownパーサー並。
https://newcss.net

今から流行る?マイナー&筆者お気に入り

最後にあまり有名でないものと筆者お気に入りを紹介して終わります。

19. Beer.css

ファイル容量: 60.9KB (JS必須)

ビールのアイコンが特徴な比較的モダンなマテリアルデザインフレームワークです。YouTubeやネトフリのCloneデモを見ることが出来ます。
https://www.beercss.com

20. Picnic CSS
ファイル容量: 38.5KB

陰影の無いフラットデザインが特徴のCSSフレームワークです。
https://picnicss.com
21. Spectre
ファイル容量: 45KB

本稿の著者が超おすすめするフレームワークです。コンポーネントの多さの割に軽量で真四角なデザインが特徴です。
β版で開発は終わってしまいましたがとても使い勝手が良いです。Vueに対応した「Vectre」もあります。
https://picturepan2.github.io/spectre/

(03-14更新)追加フレームワーク

Carbon Design System

Carbon Design System
Carbon is the design system for IBM web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.

IBMが開発している企業発のオープンソースフレームワークです。おもに自社IBM Cloudのダッシュボードに使われています。CSS/JS以外にもReact,Angular,Vue,Svelteに対応。

コメント

タイトルとURLをコピーしました