面白いCSSライブラリ10選＋！

最近サボり気味のkoromoko10です！
今回面白いCSSライブラリというタイトルにしてますが普通に役に立つCSSライブラリも紹介してます！

ということで「ころもこブログ」になってから1発目の投稿です！


てか今思ったけどCSSライブラリというよりも
CSSフレームワークの方が正しい表現かもしれない...

BootstrapはTwitterが開発したフレームワークです！
結構このデザインを採用したサイトよく見ます。

Twitter感は特にそんな感じないのですがクセなく使いやすいかと！

https://getbootstrap.jp/

Tailwindも結構有名なCSSライブラリな気がします。

自分は使ったことそんなにないですが、ドキュメントがだいぶしっかりと

細かいところまで記載されているので使いやすいかと思います！

https://tailwindcss.com/

Primerは確かGitHubが開発しているCSSライブラリだったはずです。

あまりこのデザインを採用しているサイトは見ませんが、

ボタンのデザインなど、まんまGitHubなので見慣れたUIで分かりやすいとは思います。

https://primer.style/css/storybook/

Materializeはちょっと前からGoogleが使用してるマテリアルデザインを実装できるフレームワークです！

Googleとかandroid感強めです

自分は結構好みのデザインですね。
(特にボタンとか押した時のモワーってエフェクト広がるやつが好き)

https://materializecss.com/

MUIもマテリアルデザインフレームワークです！

あんましMaterializeとの違いがわからないです。

https://www.muicss.com/

これもマテリアルデザインのやつらしい。

上のMaterializeは少し古めのマテリアルデザインですが、

このフレームワークは最新のMaterial 3 Expressiveにも対応しています！

それと他のライブラリに比べてかなり軽量らしいです。

自分のサイトでも最近ちょこちょこ使っています。

https://www.beercss.com/

Windows 98風のデザインです！

これはもう見てもらった方が早いと思います

https://jdan.github.io/98.css/

Windows XP風のデザインです！

XPと言えば！のあの背景好きです。

98.cssの派生。

https://botoxparty.github.io/XP.css/

Windows 7風のデザインです！

Windows 7のデザインめちゃくちゃ好きです。

Aeroの表現が美しすぎます。

XP.cssの派生。(つまり98.cssの派生)

https://khang-nd.github.io/7.css/

昔のMac OS風のデザインです！

これも98.cssの派生だと思う。
(少し仕様が違ったりするけど)

https://sakofchit.github.io/system.css/

今のMac OS風のデザインです！

これは今までのフレームワークとは違って独自に一から作ってると思われます。

なので今までのフレームワークのコードをそのまま使いまわすことは難しいかもしれませんが、、、

https://codedgar.github.io/Puppertino/

Windows 10・11風のデザインです！

結構新しめのデザインではありますがフォントがSegoe UIのみ指定されています。

それが原因でiPhoneなどで見ると明朝体になっていることが多いので、別でフォントの指定は必要そうな気がします。

https://windows-ui.github.io/