KUMONOSU|コピペで使えるCSS・JSのアニメーションデザイン
Friendly
Neighborhood
Cascading Style Sheets & Animations
モーションやレイアウトテクニック、グラデーション、インタラクティブなアニメーションなど
コピペするだけで使えるCSS / JSのコードを分かりやすく紹介します。
よく見られているCSS



CSSだけで作る、円を描くように並ぶスライド画像ギャラリー
最新のCSS



CSSとJSで作る、世界の時間を円で見る回転時計


CSSだけで作る、ホバーするとふわっと拡大する画像の動き


CSSだけで作る、ホバーで「2026」に切り替わるお正月デザイン


CSSとJSで作る、ドラッグとスクロールで巡るギャラリースライダー


CSSだけで作る、立体的に回転する奥行きのある全画面スライダー


CSSとJSで作る、反射がきれいなガラスの輪っか



CSSだけで作る、円を描くように並ぶスライド画像ギャラリー


cssだけで作る、ホバーに連動して扇状に広がるカードレイアウト


JSで作るマウスに反応して揺らぐリキッドグラデーション


JS(WebGL)で作るガラスの中に浮かぶ写真の3Dクリスタル


JSで作るみんなで楽しく自由に回せるルービックキューブ


CSSで作るホバーで円が展開するアニメーションボタン
FRIENDLY NEIGHBORHOOD FRIENDLY NEIGHBORHOOD FRIENDLY NEIG
With great power comes great responsibility With great pow


特集&まとめ


解説
CSSの@layerとは?優先順位が一瞬で分かるカスケードレイヤー完全解説【初心者向け】


特集
CSS・JavaScriptで実装できる光るUIのネオンまとめ


ナレッジ・ノウハウ
CSSを勉強するときにおすすめの本その1|これだけで基本がしっかり身につくHTML/CSS&Webデザイン
なぜKUMONOSU?
KUMONOSUは、
CSSやJavaScriptを使ったアニメーションやレイアウトデザインを、
実際に試してみたサイトです。
「どんな見た目・どんな動きになるのか」を実際に確認でき、
デモとコード付きのためコピペ可能です。
海外の最新トレンドやモダンなCSSを中心に、
Webデザイナーやフロントエンド制作者の初心者からベテランまで、
制作の中で使えそうな表現を厳選して掲載しています。
また、カテゴリやパーツごとに整理しているため、
アイデア探しやデザインの参考としても使いやすく、
CSS・JSを探したいときに便利なサイトです。
掲載している記事数は、KUMONOSUが扱う表現の幅を示す指標であり、
デザインの参考探しにも実装のヒント探しにも役立ちます。
KUMONOSUの本日のアクセス数は、リアルタイムの指標です。、
デザイナーやフロントエジニアの新しいテクニックへの関心度がわかります。
KUMONOSUの総アクセス数は、信頼性の指標です。、
これまでの全てのアクセス数は、デザイナーやフロントエンジニアから継続的に支持されている証拠にもなります。
