Advertisement

latest-snippet-2020april-1

 

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

 

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

 

これらのスニペットを利用すれば、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のウェブ制作に活用してみてはいかがでしょう。

 

ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。

 

コンテンツ目次

「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 Flipping Text 🍳

フライ返しでホットケーキを返すような動きをCSSアニメーションで再現。

See the Pen
CSS Flipping Text 🍳
by Jhey (@jh3y)
on CodePen.

 

 

 

Editable Neumorphic Text

カスタマイズできるニューモーフィズムをつかったテキストエフェクト。

See the Pen
Editable Neumorphic Text
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

 

Rolling Text Hover Animation

くるくると回転しながら変化する文字テキストアニメーション。

See the Pen
Rolling Text Hover Animation
by Cojea Gabriel (@gabrielcojea)
on CodePen.

 

 

 

3D Kinetic Typography ✨

文字を動かしてアニメーションに仕上げる「キネティック・タイポグラフィ」を、立体感たっぷりな3Dデザインで表現。

See the Pen
3D Kinetic Typography ✨
by Anna the Scavenger (@ScavengerFrontend)
on CodePen.

 

 

 

glitch effect — week 9/52

画面がチラつくグリッチエフェクトをスクリーン全体と文字テキストに適用しています。

See the Pen
glitch effect — week 9/52
by Mert Cukuren (@knyttneve)
on CodePen.

 

 

 

Corgo’s with Jason

フォントの新しい技術Variableフォントを利用することで、まるで呼吸をしているようななめらかなフォントアニメーションを作成できます。

See the Pen
Corgo’s with Jason
by Mandy Michael (@mandymichael)
on CodePen.

 

 

 

Spotlight Cursor Text Screen

文字テキストにマウスカーソルを合わせると、スポットライトのようにサークル状に背景色が変化します。

See the Pen
Spotlight Cursor Text Screen
by Caroline Artz (@carolineartz)
on CodePen.

 

 

 

Slice link text

文字テキストのクリックに合わせて伸縮ストレッチするエフェクト。

See the Pen
Slice link text
by Mattia Astorino (@equinusocio)
on CodePen.

 

 

 

VIBES

レインボーカラーに揺らめくレイヤー状に重なったテキストエフェクト。

See the Pen
VIBES
by Sikriti Dakua (@dev_loop)
on CodePen.

 

 

 

FlyIn Movie Title

映画のタイトルシーンをCSSで再現したテキストエフェクト。

See the Pen
FlyIn Movie Title
by Vuild (@vuild)
on CodePen.

 

 

 

Animated – SVG Bubbles

ブクブクと下から泡が出ているCSSテキストエフェクト。

See the Pen
Animated – SVG Bubbles
by Steven Roberts (@matchboxhero)
on CodePen.

 

 

 

Typo-coaster

SVGパスに沿って文字テキストがアニメーション表示され、文字色も変化していきます。

See the Pen
Typo-coaster
by Michelle Barker (@michellebarker)
on CodePen.

 

 

 

イメージスライダー

Gooey edge – @gskinner

画像をスワイプすると、海の中を漂っているようなユラユラとしたページ切り替えが特長のスライダー。

See the Pen
Gooey edge – @gskinner
by CodePen (@codepen)
on CodePen.

 

 

 

rgbKineticSlider – Demo 3

スライダーにマウスカーソルが触れることでグリッチエフェクトが誘発されるPixiJSとGSAPをベースとしたWebGLスライダー。

See the Pen
rgbKineticSlider – Demo 3
by Hadrien Mongouachon (@hmongouachon)
on CodePen.

 

 

 

rgbKineticSlider – Demo 1

上記スライダーは3つのデモが用意されており、こちらが2つ目。

See the Pen
rgbKineticSlider – Demo 1
by Hadrien Mongouachon (@hmongouachon)
on CodePen.

 

 

 

CSS Reveal Slider

要素ごとにアニメーション展開するポップなスライダー。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.

 

 

 

ナビゲーションメニュー

Sidebar

青いボタンをクリックするとナビメニューのサイズが伸縮、ナイトモードも装備したHTMLスニペット。

See the Pen
Sidebar
by Ryan (@ryanparag)
on CodePen.

 

 

 

Rings Navigation Concept

サークルのレイヤー状に展開するナビゲーションメニュー。個性のあるスタイルが欲しいときに。

See the Pen
Rings Navigation Concept
by Bennett Feely (@bennettfeely)
on CodePen.

 

 

 

Pasta Menu (GSAP Animation)

スパゲティの麺をモチーフにした、スライド式のナビゲーションメニュー。

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.

 

 

 

Jelly Menu

モバイル向けナビメニューを想定したスニペットで、サークル状のカテゴリメニューが出現します。

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.

 

 

 

Droplet Loader

液体がブクブクと泡をたてて流れているようなアニメーションが特長。

See the Pen
Droplet Loader
by Chris Gannon (@chrisgannon)
on CodePen.

 

 

 

Newton’s Light Bulbs 💡😎

振り子の動きに合わせて、ライトが瞬間的に光らせるテクニック。

See the Pen
Newton’s Light Bulbs 💡😎
by Jhey (@jh3y)
on CodePen.

 

 

 

Text Ring Loading Animation

リング状に文字が立体的に回転するローディングアクション。

See the Pen
Text Ring Loading Animation
by Jon Kantner (@jkantner)
on CodePen.

 

 

 

Dual Triangle Preloaders

三角形のみをつかったシンプルな動きのローディングアニメーション12個をコレクションしています。

See the Pen
Dual Triangle Preloaders
by Jon Kantner (@jkantner)
on CodePen.

 

 

 

