WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >CSS

今回はWebサイトやアプリでよく見かけるボタンやカード、フォーム、ローディングなど、UIコンポーネントや要素を実装するためのCSSのコードをまとめて閲覧することができるCSSnippetsのご紹介です。
デザインやマークアップでよく使うものや、今後使いそう！というものはスニペット登録しておくとすぐに引き出せて便利なので、ブックマークしておいて損はないです！

利用方法について

CSSnippetsは、270種類以上のUIコンポーネントとUI要素を実装するCSSスニペット集です。

コードは、主に3種類用意されています。

• CSS
• Tailwind CSS
• React

CSSは必ずありますが、Tailwind CSSとReactはすべてではありませんのでご注意ください！

利用方法は簡単で、カテゴリごとに分けられているので目的のカテゴリをクリックします。まずはボタンを実装するコードを見てみましょう。

スクロールしていくと様々なボタンデザインが出てくるので、目的にあったものを探していきましょう。
またホバー時の動きについては、ボタンの上にカーソルを持っていくと確認ができます。

各デモの下部に【CSS】と【Tailwind】のボタンがあるので、それぞれをクリックするとコードが表示されます。

上記のようにポップアップが表示されコードをコピーすることができるので、そのままソースコードに貼り付けることもスニペットに登録することもできますね。

以下は個人的によく使用するおすすめをピックアップしました！

チェックボックスデザイン

よく使うチェックマークもデフォルトのままではなく、デザインをいれることで使いやすさは格段に上がります。ハート（いいね）マークも実装できるのが良いですね！

フォームデザイン

入力フォームはユーザー視点の使いやすさが実装されていないと、すぐにページ離脱へと繋がってしまいます。Webサイトの雰囲気に合うものを参考にしてみてください。

ハンバーガーデザイン

スマホからページを閲覧する人が増え、ハンバーガーメニューもすっかり浸透しました。アニメーションによる動きや、角があるかないかでも使いやすさに影響してくるのでクリックして動きも確認してみてください。

まとめ

よく使用するコードは引き出しからスッと出せるだけでも効率的ですし、普段使ったことのないデザインやアニメーションをカテゴリからすぐに探せるのも便利ですね。
ぜひお気に入りのコードは登録して制作に使用してみてください！