はじめに
みなさんは、普段どんなCSSフレームワークを使ってますか？
また、使い慣れているという理由で特定のCSSフレームワークを選ぶことが多いのではないのでしょうか？
確かに、新しいCSSフレームワークを勉強して取り入れてと、CSSフレームワークを満遍なく勉強するのは難しいですよね
そうすると、新しいプロジェクトの開発が始まる際に最適なCSSフレームワークを選ぶのは難しいのではなのでしょうか？
そのため、この記事では個人開発や新しいプロジェクトなどでに最適なCSSフレームワークを選べるように、
使いやすいCSSフレームワークをまとめてみました。
ぜひこの記事をストック・いいねして、最適なCSSフレームワークを選べるようにしてください。
おすすめCSSフレームワーク
1. Bootstrap
Bootstrapは、X(Twitter)社が開発した、WebサイトやWebページを効率よく開発するための有名なCSSフレームワークの1つです。
特徴としては、
レスポンシブWebデザインに対応しており、デバイスをまたいだデザインを作成できたり、
汎用性の高さが高くプロジェクトの規模に関係なく使えてり、
HTML・CSS・UI・Designについて詳しくない人でも扱いやすくなっています。
2. Materialize CSS
Materialize CSSは、Googleが提唱しているデザイン設計体系である「マテリアルデザイン」に準拠したCSSフレームワークです。
特徴としては、
Androidなどで使われている「マテリアルデザイン」のUIに対応したサイトやWebアプリを簡単に作成できたり、
利用できるコンポーネントが多く、導入するハードルも低くなっています。
3. Ant Design
Ant Designは、中国のAlibabaが開発したUIフレームワークです。
特徴としては、
Githubのリポジトリーのstar数が多く、世界的に多くの人がつかっているUIフレームワークで、
リリース頻度が高く、機能追加やバグ修正が頻繁に行われています。
4. Semantic ui
Semantic uiは、2014年からあるプログラマーに優しいCSSフレームワークの1つです。
特徴としては、
デザイン性が高く、バリエーションも豊富で使いやすく、
シンプルなHTML構造で、直感的なJavaScriptなため、学習コストが低く、
テーマ変数が3,000以上用意されているので、いろいろなサイトに対応できます。
5. BULMA
BULMAは、CSSのみで実装されているフレームワークです。
特徴としては、
CSSのみで実装されているため、自由にJavaScriptフレームワークを組み合わせることができたり、
Flexboxベースのグリッドシステムに対応しており、カスタマイズも自由にできます。
6. Foundation
Foundationは、BootStrapに次いで知名度が高く、カスタマイズ性の高いCSSフレームワークです。
特徴としては、
BootStrapよりもカスタマイズ性の高く
セマンティックを意識しているため、きれいなマークアップを作成できるのも特徴です。
7. UIkit
UIkitは、軽量でカスタマイズ性の高いCSSフレームワークです。
特徴としては、
控えめでスマートな印象のデザインで、すっきりした見た目にできたり、
クラス名が uk- から始まっているため、他のCSSと優先度勝負することも少ないです。
8. Tachyons
Tachyonsは、ユーティリティクラスを組み合わせることでデザインを作り上げるCSSフレームワークです。
特徴としては、
細かなデザイン調整をクラス名だけで完結させることができ、
CSSの記述量が大幅に削減できるため、ファイルサイズが小さいです。
9. Primer
Primerは、Github製のCSSフレームワークで、デザイン面もかなりGithubに近いです。
特徴としては、
ユーティリティクラスや、コンポーネントなどが多く用意されていています。
10. Tailwind UI
Tailwind UIは、「ユーティリティファースト」をコンセプトに開発されたCSSフレームワークです。
特徴としては、
buttonやtableなどの要素に対して、CSSが定義されていなく、
ユーティリティクラスを使って、各要素に対してデザインを当てていきます。
11. Pure CSS
Pure CSSは、最低限の機能で構成された軽量のCSSフレームワークです。
特徴としては、
用意されているコンポーネントの種類が多くなく、最低限の構成のため、自分でデザインをしていくのには適しています。
そのため、CSSやデザインをある程度理解している人にとっては、使いやすいかもしれません。
12. Halfmoon
Halfmoonは、Bootstrapライクに使えるCSSフレームワークです。
特徴としては、
ダーク モード機能がそなわっていたり、
ダッシュボードがきれいに作れたりします。
終わりに
この記事では、この記事では個人開発や新しいプロジェクトなどでに最適なCSSフレームワークを選べるように、使いやすいCSSフレームワークをまとめてみました。
私は普段からこれを使っているといえるCSSフレームワークがあるわけではありません。
いろんなCSSフレームワークをつまみ食いしている感じです。
最近では、Tailwind UIが盛り上がっているように見えます。
やっぱり「ユーティリティファースト」はいいですね！
もし、この記事が参考になれば、ぜひストック・いいねして、最適なCSSフレームワークを選ぶときの参考にしてください。
もし、他にもおすすめのCSSフレームワークがあったら、ぜひコメントください。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。