ブックマークしておくと便利！ よく見かけるUIコンポーネントやUI要素を実装するCSSのまとめ -CSSnippets
Post on:2025年4月17日
sponsors
Webサイトやスマホアプリでよく見かけるボタンやカード、フォーム、ローディングなど、UIコンポーネントやUI要素を実装するCSSのコード、Tailwind CSSのコード、さらにはReactのコードをまとめたCSSnippetsを紹介します。
これ使うかもと思ったCSSは、自分のスニペットに保存しておくと便利ですね。
CSSnippetsは、Webサイトやスマホアプリでよく見かける270種類以上のUIコンポーネントとUI要素を実装するCSSスニペットのコレクションです。
コードは、主に3種類用意されています。
- CSS
- Tailwind CSS
- React
CSSは必ずありますが、Tailwind CSSとReactはすべてではありません。
利用方法は、簡単です。
UIコンポーネントとUI要素はカテゴリごとに分けられており、まずはボタンを実装するコードを見てみます。
各デモの下部に「CSS」と「Tailwind」のボタンがあるので、それぞれをクリックするとコードが表示されます。まずは「CSS」のボタンをクリックしてみます。
ボタンを実装するCSSのスニペット
「Tailwind」をクリックすると、Tailwind CSSのコードが表示されます。
ボタンを実装するTailwind CSSのスニペット
CSSnippetsには、270種類以上のUIコンポーネントとUI要素を実装するコードが、12個のカテゴリにまとめられています。
box-shadowによるシャドウも実際のシャドウを確認できるので、便利ですね。
フォーム関連のスニペットには、「React」のコードも用意されています。
ハンバーガーメニューもタップしてクローズの×になるさまざまなアニメーションがあります。
ローディングもさまざまなアニメーションが揃っており、画像を使用せずに実装できます。
テキストのアニメーションもたくさん揃っており、すべてCSSアニメーションで実装されています。HTMLのコードからデモのコードを変更できたらいいのにな、と思いました。
sponsors
