【CSS】あなたが普段使っているCSSフレームワークはなんですか？

## はじめに
みなさんは、普段どんなCSSフレームワークを使ってますか？
また、使い慣れているという理由で特定のCSSフレームワークを選ぶことが多いのではないのでしょうか？

確かに、新しいCSSフレームワークを勉強して取り入れてと、CSSフレームワークを満遍なく勉強するのは難しいですよね
そうすると、新しいプロジェクトの開発が始まる際に最適なCSSフレームワークを選ぶのは難しいのではなのでしょうか？

そのため、この記事では個人開発や新しいプロジェクトなどでに最適なCSSフレームワークを選べるように、
使いやすいCSSフレームワークをまとめてみました。

ぜひこの記事をストック・いいねして、最適なCSSフレームワークを選べるようにしてください。

## おすすめCSSフレームワーク
### 1. Bootstrap
![スクリーンショット 2022-11-15 3.17.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/4bfb079e-5a3c-f6d5-1f07-5c081d43208f.png)
Bootstrapは、X(Twitter)社が開発した、WebサイトやWebページを効率よく開発するための有名なCSSフレームワークの1つです。

特徴としては、
レスポンシブWebデザインに対応しており、デバイスをまたいだデザインを作成できたり、
汎用性の高さが高くプロジェクトの規模に関係なく使えてり、
HTML・CSS・UI・Designについて詳しくない人でも扱いやすくなっています。

https://getbootstrap.com/

### 2. Materialize CSS
![スクリーンショット 2022-11-15 3.17.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/dc7ebb07-4a23-ac85-e996-5061fe360a88.png)
Materialize CSSは、Googleが提唱しているデザイン設計体系である「マテリアルデザイン」に準拠したCSSフレームワークです。

特徴としては、
Androidなどで使われている「マテリアルデザイン」のUIに対応したサイトやWebアプリを簡単に作成できたり、
利用できるコンポーネントが多く、導入するハードルも低くなっています。

https://materializecss.com/

### 3. Ant Design
![スクリーンショット 2022-11-15 3.18.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/226c3fb4-c091-cb07-ab17-98b17f77f966.png)

Ant Designは、中国のAlibabaが開発したUIフレームワークです。

特徴としては、
Githubのリポジトリーのstar数が多く、世界的に多くの人がつかっているUIフレームワークで、
リリース頻度が高く、機能追加やバグ修正が頻繁に行われています。

https://ant.design/

### 4. Semantic ui
![スクリーンショット 2022-11-15 3.18.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f81ab44c-94f9-5c9b-de6b-f2adf85f15c5.png)

Semantic uiは、2014年からあるプログラマーに優しいCSSフレームワークの1つです。

特徴としては、
デザイン性が高く、バリエーションも豊富で使いやすく、
シンプルなHTML構造で、直感的なJavaScriptなため、学習コストが低く、
テーマ変数が3,000以上用意されているので、いろいろなサイトに対応できます。

https://semantic-ui.com/

### 5. BULMA
![スクリーンショット 2022-11-15 3.18.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/1befa75c-a9fd-c87d-eba8-7065f2e733f2.png)
BULMAは、CSSのみで実装されているフレームワークです。

特徴としては、
CSSのみで実装されているため、自由にJavaScriptフレームワークを組み合わせることができたり、
Flexboxベースのグリッドシステムに対応しており、カスタマイズも自由にできます。

https://bulma.io/

### 6. Foundation
![スクリーンショット 2022-11-15 3.19.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/43174c2a-7999-3bd6-3119-ee103fc2323b.png)
Foundationは、BootStrapに次いで知名度が高く、カスタマイズ性の高いCSSフレームワークです。

特徴としては、
BootStrapよりもカスタマイズ性の高く
セマンティックを意識しているため、きれいなマークアップを作成できるのも特徴です。

https://get.foundation/

### 7. UIkit
![スクリーンショット 2022-11-15 3.19.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/aca335af-a9aa-ac33-a9d1-39ecbb97c4ac.png)
UIkitは、軽量でカスタマイズ性の高いCSSフレームワークです。

特徴としては、
控えめでスマートな印象のデザインで、すっきりした見た目にできたり、
クラス名が `uk-` から始まっているため、他のCSSと優先度勝負することも少ないです。

https://getuikit.com/

### 8. Tachyons
![スクリーンショット 2022-11-15 3.19.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ce25fb85-6127-a080-84ed-2fa64df5700b.png)
Tachyonsは、ユーティリティクラスを組み合わせることでデザインを作り上げるCSSフレームワークです。

特徴としては、
細かなデザイン調整をクラス名だけで完結させることができ、
CSSの記述量が大幅に削減できるため、ファイルサイズが小さいです。


https://tachyons.io/

### 9. Primer
![スクリーンショット 2022-11-15 3.20.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ea04faec-5488-85d8-29c0-c98d80d74b7e.png)
Primerは、Github製のCSSフレームワークで、デザイン面もかなりGithubに近いです。

特徴としては、
ユーティリティクラスや、コンポーネントなどが多く用意されていています。

https://primer.style/css/

### 10. Tailwind UI
![スクリーンショット 2022-11-15 3.20.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b035a0d1-09ea-8b1b-eee7-801a5484a824.png)
Tailwind UIは、「ユーティリティファースト」をコンセプトに開発されたCSSフレームワークです。

特徴としては、
buttonやtableなどの要素に対して、CSSが定義されていなく、
ユーティリティクラスを使って、各要素に対してデザインを当てていきます。

https://tailwindui.com/

### 11. Pure CSS
![スクリーンショット 2022-11-15 3.20.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b03ede89-fb5b-0de7-4d1a-90e12bb465ba.png)

Pure CSSは、最低限の機能で構成された軽量のCSSフレームワークです。

特徴としては、
用意されているコンポーネントの種類が多くなく、最低限の構成のため、自分でデザインをしていくのには適しています。
そのため、CSSやデザインをある程度理解している人にとっては、使いやすいかもしれません。

https://purecss.io/

### 12. Halfmoon
![スクリーンショット 2022-11-15 3.20.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/fea2c140-8cef-4d71-ada4-c8c32966e7c5.png)
Halfmoonは、Bootstrapライクに使えるCSSフレームワークです。

特徴としては、
ダーク モード機能がそなわっていたり、
ダッシュボードがきれいに作れたりします。

https://www.gethalfmoon.com/

## 終わりに

この記事では、この記事では個人開発や新しいプロジェクトなどでに最適なCSSフレームワークを選べるように、使いやすいCSSフレームワークをまとめてみました。

私は普段からこれを使っているといえるCSSフレームワークがあるわけではありません。
いろんなCSSフレームワークをつまみ食いしている感じです。

最近では、`Tailwind UI`が盛り上がっているように見えます。
やっぱり「ユーティリティファースト」はいいですね！

もし、この記事が参考になれば、ぜひストック・いいねして、最適なCSSフレームワークを選ぶときの参考にしてください。
もし、他にもおすすめのCSSフレームワークがあったら、ぜひコメントください。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510