■ はじめに
https://dk521123.hatenablog.com/entry/2018/05/26/005948
で、マテリアル デザイン フレームワーク について調べたが 4年以上経ったので、調べ直してみたら、 CSSに関する2022年次調査「The State of CSS 2022」があったので 最近のCSSフレームワークと共に紹介する。 （こういうサイト、非常に助かる、、、）
目次
【１】The State of CSS 2022 【２】CSSフレームワーク・ランキング 補足：各項目について 【３】各CSSフレームワークの概要 １）Tailwind CSS ２）Pure.css ３）Ant Design ４）Primer CSS ５）Bulma ６）UIKit ７）Semantic UI ８）Materialize CSS ９）Tachyons １０）Halfmoon １１）Bootstrap １２）Foundation 【４】調べてみて
【１】The State of CSS 2022
https://2022.stateofcss.com/en-US/
CSSに関する2022年次調査で、各項目でランキングされている
https://codezine.jp/article/detail/16998
より抜粋 ~~~~~~~~~~~~~~~~ 当調査は、10月1日～11月1日（現地時間）の期間に行われ、 14310名から回答を得ている。 同調査の回答者は、アメリカ（11.7％）がもっとも多く、 ドイツ（5.9％）、フランス（4.2％）がそれに続いた。 ~~~~~~~~~~~~~~~~
【２】CSSフレームワーク・ランキング
2022年だけでなく、2019年からの時系列で分かるので 年々廃れていくものや年々人気がでているものが分かって いいサイトだなっと思った。
https://2022.stateofcss.com/en-US/css-frameworks/
より抜粋
| Rank | Retation | Interest | Usage | Awareness |
|---|---|---|---|---|
| 1 | Tailwind CSS | Tailwind CSS | Bootstrap | Bootstrap |
| 2 | PureCSS | PureCSS | Tailwind CSS | Tailwind CSS |
| 3 | Ant Design | Semantic UI | Materialize CSS | Materialize CSS |
| 4 | Primer | UIKit | Foundation | Semantic UI |
| 5 | Bulma | Bulma | Bulma | Foundation |
| 6 | UIKit | Ant Design | Ant Design | Bulma |
| 7 | Semantic UI | Primer | Semantic UI | Ant Design |
| 8 | Materialize CSS | Halfmoon | PureCSS | PureCSS |
| 9 | Tachyons | Bulma | UIKit | UIKit |
| 10 | Halfmoon | Tachyons | Tachyons | Tachyons |
| 11 | Bootstrap | Foundation | Primer | Primer |
| 12 | Foundation | Bootstrap | Halfmoon | Halfmoon |
補足：各項目について
* 個人的に重要だと思うのは、「a) Retation (保持)」と「c) Usage (使用率)」
a) Retation (保持)
* Retention: would use again / (would use again + would not use again) => 再度使いたいと思うフレームワーク（リピート率的な感じ）
b) Interest (興味)
* Interest: want to learn / (want to learn + not interested) => 今後、勉強したいと思うフレームワーク
c) Usage (使用率)
* Usage: (would use again + would not use again) / total => 使用されているフレームワーク => メジャー率的な感じ。ただし二度と使いたくないものも含む
d) Awareness (気づき)
* Awareness: (total - never heard) / total => 認知率的な感じ
【３】主なCSSフレームワークの概要
１）Tailwind CSS
* どの項目でも高いランクを誇ったCSSフレームワーク * ユーティリティファースト(※)のCSSフレームワーク cf. Tailwind = 追い風、順風
日本語の一般サイト
https://qiita.com/Yuki_Oshima/items/708986d62ea3a773d6a5
https://reffect.co.jp/html/tailwindcss-for-beginners
https://zenn.dev/nbr41to/articles/276f40041ad9fe
※ ユーティリティファーストとは？
* Tailwind CSSが用意しているCSSのユーティリティクラスを 使ってサイトを構築する考え方
Bootstrap との違い
【Bootstrap などのフレームワークの場合】 => 事前に用意したコンポーネント（ボタンなど）が事前に用意されている 【Tailwind CSSの場合】 => ユーティリティクラスを組み合わせて、コンポーネントを作っていくイメージ （この辺、似たり寄ったりするサイトにしたくない人はいいかもしれないが プログラマとしては、そこが面倒くさいって場合もあるから、好み次第、、、）
２）Pure.css
* Yahoo! Inc.が開発したフレームワーク * 「モバイルファースト」がうり => シンプルで軽量。 * Yahoo BSD License
* 以下のページには、いくつかのレイアウト例があるのが嬉しい、、、
日本語の一般サイト
https://web-saku.net/pure-css-responsive-layout/
https://www.design-memo.com/webdeshttps://web-saku.net/pure-css-responsive-layout/ign/purecss
https://kazuhira-r.hatenablog.com/entry/20150719/1437300876
３）Ant Design
* 中国のAlibabaが開発したフレームワーク => 悔しいが、どの上位のフレームワークよりも サイトがしっかりしていて使いやすそうだった印象 * MIT
https://ant.design/
https://github.com/ant-design/ant-design
４）Primer CSS
* GitHubが開発したフレームワーク * MIT
５）Bulma
* Bulma（ブルマ） * CSS only * MIT license
https://bulma.io/
https://github.com/jgthms/bulma
６）UIKit
* MIT license
https://getuikit.com/
https://github.com/uikit/uikit
７）Semantic UI
* デザイン性が高い * MIT license
https://semantic-ui.com/
https://github.com/Semantic-Org/Semantic-UI
８）Materialize CSS
* 以下の関連記事を参照のこと。
Materialize ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2022/12/31/235908
９）Tachyons
* Tachyons（タキオン）
日本語の一般サイト
https://qiita.com/rhistoba/items/56855d1c61cfcc25b7be
１０）Halfmoon
* Bootstrap ライクで使える * MIT
https://www.gethalfmoon.com/docs/introduction/
１１）Bootstrap
* 以下の関連記事を参照のこと。
Bootstrap ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2012/02/05/232346
１２）Foundation
* MIT
【４】調べてみて
このサイトに載っているフレームワークの上位を使うのではなく あくまで候補で軽く触ってみて扱いやすかったら 採用するって感じでいいのかなっと思った。
関連記事
マテリアル デザイン フレームワーク の比較調査
https://dk521123.hatenablog.com/entry/2018/05/26/005948
Materialize ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2022/12/31/235908
