はじめに
Webサイト制作において、CSSはなくてはならないものとなっています。
CSSライブラリ（CSSフレームワーク）はCSSの記述量を減らし、効率的にWeb制作を手助けしてくれます。
現在はかなり多くのCSSライブラリが公開されており、目的にあったものを見つけるもの結構大変だと思います。
本記事では、おすすめのCSSライブラリをご紹介します。
おすすめCSSライブラリ20選
Animate.css
聞いたことがある人は多いかと思いますが、CSS3アニメーションのライブラリとしては最も有名だと思われるのが「Animate.css」です。このAnimate.cssはアニメーションを簡単に実装することができるライブラリとなります。
normalize.css
normalize.cssはどのブラウザーで作成したWebページを表示しても、表示が変わらないようにスタイルを同じように表示させるためのCSSです。
reset.cssにもよく似ていますが、違いとしては、元々のデフォルトスタイルを継続して利用するため、reset.cssより軽量となっています。
Hover.css
Hover.cssはm簡単にhoverエフェクトを利用できるようになるCSSライブラリとなります。
100種類以上のmouse hover エフェクトを使えるようになるとても便利なライブラリとなります。
Solved by Flexbox
CSSライブラリではないですが、Flexboxを利用してWebサイトのレイアウトを構築する方法を紹介しています。
Loaders.css
CSSだけで28種類のローディングアニメーションを実装することができるCSSライブラリとなります。
空のdiv要素を入れるだけでアニメーションを変えることができるのでおすすめです。
30 seconds of code
30秒で理解することができるコード集のお役立ちサイトとなります。CSSだけでなく、JavaScriptやPython、Reactなどの情報も掲載されています。CSSについては約90件ほどありました。
SpinKit
シンプルなローディングアニメーションから複雑なアニメーションまで、CSSで実装されたローディングアニメーションを紹介しています。
Country Flags in SVG
世界各国の国旗やアイコンをCSSで表現することができます。
Hamburgers
Hamburgersはクラスを指定するだけで、さまざまなアニメーションに対応したハンバーガーメニューを実装することができるCSSライブラリです。
Hint.css
クラス名を追加するだけで、ツールチップを簡単に実装できるCSSライブラリとなります。
CSS Animation
CSS Animationは、Webサイト制作においてモーションエフェクトの作成に役立つ情報を掲載しているお役立ちサイトとなります。CSSのアニメーションスキルを高めたい方にとってとても役立つ学習サイトになると思います。
CSShake
このライブラリはちょっと面白い系となります。指定した要素を「ぶるぶる」と震えさせることができるCSSライブラリとなります。
CSS Protips
:before, :after, :last-child, :nth-child, :not など疑似classを使った小技、レスポンシブ用のレイアウトやフォントのサイズ指定など、サイト制作に役立つCSSのテクニックを紹介しています。
2022年4月現在では25個のテクニックが紹介されています。
Instagram.css
instagram風の画像を実装することができるCSSライブラリとなります。フィルタリングすることができるので、画像の見た目を編集する際などに役立ちます。
MAGIC
スライドやめくり系、ワイプ、回転などさまざまなエフェクトをclassを追加することで実装することができるCSSライブラリです。
Bootswatch
BootswatchはBootstrapの無料テーマです。16種類のテーマが用意されており、高品質で導入が簡単なのが魅力です。
Charts.css
TableタグとCSSだけでグラフやチャートを実装することができるCSSライブラリです。
さまざまなパターンが用意されているので、目的のチャートの表現が見つかるはずです。
CSS Layout
CSS Layoutは人気のレイアウトやパターンをCSSで作成する方法（テクニック）を紹介しているお役立ちサイトです。
アコーディオンやカードレイアウト、クローズボタンなどをCSSで表現する方法を紹介しています。
Bttn.css
おしゃれなボタンをデザインしたいときに役立つCSSライブラリとなります。
サイズや大きさだけでなく、3D感を出したボタンなどさまざまなボタンを作成することができます。
Pretty Checkbox
おしゃれなチェックボックスやラジオボタンをCSSで作成することができるCSSライブラリとなります。
今までJavascriptで実装していた方も多いかもしれませんが、このライブラリを使えばCSSオンリーで作成することができます。
さいごに
今回は、Webサイトの制作に役立つサイトやCSSライブラリを20選紹介しました。
まだまだ紹介したいものがありますが、今回紹介したものを是非利用していてください。
