LoginSignup
11

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

Last updated at Posted at 2022-11-21

はじめに

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

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

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

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

おすすめCSSフレームワーク

1. Bootstrap

スクリーンショット 2022-11-15 3.17.13.png
Bootstrapは、X(Twitter)社が開発した、WebサイトやWebページを効率よく開発するための有名なCSSフレームワークの1つです。

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

2. Materialize CSS

スクリーンショット 2022-11-15 3.17.47.png
Materialize CSSは、Googleが提唱しているデザイン設計体系である「マテリアルデザイン」に準拠したCSSフレームワークです。

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

3. Ant Design

スクリーンショット 2022-11-15 3.18.03.png

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

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

4. Semantic ui

スクリーンショット 2022-11-15 3.18.33.png

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

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

5. BULMA

スクリーンショット 2022-11-15 3.18.54.png
BULMAは、CSSのみで実装されているフレームワークです。

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

6. Foundation

スクリーンショット 2022-11-15 3.19.11.png
Foundationは、BootStrapに次いで知名度が高く、カスタマイズ性の高いCSSフレームワークです。

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

7. UIkit

スクリーンショット 2022-11-15 3.19.22.png
UIkitは、軽量でカスタマイズ性の高いCSSフレームワークです。

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

8. Tachyons

スクリーンショット 2022-11-15 3.19.59.png
Tachyonsは、ユーティリティクラスを組み合わせることでデザインを作り上げるCSSフレームワークです。

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

9. Primer

スクリーンショット 2022-11-15 3.20.11.png
Primerは、Github製のCSSフレームワークで、デザイン面もかなりGithubに近いです。

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

10. Tailwind UI

スクリーンショット 2022-11-15 3.20.22.png
Tailwind UIは、「ユーティリティファースト」をコンセプトに開発されたCSSフレームワークです。

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

11. Pure CSS

スクリーンショット 2022-11-15 3.20.33.png

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

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

12. Halfmoon

スクリーンショット 2022-11-15 3.20.44.png
Halfmoonは、Bootstrapライクに使えるCSSフレームワークです。

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

終わりに

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

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

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

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


最後まで読んでくださってありがとうございます!
さらに詳しい内容を聞きたい方は、Devトークで直接お話しましょう!

X(Twitter)でも情報を発信しているので、良かったらフォローお願いします!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
11