(Translated by https://www.hiragana.jp/)
ブックマークしておくと便利! よく見かけるUIコンポーネントやUI要素を実装するCSSのまとめ -CSSnippets | コリス

ブックマークしておくと便利べんり! よくかけるUIコンポーネントやUI要素ようそ実装じっそうするCSSのまとめ -CSSnippets

Webサイトやスマホアプリでよくかけるボタンやカード、フォーム、ローディングなど、UIコンポーネントやUI要素ようそ実装じっそうするCSSのコード、Tailwind CSSのコード、さらにはReactのコードをまとめたCSSnippetsを紹介しょうかいします。

これ使つかうかもとおもったCSSは、自分じぶんのスニペットに保存ほぞんしておくと便利べんりですね。

Webサイトやスマホアプリでよく見かけるUIコンポーネントとUI要素を実装するCSSスニペットのコレクション

CSSnippets

CSSnippetsは、Webサイトやスマホアプリでよくかける270種類しゅるい以上いじょうのUIコンポーネントとUI要素ようそ実装じっそうするCSSスニペットのコレクションです。

コードは、おもに3種類しゅるい用意よういされています。

  • CSS
  • Tailwind CSS
  • React

CSSはかならずありますが、Tailwind CSSとReactはすべてではありません。

サイトのキャプチャ

CSSnippets

利用りよう方法ほうほうは、簡単かんたんです。
UIコンポーネントとUI要素ようそはカテゴリごとにけられており、まずはボタンを実装じっそうするコードをてみます。

サイトのキャプチャ

Buttons -CSSnippets

かくデモの下部かぶに「CSS」と「Tailwind」のボタンがあるので、それぞれをクリックするとコードが表示ひょうじされます。まずは「CSS」のボタンをクリックしてみます。

サイトのキャプチャ

ボタンを実装じっそうするCSSのスニペット

「Tailwind」をクリックすると、Tailwind CSSのコードが表示ひょうじされます。

サイトのキャプチャ

ボタンを実装じっそうするTailwind CSSのスニペット

CSSnippetsには、270種類しゅるい以上いじょうのUIコンポーネントとUI要素ようそ実装じっそうするコードが、12のカテゴリにまとめられています。

サイトのキャプチャ

Cards -CSSnippets

box-shadowによるシャドウも実際じっさいのシャドウを確認かくにんできるので、便利べんりですね。

サイトのキャプチャ

Box Shadows -CSSnippets

フォーム関連かんれんのスニペットには、「React」のコードも用意よういされています。

サイトのキャプチャ

Forms -CSSnippets

ハンバーガーメニューもタップしてクローズの×になるさまざまなアニメーションがあります。

サイトのキャプチャ

Hamburgers -CSSnippets

ローディングもさまざまなアニメーションがそろっており、画像がぞう使用しようせずに実装じっそうできます。

サイトのキャプチャ

Loading Spinners -CSSnippets

テキストのアニメーションもたくさんそろっており、すべてCSSアニメーションで実装じっそうされています。HTMLのコードからデモのコードを変更へんこうできたらいいのにな、とおもいました。

サイトのキャプチャ

Text Animations -CSSnippets

sponsors

top of page

©2025 coliss