Webの進化が止まらない、コピペ可な最新HTMLスニペット40個まとめ

 

この記事では、Webデザインの進化を体感できる、コピー&ペーストで実装OKな最新HTML/CSSスニペットをまとめてご紹介します。

 

一般的に「切れ端、断片」といった意味をもつスニペット(英: Snippet)は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します。

 

2020年に話題となった人気スニペット・ベスト100と合わせて、今後のWebプロジェクトに活用してみてはいかがでしょう。

 

 

Webの進化が止まらない、コピペ可な最新HTMLスニペットまとめ

 

「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。

 

Play CSS Space Invaders

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.

 

 

 

Pokemon Card (threejs)

超立体的でアニメーション付きの人気のカードゲームをモチーフにしたデザイン。カードを左右にドラッグするとさらにすごいことが、。

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.

 

 

 

20.

まるでレインボーコースを走行しているようなキラキラ感満載のカンバスエフェクト。

See the Pen
20.
by ycw (@ycw)
on CodePen.

 

 

 

TroisJS Starfield

ボタンにマウスカーソルを合わせると無限ワープに突入し、クリックで星の色が変化していきます。

See the Pen
TroisJS Starfield
by Kevin Levron (@soju22)
on CodePen.

 

 

 

muson.css

質感まで超リアルなこちらの作品、実はCSSのみでスタイリングされています。

See the Pen
muson.css
by Sarah Fossheim (@fossheim)
on CodePen.

 

 

 

Apple Keynote animation

Apple Keynoteで使われいるロゴアニメーションを再現した作品。

See the Pen
Apple Keynote animation
by Louis Hoebregts (@Mamboleoo)
on CodePen.

 

 

 

Text Hover

text-shadowを複数利用したテキストエフェクト。

See the Pen
Text Hover
by Gayane (@gayane-gasparyan)
on CodePen.

 

 

 

Click to open… (CSS)

ボタンをクリックすると折り紙のようにカード要素を表示します。

See the Pen
Click to open… (CSS)
by Amit Sheen (@amit_sheen)
on CodePen.

 

 

 

QR of Life

表示された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.

 

 

 

Multi Colored Text with CSS

CSSのみでできたマルチカラーのテキストエフェクト、レスポンシブにも対応しています。

See the Pen
Multi Colored Text with CSS
by Shireen Taj (@TajShireen)
on CodePen.

 

 

 

Beat Burger

ハンバーガーの具材でできたドラムセット、キーボードキーを使うかドラムをタップで演奏できます。

See the Pen
Beat Burger
by Steve Gardner (@ste-vg)
on CodePen.

 

 

 

Pokemon Battle (Pure CSS) 🎮✨

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.

 

 

 

The Classic

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.

 

 

 

Neumorphic Brick Phone

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.

 

 

 

3D iMac – CSS Only

こちらも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.

 

 

 

Newton’s CSS cradle

ニュートンの振り子の原理を表現したこちらの作品、なんとCSSのみでできています。

See the Pen
Newton’s CSS cradle
by Amit Sheen (@amit_sheen)
on CodePen.

 

 

 

Upload Button w/Progress

ボタンをクリックするとアップロードの進捗状況が分かりやすいアニメーションで表示されるエフェクト。

See the Pen
Upload Button w/Progress
by Jon Kantner (@jkantner)
on CodePen.

 

 

 

GSAP Enhanced Checkout Button

購入ボタンをクリックするとメッセージが表示されるアクセシビリティ改善テクニック。

See the Pen
GSAP Enhanced Checkout Button
by Ryan Trimble (@mrtrimble)
on CodePen.

 

 

 

Rocket Upload Animation 🚀

クリックするとロケットが打ち上げ発射されるアニメーション付きのボタンエフェクト。

See the Pen
Rocket Upload Animation 🚀
by Jon Kantner (@jkantner)
on CodePen.

 

 

 

CSS Skateboard🛹

かっこよくトリックを決める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.

 

 

 

Style Stage – Comic

コミック漫画のようなデザインスタイルが特長のCSSフレームワーク。

See the Pen
Style Stage – Comic
by Katherine Kato (@kathykato)
on CodePen.

 

 

 

panda button

ボタンをクリックすると、ピクセルアートなかわいいパンダがページ内を縦横無尽に歩き回るアニメーション。

See the Pen
panda button
by Masahito Leo Takeuchi (@Ma5a)
on CodePen.

 

 

 

CSS Color Rings (🐝💣)

CSSで表現された中毒性の高い美しいリングの連続アニメーション。

See the Pen
CSS Color Rings (🐝💣)
by Jhey (@jh3y)
on CodePen.

 

 

 

Image to Cityscape

カラフルな建物が立ち並ぶ空間をマウスドラッグで立体的に見て回ることができる作品。

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.

 

 

 

Low-Poly Sushi

自由に視点を切り替えることができる寿司をモチーフにした作品。

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.

 

 

 

About Us Pop-Out Effect

背景と人物が別々に展開するホバーアニメーション、チーム紹介にアクセントが欲しいときに。

See the Pen
About Us Pop-Out Effect
by Mikael Ainalem (@ainalem)
on CodePen.

 

 

 

Blob study

絶えず形を変えながら光り輝くSF近未来な作品で、細かい調整も自由に行うことができます。

See the Pen
Blob study
by Liam Egan (@shubniggurath)
on CodePen.

 

 

 

Pure CSS Blackjack

カードゲーム、ブラックジャックをプレイできる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.

 

 

 

water bending

周りの風景が反射している、超リアルで立体的な3Dの水ボールが空中に浮かび上がります。

See the Pen
water bending
by halvves (@halvves)
on CodePen.

 

 

 

Parallax Photo Carousel

まるで立体的に回転するように表示されるパララックス画像カルーセル。

See the Pen
Parallax Photo Carousel
by Tom Miller (@creativeocean)
on CodePen.

 

 

この他の注目スニペットもこちらから一緒にいかがでしょう。

2020年にCodepenで話題!コピペ可なHTMLスニペット ベスト100発表

最先端Webテクはこれ!コピペできるHTML/CSSスニペット77個まとめ