この記事では、Webデザインの進化を体感できる、コピー＆ペーストで実装OKな最新HTML／CSSスニペットをまとめてご紹介します。
一般的に「切れ端、断片」といった意味をもつスニペット（英: Snippet）は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します。
2020年に話題となった人気スニペット・ベスト100と合わせて、今後のWebプロジェクトに活用してみてはいかがでしょう。
Webの進化が止まらない、コピペ可な最新HTMLスニペットまとめ
「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。
CSSのみでデザインされたスペースインベーダーゲーム、実際にプレイすることも可能です。
See the Pen
Play CSS Space Invaders by Jon Slater (@jonslater204)
on CodePen.
Rustic Village Map Generator (click for new map)
ページを開くたびにランダムで地図を生成できるツール、絵文字を使ったかわいいデザインが特長です。
See the Pen
Rustic Village Map Generator (click for new map) by Scott Weaver (@sweaver2112)
on CodePen.
超立体的でアニメーション付きの人気のカードゲームをモチーフにしたデザイン。カードを左右にドラッグするとさらにすごいことが、。
See the Pen
Pokemon Card (threejs) by Yugam (@pizza3)
on CodePen.
Great Pyramid of Giza – 3D Model – Pure CSS
世界の七不思議で唯一現存する建造物、ギザの大ピラミッドの解明されている構造をCSSで表現、下のボタンで各種切り替えも可能。
See the Pen
Great Pyramid of Giza – 3D Model – Pure CSS by Josetxu (@josetxu)
on CodePen.
まるでレインボーコースを走行しているようなキラキラ感満載のカンバスエフェクト。
See the Pen
20. by ycw (@ycw)
on CodePen.
ボタンにマウスカーソルを合わせると無限ワープに突入し、クリックで星の色が変化していきます。
See the Pen
TroisJS Starfield by Kevin Levron (@soju22)
on CodePen.
質感まで超リアルなこちらの作品、実はCSSのみでスタイリングされています。
See the Pen
muson.css by Sarah Fossheim (@fossheim)
on CodePen.
Apple Keynoteで使われいるロゴアニメーションを再現した作品。
See the Pen
Apple Keynote animation by Louis Hoebregts (@Mamboleoo)
on CodePen.
text-shadowを複数利用したテキストエフェクト。
See the Pen
Text Hover by Gayane (@gayane-gasparyan)
on CodePen.
ボタンをクリックすると折り紙のようにカード要素を表示します。
See the Pen
Click to open… (CSS) by Amit Sheen (@amit_sheen)
on CodePen.
表示されたQRコードをクリックすると無数のパーティクル粒子のようにキラキラしながら変化。
See the Pen
qr of life by David A. (@meodai)
on CodePen.
Gold CSS Text Effect with Gradients – with transform:scale
まるでフォトショップでデザインしたようなテキストエフェクトは、CSSのみでスタイリングされています。
See the Pen
Gold CSS Text Effect with Gradients – with transform:scale by Mandy Michael (@mandymichael)
on CodePen.
CSSのみでできたマルチカラーのテキストエフェクト、レスポンシブにも対応しています。
See the Pen
Multi Colored Text with CSS by Shireen Taj (@TajShireen)
on CodePen.
ハンバーガーの具材でできたドラムセット、キーボードキーを使うかドラムをタップで演奏できます。
See the Pen
Beat Burger by Steve Gardner (@ste-vg)
on CodePen.
CSSのみでスタイリングされているアート作品。
See the Pen
Pokemon Battle (Pure CSS) 🎮✨ by Elisabeth Diang (@elisabethdiang)
on CodePen.
Directionally Aware CSS Buttons w/ React
マウスの進行方向に合わせてホバーエフェクトが展開するボタンデザイン。
See the Pen
Directionally Aware CSS Buttons w/ React by Jhey (@jh3y)
on CodePen.
CSSのみでスタイリングできるローディングアニメーションがセットに。他のスニペットも合わせると100種類以上。
See the Pen
The Classic by Temani Afif (@t_afif)
on CodePen.
SVG Generative Art – CSG1 [Phases 1]
美しい夕焼けのような色の組み合わせを自動生成、右上の「R」アイコンで更新できます。
See the Pen
SVG Generative Art – CSG1 [Phases 1] by John Wai (@johnwai_)
on CodePen.
CSSでできた古い携帯電話、実際に数字キーを押すとディスプレイに表示されます。HSLをつかったCSS記述テクニックにも注目。
See the Pen
Neumorphic Brick Phone by Jon Kantner (@jkantner)
on CodePen.
React Circular Slider | @keyframers 4.2
円形アニメーションが素敵なコンテンツスライダー。
See the Pen
React Circular Slider | @keyframers 4.2 by @keyframers (@keyframers)
on CodePen.
こちらもCSSのみでデザインされたiMacは立体的に回転しながら、お好みの色を選ぶことも可能。
See the Pen
3D iMac – CSS Only by Adir (@Adir-SL)
on CodePen.
Modern Blog Layout with CSS Grid
CSS Gridプロパティを活用したブログ向けのユニークなレイアウト。
See the Pen
Modern Blog Layout with CSS Grid by Aysenur Turk (@TurkAysenur)
on CodePen.
ニュートンの振り子の原理を表現したこちらの作品、なんとCSSのみでできています。
See the Pen
Newton’s CSS cradle by Amit Sheen (@amit_sheen)
on CodePen.
ボタンをクリックするとアップロードの進捗状況が分かりやすいアニメーションで表示されるエフェクト。
See the Pen
Upload Button w/Progress by Jon Kantner (@jkantner)
on CodePen.
購入ボタンをクリックするとメッセージが表示されるアクセシビリティ改善テクニック。
See the Pen
GSAP Enhanced Checkout Button by Ryan Trimble (@mrtrimble)
on CodePen.
クリックするとロケットが打ち上げ発射されるアニメーション付きのボタンエフェクト。
See the Pen
Rocket Upload Animation 🚀 by Jon Kantner (@jkantner)
on CodePen.
かっこよくトリックを決めるCSSオンリーのスケートボードアニメーション。
See the Pen
CSS Skateboard🛹 by Deren (@deren2525)
on CodePen.
Checkbox group styled as tiles
複数回答可能なチェックボックスのUIデザインテクニック。
See the Pen
Checkbox group styled as tiles by Håvard Brynjulfsen (@havardob)
on CodePen.
コミック漫画のようなデザインスタイルが特長のCSSフレームワーク。
See the Pen
Style Stage – Comic by Katherine Kato (@kathykato)
on CodePen.
ボタンをクリックすると、ピクセルアートなかわいいパンダがページ内を縦横無尽に歩き回るアニメーション。
See the Pen
panda button by Masahito Leo Takeuchi (@Ma5a)
on CodePen.
CSSで表現された中毒性の高い美しいリングの連続アニメーション。
See the Pen
CSS Color Rings (🐝💣) by Jhey (@jh3y)
on CodePen.
カラフルな建物が立ち並ぶ空間をマウスドラッグで立体的に見て回ることができる作品。
See the Pen
Image to Cityscape by Jon Kantner (@jkantner)
on CodePen.
CodePen Home
Hamburger + clip-path
clip-pathプロパティを活用した新しいナビゲーション開閉エフェクト。
See the Pen
Hamburger + clip-path by Mikael Ainalem (@ainalem)
on CodePen.
自由に視点を切り替えることができる寿司をモチーフにした作品。
See the Pen
Low-Poly Sushi by Arden (@aderaaij)
on CodePen.
Isometric Floating Layers (SVG)
施設のフロアマップなどの新しい見せ方ができる立体的なデザイン。
See the Pen
Isometric Floating Layers (SVG) by Yoav Kadosh (@ykadosh)
on CodePen.
背景と人物が別々に展開するホバーアニメーション、チーム紹介にアクセントが欲しいときに。
See the Pen
About Us Pop-Out Effect by Mikael Ainalem (@ainalem)
on CodePen.
絶えず形を変えながら光り輝くSF近未来な作品で、細かい調整も自由に行うことができます。
See the Pen
Blob study by Liam Egan (@shubniggurath)
on CodePen.
カードゲーム、ブラックジャックをプレイできるCSSのみで作成されたゲームスニペット。
See the Pen
Pure CSS Blackjack by Kevin Newcombe (@kevinnewcombe)
on CodePen.
Traffic Run Game with Three.js
他のクルマに当たらないようにレーシングサーキットをドライブするミニゲーム。矢印の上下でスピード調整、ぶつかったときはRでリスタート。
See the Pen
Traffic Run Game with Three.js by Hunor Marton Borbely (@HunorMarton)
on CodePen.
周りの風景が反射している、超リアルで立体的な3Dの水ボールが空中に浮かび上がります。
See the Pen
water bending by halvves (@halvves)
on CodePen.
まるで立体的に回転するように表示されるパララックス画像カルーセル。
See the Pen
Parallax Photo Carousel by Tom Miller (@creativeocean)
on CodePen.
この他の注目スニペットもこちらから一緒にいかがでしょう。
