🎨
コピペだけでデザインを再現できるCSSスニペットサイト4選
フロントエンドエンジニアとして私が業務・プライベート関係なく利用しているCSSスニペットサイトを備忘録としてまとめておきます。
(多く載せすぎてもアレなので利用頻度の高いサイトのみに厳選しています。)
CSS Stock
個人的に一番お世話になっているサイトです。
特徴としては
- 各パーツのデザイン調整ができ、自分流にカスタマイズしてから取り込める
- スニペットの掲載数が多い
- シンプルかつおしゃれなデザイン
などが挙げられます。
一からパーツを作れるジェネレーター的なサイトだと「自分でコーディングした方が早くね？」となることが多々ですが、このサイトの場合はある程度大枠が提示されていてその細かい部分をカスタマイズできるタイプなため、楽をしたい方にはうってつけではないでしょうか。
copypet
「CSS コピペ」などと検索するとかなりの確率でヒットするサイト。ご存知の方も多いのではないでしょうか。
- パーツ数・バリエーション共に豊富
- 難易度がニャン易度で把握できるので初学者にも優しい
- ヌコが可愛い
加えて、他のサイトと比べてもhoverアニメーションのような動きのあるパーツが多い印象です。
中でもシェアボタンの記事は個人的にイチオシ。
Universe.io
こちら海外のユーザー投稿型スニペットサイトです。
- 自分でスニペットを投稿できる
- デザインが多彩でおしゃれ
- Web上でコードを編集できる
特にボタンのパーツに関しては掲載数も多く、ただ眺めているだけでも楽しいという。
スニペットの投稿となると今はCodePenが主流かもしれませんが、こちらに投稿してみるのも面白いかもしれません。
Free Frontend
最後も海外のサイト。
- とにかくおしゃれ
- イカした3Dなデザイン多め
真似するだけで自分のセンスが上がったと錯覚してしまうほど素敵なサイトです。ReactやVueを使ったデザインの例も掲載されているのも有難いですね。
Discussion