この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。
一般的に「切れ端、断片」といった意味をもつスニペット（英: Snippet）は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します。
これらのスニペットを利用すれば、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のウェブ制作に活用してみてはいかがでしょう。
ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。
コンテンツ目次
- 1. テキストエフェクト系
- 2. イメージスライダー系
- 3. ナビゲーションメニュー系ト
- 4. ローディングアニメーション系
- 5. ページレイアウト系
- 6. ボタンエフェクト系
- 7. 便利、面白系スニペット
「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。
最先端Webテクはこれ！コピペできるHTML/CSSスニペット77個まとめ
テキストエフェクト
LIGHT Flickering Animation (Vanilla CSS)
チカチカとライトが光る様子をCSSアニメーションで再現したテキストエフェクト。
See the Pen
LIGHT Flickering Animation (Vanilla CSS) by Prathamesh Koshti (@prathameshkoshti)
on CodePen.
フライ返しでホットケーキを返すような動きをCSSアニメーションで再現。
See the Pen
CSS Flipping Text 🍳 by Jhey (@jh3y)
on CodePen.
カスタマイズできるニューモーフィズムをつかったテキストエフェクト。
See the Pen
Editable Neumorphic Text by Adam Kuhn (@cobra_winfrey)
on CodePen.
くるくると回転しながら変化する文字テキストアニメーション。
See the Pen
Rolling Text Hover Animation by Cojea Gabriel (@gabrielcojea)
on CodePen.
文字を動かしてアニメーションに仕上げる「キネティック・タイポグラフィ」を、立体感たっぷりな３Dデザインで表現。
See the Pen
3D Kinetic Typography ✨ by Anna the Scavenger (@ScavengerFrontend)
on CodePen.
画面がチラつくグリッチエフェクトをスクリーン全体と文字テキストに適用しています。
See the Pen
glitch effect — week 9/52 by Mert Cukuren (@knyttneve)
on CodePen.
フォントの新しい技術Variableフォントを利用することで、まるで呼吸をしているようななめらかなフォントアニメーションを作成できます。
See the Pen
Corgo’s with Jason by Mandy Michael (@mandymichael)
on CodePen.
文字テキストにマウスカーソルを合わせると、スポットライトのようにサークル状に背景色が変化します。
See the Pen
Spotlight Cursor Text Screen by Caroline Artz (@carolineartz)
on CodePen.
文字テキストのクリックに合わせて伸縮ストレッチするエフェクト。
See the Pen
Slice link text by Mattia Astorino (@equinusocio)
on CodePen.
レインボーカラーに揺らめくレイヤー状に重なったテキストエフェクト。
See the Pen
VIBES by Sikriti Dakua (@dev_loop)
on CodePen.
映画のタイトルシーンをCSSで再現したテキストエフェクト。
See the Pen
FlyIn Movie Title by Vuild (@vuild)
on CodePen.
ブクブクと下から泡が出ているCSSテキストエフェクト。
See the Pen
Animated – SVG Bubbles by Steven Roberts (@matchboxhero)
on CodePen.
SVGパスに沿って文字テキストがアニメーション表示され、文字色も変化していきます。
See the Pen
Typo-coaster by Michelle Barker (@michellebarker)
on CodePen.
イメージスライダー
画像をスワイプすると、海の中を漂っているようなユラユラとしたページ切り替えが特長のスライダー。
See the Pen
Gooey edge – @gskinner by CodePen (@codepen)
on CodePen.
スライダーにマウスカーソルが触れることでグリッチエフェクトが誘発されるPixiJSとGSAPをベースとしたWebGLスライダー。
See the Pen
rgbKineticSlider – Demo 3 by Hadrien Mongouachon (@hmongouachon)
on CodePen.
上記スライダーは3つのデモが用意されており、こちらが2つ目。
See the Pen
rgbKineticSlider – Demo 1 by Hadrien Mongouachon (@hmongouachon)
on CodePen.
要素ごとにアニメーション展開するポップなスライダー。Learn Moreをクリックすると詳細が表示されます。
See the Pen
CSS Reveal Slider by Adam Kuhn (@cobra_winfrey)
on CodePen.
Circle Swap Photo Gallery [React & GSAP]
矢印をクリックすると、サークル状に円を描きながら画像が切り替わります。
See the Pen
Circle Swap Photo Gallery [React & GSAP] by Steve Gardner (@ste-vg)
on CodePen.
WebGL enhanced javascript drag slider (performance improved – bonus)
画像がモノクロになりながら切り替わる、ドラッグ対応のWebGLスライダー。
See the Pen
WebGL enhanced javascript drag slider (performance improved – bonus) by Martin Laxenaire (@martinlaxenaire)
on CodePen.
Infinite draggable webgl slider.
表示された画像を左右にドラッグすると、画像が乱れたようなエフェクト付きで切り替わります。
See the Pen
Infinite draggable webgl slider. by jesper landberg (@ReGGae)
on CodePen.
How to Build a Simple Slideshow With the CSS Checkbox Hack
CSSのチェックボックスを利用したシンプルなスライダーのHTMLスニペット。
See the Pen
How to Build a Simple Slideshow With the CSS Checkbox Hack by Envato Tuts+ (@tutsplus)
on CodePen.
Image transition (Houdini, Blink only)
CSSマスキングを利用した画像の切り替え、遷移ができるエフェクト。
See the Pen
Image transition (Houdini, Blink only) by Ana Tudor (@thebabydino)
on CodePen.
ナビゲーションメニュー
青いボタンをクリックするとナビメニューのサイズが伸縮、ナイトモードも装備したHTMLスニペット。
See the Pen
Sidebar by Ryan (@ryanparag)
on CodePen.
サークルのレイヤー状に展開するナビゲーションメニュー。個性のあるスタイルが欲しいときに。
See the Pen
Rings Navigation Concept by Bennett Feely (@bennettfeely)
on CodePen.
スパゲティの麺をモチーフにした、スライド式のナビゲーションメニュー。
See the Pen
Pasta Menu (GSAP Animation) by Olivia Ng (@oliviale)
on CodePen.
CodePen Home
E-Commerce Navigation Bar
マウスホバーしたカテゴリごとに画像が切り替わる、デスクトップ向けナビゲーションメニュー。
See the Pen
E-Commerce Navigation Bar by Olivia Ng (@oliviale)
on CodePen.
CodePen Home
Netflix’s Mobile Navigation
動画配信サービス「ネットフリックス」のモバイル向けナビゲーションメニューを再現。ブランドカラーを意識しレイヤー状に展開。
See the Pen
Netflix’s Mobile Navigation by Florin Pop (@FlorinPop17)
on CodePen.
モバイル向けナビメニューを想定したスニペットで、サークル状のカテゴリメニューが出現します。
See the Pen
Jelly Menu by Jorge (@dok)
on CodePen.
Sticky Navigation Menu With Smooth Scrolling
スクロールをはじめると、ページ上に固定されるナビメニューをJSで表現したスニペット。
See the Pen
Sticky Navigation Menu With Smooth Scrolling by Praveen Bisht (@prvnbist)
on CodePen.
ローディングアニメーション
Newton’s Sun & Moon w/ GSAP ☀️🌕
ニュートンの慣性の法則を利用したアニメーションは、左右に移動することで天気と背景色が変化します。
See the Pen
Newton’s Sun & Moon w/ GSAP ☀️🌕 by Jhey (@jh3y)
on CodePen.
液体がブクブクと泡をたてて流れているようなアニメーションが特長。
See the Pen
Droplet Loader by Chris Gannon (@chrisgannon)
on CodePen.
振り子の動きに合わせて、ライトが瞬間的に光らせるテクニック。
See the Pen
Newton’s Light Bulbs 💡😎 by Jhey (@jh3y)
on CodePen.
リング状に文字が立体的に回転するローディングアクション。
See the Pen
Text Ring Loading Animation by Jon Kantner (@jkantner)
on CodePen.
三角形のみをつかったシンプルな動きのローディングアニメーション12個をコレクションしています。
See the Pen
Dual Triangle Preloaders by Jon Kantner (@jkantner)
on CodePen.
リキッド状に変化しながらサークルを描くローディング向けアニメーション。
See the Pen
Liquid loader by Mikael Ainalem (@ainalem)
on CodePen.
CodePen Home
Pure CSS Koi Fish
CSSのみでスタイリングされたとは思えないほど優雅に泳ぐ、鯉のローディングアニメーション。
See the Pen
Pure CSS Koi Fish by Adir (@Adir-SL)
on CodePen.
本をペラペラとめくる様子をCSSアニメーションのみで再現しています。
See the Pen
Pure CSS Book Loader by Aaron Iker (@aaroniker)
on CodePen.
See the Pen
Loader turbulence by Damien Montastier (@damienmontastier)
on CodePen.
ページレイアウト
ページを斜めにしたダイアゴナル・レイアウトを実現するテクニックを紹介したスニペット。
See the Pen
Diagonal Layouts in 2020 by Nils Binder (@enbee81)
on CodePen.
Responsive Tables #2.5: Flexbox
レスポンシブに対応した表テーブルの新しい組み方。
See the Pen
Responsive Tables #2.5: Flexbox by Bradley Taunt (@bradleytaunt)
on CodePen.
CodePen Home
Adaptive Photo Layout
Flexboxプロパティを利用することで、指定する範囲に写真をずらりと敷き詰めることが可能です。
See the Pen
Adaptive Photo Layout by Tim Van Damme (@maxvoltar)
on CodePen.
ボタンエフェクト
マウスホバーで太陽が昇るレトロ系マウスエフェクト。
See the Pen
Sunset button by zeynep (@zeynepozdem)
on CodePen.
クリックで指紋認証プロセスに進みます。
See the Pen
UI // Payment Approval by Cosimo Scarpa (@coswise)
on CodePen.
フライトを予約「Book Flight」ボタンをクリックすると、実際に飛行機が飛び立つユニークなエフェクト。
See the Pen
Book Flight by Álex S. Lérida (@lerida)
on CodePen.
ボタンを押すと爆発してしまうエフェクト。
See the Pen
Explosive Button 💥 by Jon Kantner (@jkantner)
on CodePen.
ビールで乾杯するいいね！ボタン。
See the Pen
Beer Like Button by Aaron Iker (@aaroniker)
on CodePen.
ファイルの圧縮を実行しているのがひと目で分かります。
See the Pen
Compress files by Aaron Iker (@aaroniker)
on CodePen.
ボタンを押すたびに紙吹雪でお祝いしてくれるエフェクト。
See the Pen
Confirm confetti button by Aaron Iker (@aaroniker)
on CodePen.
注文ボタンをクリックすると、Tシャツを畳んで、大砲バズーカで発射すれば注文完了。
See the Pen
T-Shirt Cannon Button 🚀 by Jhey (@jh3y)
on CodePen.
ボタンをおそうとするとグニャッと曲がるエフェクト。
See the Pen
Button bending hover by Aaron Iker (@aaroniker)
on CodePen.
ボタンを連打すると、バーベルが少しずつ上っていき、アクションを完了させることができます。
See the Pen
Smash to submit button by Aaron Iker (@aaroniker)
on CodePen.
ユニークなボタンエフェクト3種類を揃えたお手軽スニペット。
See the Pen
Playful button hover effects by Aaron Iker (@aaroniker)
on CodePen.
便利・面白
Pure CSS Responsive Browser Template
CSSのみでブラウザ画面を再現しており、レスポンシブ対応している点もポイント。
See the Pen
Pure CSS Responsive Browser Template by Adam Marsden (@AdamMarsden)
on CodePen.
Exciting Multi-line Highlights
複数行にまたがるリンクや文章のハイライトエフェクトをまとめたライブラリ。
See the Pen
Exciting Multi-line Highlights by Manan Tank ⚡ (@MananTank)
on CodePen.
Hello Spring – CSS colouring page
CSSをつかった塗り絵を楽しむことができるテンプレート。
See the Pen
Hello Spring – CSS colouring page by Lubna (@Lubna)
on CodePen.
マウスを動かす方向に応じてキャラクターの視線と表情が変わります。
See the Pen
Homer’s face Animated /w GSAP by Kasper De Bruyne (@kdbkapsere)
on CodePen.
ピタゴラスイッチのように連続性のあるアニメーションを作成したスニペット。
See the Pen
Rube Goldberg Machine by Paul Hebert (@phebert)
on CodePen.
Responsive Africa Map – API country info
表示された地図上をクリックすると、国名や首都、貨幣、国旗などを確認できます。
See the Pen
Responsive Africa Map – API country info by ktich (@ktich)
on CodePen.
41| Low Poly 🐑Sheepfold by three.js
See the Pen
41| Low Poly 🐑Sheepfold by three.js by Yiting Liu (@yitliu)
on CodePen.
CSSのみでスタイリングできる、フッター向けのユニークなアニメーションテクニック。
See the Pen
CSS Goey footer by Zed Dash (@z-)
on CodePen.
カードにマウスホバーすると、レインボーカラーで点滅するCSSアニメーションエフェクト。
See the Pen
Stacked Rainbow Cards by freefrontend.com (@cssparadise)
on CodePen.
How to Build Simple Stack Hover Effects With CSS
紙を数枚重ねた様子を表現できるホバーエフェクトで、上下左右さまざまな方向に対応したスニペットがそれぞれ収録されています。
See the Pen
How to Build Simple Stack Hover Effects With CSS by Envato Tuts+ (@tutsplus)
on CodePen.
@keyframeを設定することで、ボヨンと弾んだようなエフェクトを実現できます。
See the Pen
Spring/Bounce Hover Effect by freefrontend.com (@cssparadise)
on CodePen.
さまざまなシチュエーションを考えた面白トグル用スタイリング8種類。
See the Pen
Toggles by Olivia Ng (@oliviale)
on CodePen.
ダークモードとライトモードをトグルで切り替えることができ、ユニークなアニメーションにも注目。
See the Pen
Night & Day v2 by Steve Gardner (@ste-vg)
on CodePen.
Pure CSS Landscape – An Evening in Southwold
写真のような美しいリアルな夕日をCSSスタイリングのみで完成させた作品。
See the Pen
Pure CSS Landscape – An Evening in Southwold by Ben Evans (@ivorjetski)
on CodePen.
こちらもCSSのみで描かれたレトロなマッキントッシュ。
See the Pen
macintosh.css by Sarah Fossheim (@fossheim)
on CodePen.
CSSスタイリングのみで表現されたキャラクターに、アニメーションも追加されたインタラクティブな作品。
See the Pen
Work Hard by Ricardo Oliva Alonso (@ricardoolivaalonso)
on CodePen.
Search Interaction / Border animation
ボタンをクリックすることで、入力フォームが点滅を開始します。
See the Pen
Search Interaction / Border animation by Valery Alikin (@AlikinVV)
on CodePen.
See the Pen
Calm Spikes by Anna the Scavenger (@ScavengerFrontend)
on CodePen.
水面が揺れる様子をウェブで忠実に再現し、変化に合わせて美しいグラデーションが浮かび上がります。
See the Pen
Liquid Grid by Kevin Levron (@soju22)
on CodePen.
音楽とシンクロしながらエレクトロな渓谷を進んでいく3Dエフェクト。
See the Pen
[3D] Synth Canyon Run by Chris Johnson (@jhnsnc)
on CodePen.
キラキラに輝く無数の星のあいだを進んでいくSFアニメーション。
See the Pen
Starfields GLShader by Paul J Karlik (@pjkarlik)
on CodePen.
CSSフィルタを組み合わせることで、アート性の高い画像ブレンドを試すことができるスニペット。
See the Pen
Turbulence by Janxalot (@janxalot)
on CodePen.
世界的に有名なグラフィティアーティストBanskyをモチーフにしたインタラクティブなウェブ体験を提供。
See the Pen
Banksy – Valentine’s Day by LoFi (@loficodes)
on CodePen.
表示されているいる文章の一部を選択すると、切り取りやコピー、ペーストなどのアクションを続けることができます。
See the Pen
Cut/Copy/Paste by Adam Kuhn (@cobra_winfrey)
on CodePen.
CSSアニメーションが特長のフィードバック向けのかわいいリアクション。
See the Pen
Feedback Reactions by Aaron Iker (@aaroniker)
on CodePen.