Liquid loader

リキッド状に変化しながらサークルを描くローディング向けアニメーション。

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.

 

 

 

Pure CSS Book Loader

本をペラペラとめくる様子をCSSアニメーションのみで再現しています。

See the Pen
Pure CSS Book Loader
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Loader turbulence

See the Pen
Loader turbulence
by Damien Montastier (@damienmontastier)
on CodePen.

 

 

 

ページレイアウト

Diagonal Layouts in 2020

ページを斜めにしたダイアゴナル・レイアウトを実現するテクニックを紹介したスニペット。

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.

 

 

 

ボタンエフェクト

Sunset button

マウスホバーで太陽が昇るレトロ系マウスエフェクト。

See the Pen
Sunset button
by zeynep (@zeynepozdem)
on CodePen.

 

 

 

UI // Payment Approval

クリックで指紋認証プロセスに進みます。

See the Pen
UI // Payment Approval
by Cosimo Scarpa (@coswise)
on CodePen.

 

 

 

Book Flight

フライトを予約「Book Flight」ボタンをクリックすると、実際に飛行機が飛び立つユニークなエフェクト。

See the Pen
Book Flight
by Álex S. Lérida (@lerida)
on CodePen.

 

 

 

Explosive Button 💥

ボタンを押すと爆発してしまうエフェクト。

See the Pen
Explosive Button 💥
by Jon Kantner (@jkantner)
on CodePen.

 

 

 

Beer Like Button

ビールで乾杯するいいね!ボタン。

See the Pen
Beer Like Button
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Compress files

ファイルの圧縮を実行しているのがひと目で分かります。

See the Pen
Compress files
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Confirm confetti button

ボタンを押すたびに紙吹雪でお祝いしてくれるエフェクト。

See the Pen
Confirm confetti button
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

T-Shirt Cannon Button 🚀

注文ボタンをクリックすると、Tシャツを畳んで、大砲バズーカで発射すれば注文完了。

See the Pen
T-Shirt Cannon Button 🚀
by Jhey (@jh3y)
on CodePen.

 

 

 

Button bending hover

ボタンをおそうとするとグニャッと曲がるエフェクト。

See the Pen
Button bending hover
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Smash to submit button

ボタンを連打すると、バーベルが少しずつ上っていき、アクションを完了させることができます。

See the Pen
Smash to submit button
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Playful button hover effects

ユニークなボタンエフェクト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.

 

 

 

Homer’s face Animated /w GSAP

マウスを動かす方向に応じてキャラクターの視線と表情が変わります。

See the Pen
Homer’s face Animated /w GSAP
by Kasper De Bruyne (@kdbkapsere)
on CodePen.

 

 

 

Rube Goldberg Machine

ピタゴラスイッチのように連続性のあるアニメーションを作成したスニペット。

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 Goey footer

CSSのみでスタイリングできる、フッター向けのユニークなアニメーションテクニック。

See the Pen
CSS Goey footer
by Zed Dash (@z-)
on CodePen.

 

 

 

Stacked Rainbow Cards

カードにマウスホバーすると、レインボーカラーで点滅する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.

 

 

 

Spring/Bounce Hover Effect

@keyframeを設定することで、ボヨンと弾んだようなエフェクトを実現できます。

See the Pen
Spring/Bounce Hover Effect
by freefrontend.com (@cssparadise)
on CodePen.

 

 

 

Toggles

さまざまなシチュエーションを考えた面白トグル用スタイリング8種類。

See the Pen
Toggles
by Olivia Ng (@oliviale)
on CodePen.

 

 

 

Night & Day v2

ダークモードとライトモードをトグルで切り替えることができ、ユニークなアニメーションにも注目。

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.

 

 

 

macintosh.css

こちらもCSSのみで描かれたレトロなマッキントッシュ。

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

 

 

 

Work Hard

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.

 

 

 

Calm Spikes

See the Pen
Calm Spikes
by Anna the Scavenger (@ScavengerFrontend)
on CodePen.

 

 

 

Liquid Grid

水面が揺れる様子をウェブで忠実に再現し、変化に合わせて美しいグラデーションが浮かび上がります。

See the Pen
Liquid Grid
by Kevin Levron (@soju22)
on CodePen.

 

 

 

[3D] Synth Canyon Run

音楽とシンクロしながらエレクトロな渓谷を進んでいく3Dエフェクト。

See the Pen
[3D] Synth Canyon Run
by Chris Johnson (@jhnsnc)
on CodePen.

 

 

 

Starfields GLShader

キラキラに輝く無数の星のあいだを進んでいくSFアニメーション。

See the Pen
Starfields GLShader
by Paul J Karlik (@pjkarlik)
on CodePen.

 

 

 

Turbulence

CSSフィルタを組み合わせることで、アート性の高い画像ブレンドを試すことができるスニペット。

See the Pen
Turbulence
by Janxalot (@janxalot)
on CodePen.

 

 

 

Banksy – Valentine’s Day

世界的に有名なグラフィティアーティストBanskyをモチーフにしたインタラクティブなウェブ体験を提供。

See the Pen
Banksy – Valentine’s Day
by LoFi (@loficodes)
on CodePen.

 

 

 

Cut/Copy/Paste

表示されているいる文章の一部を選択すると、切り取りやコピー、ペーストなどのアクションを続けることができます。

See the Pen
Cut/Copy/Paste
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

 

Feedback Reactions

CSSアニメーションが特長のフィードバック向けのかわいいリアクション。

See the Pen
Feedback Reactions
by Aaron Iker (@aaroniker)
on CodePen.