Webはここまで進化中!コピペもできるHTML/CSS参考スニペット84個まとめ

latest-html-snippet-2019sep-1

 

この記事では、Webサイトやモバイルアプリにあっと驚くエフェクトを、コピー&ペーストで実装できる最新 HTML/CSS スニペットをまとめてご紹介します。

 

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

 

これらのスニペットを利用すれば、他のサイトではあまり見かけない差のつくデザインエフェクトを実現できます。今後のウェブ制作に活用してみてはいかがでしょう。

 

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

 

コンテンツ目次

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

Webはここまで進化中!コピペもできるHTML/CSS参考スニペット84個まとめ

 

イメージスライダー系スニペット

Showtime Parallax Effect

See the Pen
Showtime Parallax Effect
by Ali Klein (@AliKlein)
on CodePen.

 

 

 

Variable Fonts Experiment

スライドに合わせてフォントの太さが変化する、Variableフォントを実際に活用したサンプル例として。

See the Pen
Variable Fonts Experiment
by Supremo (@SupremoHQ)
on CodePen.

 

 

 

Ghibli Slider

スタジオジブリの海外公開作品をスライド形式でまとめており、画像のトランジションにはあのキャラクターも登場です。

See the Pen
Ghibli Slider
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

 

Animated Portrait w/ GSAP 2.0

下部に配置してあるボタンをクリックすることで、写真立てがインタラクティブに切り替わるスライダーエフェクト。

See the Pen
Animated Portrait w/ GSAP 2.0
by Darin (@dsenneff)
on CodePen.

 

 

 

React Slider w/ Hover Effect

React.JSに対応した3Dホバーエフェクト付きのイメージスライダー。

See the Pen
React Slider w/ Hover Effect
by Ryan Mulligan (@hexagoncircle)
on CodePen.

 

 

 

テキストエフェクト系スニペット

Movin bodymovin

Airbnbから登場したiOS、 Android、React Native対応のアニメーションライブラリ「Lottie」をつかったサンプル例で、最近のアップデートによりAfter Effectsプラグインも公開されました。

See the Pen
Movin bodymovin
by kittons (@airnan)
on CodePen.

 

 

 

Splitting: Laser Write

See the Pen
Splitting: Laser Write
by Martin Pitt (@nexii)
on CodePen.

 

 

 

Variable font animation

タイミングに合わせてVariableフォントの太さを変更することで、まるで呼吸をしているようなアニメーションが完成です。

See the Pen
Variable font animation
by Michelle Barker (@michellebarker)
on CodePen.

 

 

 

Animated Verbs II

Variableフォントを利用することで、まるで文字テキストが生きているようなアニメーションが魅力的。

See the Pen
Animated Verbs II
by Ryan Mulligan (@hexagoncircle)
on CodePen.

 

 

 

Animated Verbs

上記スニペットに続き、文字テキストがジャンプしている様子をCSSで表現しています。

See the Pen
Animated Verbs
by Ryan Mulligan (@hexagoncircle)
on CodePen.

 

 

 

Procedurally Generated CSS Numbers

お好みの数字を入力しボタンをクリックすると、カラフルでユニークなタイルでその数字を表現します。

See the Pen
Procedurally Generated CSS Numbers
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

 

CSS Neon Sign

CSSのみを利用してネオンライトのような光を表現できるスニペット。

See the Pen
CSS Neon Sign
by Ananya Neogi (@ananyaneogi)
on CodePen.

 

 

 

Cassie!

筆記体を手書きしたような表現豊かなアニメーションで再現したテキストエフェクト用スニペット。

See the Pen
Cassie!
by Cassie Evans (@cassie-codes)
on CodePen.

 

 

 

Matrix digital rain (animated version)

CSSアニメーションを利用して、文字テキストがずらずらと表示される某映画のようなエフェクトを実現しています。

See the Pen
Matrix digital rain (animated version)
by yuanchuan (@yuanchuan)
on CodePen.

 

 

 

Variable Fonts | Compressa

文字テキストにマウスカーソルを合わせることで、フォントの太さを瞬時に変更でき、Variableフォントの可能性を感じるスニペット。

See the Pen
Variable Fonts | Compressa
by Juan Fuentes (@JuanFuentes)
on CodePen.

 

 

 

ボタンエフェクト系スニペット

Order confirm animation

ボタンをクリックすると、トラックが荷物を受け取り、商品の配達に向かうアニメーションが素敵です。

See the Pen
Order confirm animation
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Call to Action Hype Man

ボタンをクリックしようとすると、後ろから落書きのようなキャラクターが登場するアニメーション付き。

See the Pen
Call to Action Hype Man
by Mariusz Dabrowski (@MarioD)
on CodePen.

 

 

 

https://codepen.io/aaroniker/pen/KjJQER

ボタンをクリックするとダウンロードが開始され、進捗状況をアニメーション付きプログレスバーで確認できるエフェクト。

See the Pen
Download button animation
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Mouse cursor pointing to cta

ボタンをクリックしようとマウスを周辺に移動させると、ポインターカーソルがボタンの方向を指差します。

See the Pen
Mouse cursor pointing to cta
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Paint Drop Hover

マウスクリックしたポジションに応じて、インクが垂れたようなドリップを表示するホバーエフェクト。

See the Pen
Paint Drop Hover
by Mariusz Dabrowski (@MarioD)
on CodePen.

 

 

 

ページレイアウト系スニペット

CSS Grid: Magazine Layouts

CSS Gridレイアウトを活用することで、まるで雑誌のようなレイアウトを自由自在に作り上げます。フルスクリーンでの表示推奨です。

See the Pen
CSS Grid: Magazine Layouts
by Olivia Ng (@oliviale)
on CodePen.

 

 

 

CSS Grid: Coupons!

まるで地元スーパーのチラシのようなレイアウトをCSS Gridで実現したレイアウト例。

See the Pen
CSS Grid: Coupons!
by Olivia Ng (@oliviale)
on CodePen.

 

 

 

Color this sofa! – SVG + Blend Mode trick

ソファの色と背景色をSVGとCSSブレンドモードを使って、リアルタイムにプレビューできる機能。Generate Randomでランダムで色が決まります。

See the Pen
Color this sofa! – SVG + Blend Mode trick
by Kyle Wetton (@kylewetton)
on CodePen.

 

 

 

Anime.js Ease Visualizer

アニメーションにおけるイージングを分かりやすくまとめ、視覚化したAnime.js用ライブラリ。

See the Pen
Anime.js Ease Visualizer
by Julian Garnier (@juliangarnier)
on CodePen.

 

 

 

Agency website POC

これまでの制作実績をまとめたポートフォリオ用レイアウトで、マウススクロールとクリックのみで進めることができるコンテンツ遷移にも注目です。

See the Pen
Agency website POC
by Jamie Coulter (@jcoulterdesign)
on CodePen.

 

 

 

Twotwentytwo.se – smooth scroll with skew effect

マウスをスクロールさせると画像や文字テキストが歪みながらスムーズに表示される仕掛け。

See the Pen
Twotwentytwo.se – smooth scroll with skew effect
by jesper landberg (@ReGGae)
on CodePen.

 

 

 

How to Build a Filterable Thumbnail Layout with CSS Grid, Flexbox and JavaScript

サムネイル画像で振り分けソートできる機能のついた、CSS GridとFlexboxを組み合わせたレイアウトサンプル例。

See the Pen
How to Build a Filterable Thumbnail Layout with CSS Grid, Flexbox and JavaScript
by Envato Tuts+ (@tutsplus)
on CodePen.

 

 

 

To-do list

残っているタスクをクリックすると、チェックマークがアニメーション付きで点灯するToDoリスト用レイアウト。

See the Pen
To-do list
by Sabine Robart (@_Sabine)
on CodePen.

 

 

 

CSS Gradient Counter List

リスト表示の番号を美しいグラデーションを使って、少しずつ色を変化させるCSS小技テクニック。

See the Pen
CSS Gradient Counter List
by Mattia Astorino (@equinusocio)
on CodePen.

 

 

 

Assorted cards & images (CSS Grid + BEM)

CSS Gridを利用することで、これまでは難しかったレイアウトをより手軽に、そして自由に作成できるようになりました。

See the Pen
Assorted cards & images (CSS Grid + BEM)
by Stephen Lee (@abcretrograde)
on CodePen.

 

 

 

Bubble Toggle

トグルをクリックすると、泡がぱちんと弾けながら切り替わります。

See the Pen
Bubble Toggle
by Chris Gannon (@chrisgannon)
on CodePen.

 

 

 

Pro Illustration (click the toggle!)

トグルを使うことでブラインドの開閉を行うことができるアニメーションイラストレーション。

See the Pen
Pro Illustration (click the toggle!)
by Klare (@klare)
on CodePen.

 

 

 

Pure CSS Bulb Switch

CSSのみでスタイリングした淡い光が印象的だったトグルスイッチ。

See the Pen
Pure CSS Bulb Switch
by Grzegorz Witczak (@Wujek_Greg)
on CodePen.

 

 

 

CSS – Frosted Glass

背景にぼかしガラスを重ねたようなエフェクトをCSSのみで実現したテクニック。

See the Pen
CSS – Frosted Glass
by Kyle Wetton (@kylewetton)
on CodePen.

 

 

 

CSS Particles

画面全体を縦横無尽に飛び回るカラフルなシェイプをCSSアニメーションで描いたデモサンプル。

See the Pen
CSS Particles
by rx0079 (@re0079)
on CodePen.

 

 

 

Clip Clop Clippity Clop [CSS Only]

走る馬をクリックすると、どのようにCSSでスタイリングしたのかスローモーションで確認できます。

See the Pen
Clip Clop Clippity Clop [CSS Only]
by Steve Gardner (@ste-vg)
on CodePen.

 

 

 

Dither / Dissolve CSS Gradients

さまざまなシェイプをCSSスタイリングで描き、そこにザラザラとしたグランジ感も一緒に追加していきます。

See the Pen
Dither / Dissolve CSS Gradients
by David J. Aldred (@DavidJAldred)
on CodePen.

 

 

 

Zdog and Goo

レインボーカラーのサークル円が立体的に回転しながら、形を変化させていくユニークなスニペット。

See the Pen
Zdog and Goo
by Chris Gannon (@chrisgannon)
on CodePen.

 

 

 

Pure CSS Only Portrait – Isla

CSSのみでスタイリングされたとは思えないほどリアルな少女の表情を描いたポートレイトイラスト。

See the Pen
Pure CSS Only Portrait – Isla
by Ben Evans (@ivorjetski)
on CodePen.

 

 

 

CSS-only chronometer

CSSのみでデザインされたストップウォッチで、再生と停止ボタンを見事に稼働するテクニック。

See the Pen
CSS-only chronometer
by Tamer Aydn (@tameraydin)
on CodePen.

 

 

 

Pixi Sprite Bubbles

マウスをドラッグしたところから、ぷくぷくと泡が飛び出てくるエフェクト。

See the Pen
Pixi Sprite Bubbles
by Juan Fuentes (@JuanFuentes)
on CodePen.

 

 

 

Simple CSS Waves | Mobile & Full width

ゆらゆらと波のように揺れながら変化する様子をCSSで表現したテクニックで、モバイル端末でもうまく表示することができます。

See the Pen
Simple CSS Waves | Mobile & Full width
by kachibito (@kachibito)
on CodePen.

 

 

 

Back to top with progress indicator

コンテンツがどれくらい残っているのか確認できる、トップへ戻るボタンのつくり方。

See the Pen
Back to top with progress indicator
by Ivan Grozdic (@ig_design)
on CodePen.

 

 

 

Cursor with progress indicator

上記サンプル同様に、コンテンツがどのくらい残っているかを確認できますが、こちらではマウスカーソル自体を使っています。

See the Pen
Cursor with progress indicator
by Ivan Grozdic (@ig_design)
on CodePen.

 

 

 

Google-like Thanos disintegration

表示されているカード型コンテンツをクリックすると、灰のようになって散るアニメーション。

See the Pen
Google-like Thanos disintegration
by Johan Fagerbeg (@birjolaxew)
on CodePen.

 

 

 

ナビゲーションメニュー系スニペット

Untitled

表示されたアイコンをクリックすると、詳細が文字テキスト付きで表示されるナビゲーションメニューで、モバイルアプリなどで便利な使い方かもしれません。

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

 

 

 

Transparent Navbar & Hero

Bootstrapフレームワークでナビメニューとヒーローイメージを重ねた透明なデザインが特長で、レスポンシブにも対応しています。

See the Pen
Transparent Navbar & Hero
by Allen Pavic (@alvic)
on CodePen.

 

 

 

Responsive Bootstrap mega menu

こちらもBootstrapフレームワークのナビメニューを拡張し、メガメニューでさまざまなコンテンツをまとめて表示できるスニペット。

See the Pen
Responsive Bootstrap mega menu
by Martin Stanek (@skywalkapps)
on CodePen.

 

 

 

Wobbly underline

各アイコンをクリックすると、下線ラインがグラグラしながらアニメーション変化するシンプルなナビメニュー。

See the Pen
Wobbly underline
by Mikael Ainalem (@ainalem)
on CodePen.

 

 

 

Fork This Nav

シンプルで明快なナビメニューにCSSスタイリングを加えることで、ユニークなアニメーションが印象的なハンバーガーメニューの展開を表現しています。

See the Pen
Fork This Nav
by Ryan Mulligan (@hexagoncircle)
on CodePen.

 

 

 

ローディングアニメーション系スニペット

Loading

フォントの間を飛び回る点が見ていて飽きないローディング画面。

See the Pen
Loading
by Katherine Kato (@kathykato)
on CodePen.

 

 

 

Cassette Tape Loader

カセットテープがくるくると回転するオールドスクールなローディングアニメーション。

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

 

 

 

Loader turbulence

ゆらゆらと揺れながら文字テキストが表示されるなどタービュランス、乱気流を表現しています。

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

 

 

 

CurveBall

赤と青それぞれの半円がコロコロ転がることで、サークル円を作り出すローディングアニメーション。

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

 

 

 

Rotating Rounded Triangles Animation (SCSS)

丸みのある三角形が規則的に動くことで、目の錯覚を利用して立体的に見えるローディング画面。

See the Pen
Rotating Rounded Triangles Animation (SCSS)
by Mark Miscavage (@markmiscavage)
on CodePen.

 

 

 

CSS Loading Animations

シンプルな図形を組み合わせて完成したローディングアニメーション6種類をまとめたライブラリ。

See the Pen
CSS Loading Animations
by Alex (@AlexWarnes)
on CodePen.

 

 

 

custom css wave loader

CSSをつかって水面の波紋を表現したローディングアニメーション。

See the Pen
custom css wave loader
by CSS Points (@csspoints)
on CodePen.

 

 

 

SVGアニメーション系スニペット

3-Layer Cloud Composite

3つのSVGレイヤーを重ねることで、立体的でよりリアルな雲模様を表現できるCSSスタイリング。

See the Pen
3-Layer Cloud Composite
by BEAU.HAUS (@beauhaus)
on CodePen.

 

 

 

便利、面白系スニペット系スニペット

Sunbeams

背景の画像に合わせて、光が差し込む様子をアニメーション付きで表現しています。

See the Pen
Sunbeams
by Ko.Yelie (@ko-yelie)
on CodePen.

 

 

 

Sketchpad

カンバス上を鉛筆をつかって自由にお絵かきできるスケッチパッドで、鉛筆の色を変更したり、描いたスケッチをPNGで保存することもできます。

See the Pen
Sketchpad
by Brad Arnett (@bradarnett)
on CodePen.

 

 

 

Neon Clock (Using React Hooks)

現在時刻をネオンサインで表示しながら、正確な時間を文字テキストでも伝えます。

See the Pen
Neon Clock (Using React Hooks)
by Ganesh Prasad (@gnsp)
on CodePen.

 

 

 

Image glitch effect

CSSのみを利用することで、画面全体にグリッチエフェクトを再現できるテクニック。

See the Pen
Image glitch effect
by Alain (@AlainBarrios)
on CodePen.

 

 

 

Vue-controlled Wall-E

マウスカーソルに合わせて動くコミカルなDisneyの某キャラクターを再現したスニペット。クリックすると音が出る仕掛けも。

See the Pen
Vue-controlled Wall-E
by Sarah Drasner (@sdras)
on CodePen.

 

 

 

Strandbeest walk

マウスの動きに合わせて進行方向や速度が変化していきます。

See the Pen
Strandbeest walk
by Nick Watton (@2Mogs)
on CodePen.

 

 

 

CSSCities

大都市の街並みをCSSのみでスタイリング、デザインしたユニークな作品。ポップアップで飛び出るエフェクトにも注目です。

See the Pen
CSSCities
by Adam Kuhn (@cobra_winfrey)
on CodePen.

 

 

 

100 years of Bauhaus

ドイツのバウハウス誕生100周年を祝うCSSデザイン。

See the Pen
100 years of Bauhaus
by Juan Ignacio (@juanignaciorios)
on CodePen.

 

 

 

未来SF系スニペット

[wip] motion blur transition

まるでアーケードゲームの世界をそのまま表現したような、鮮やかな80年代ネオンエフェクトを実現しています。

See the Pen
[wip] motion blur transition
by Robin Delaporte (@robin-dela)
on CodePen.

 

 

 

Three.js Mobile VR Sonic

VR体験ができるスニペットで、クリックでジャンプするなど本格的なつくり。

See the Pen
Three.js Mobile VR Sonic
by Baron (@b29)
on CodePen.

 

 

 

Strange Tubes #2

光沢感のあるチューブが七色に色を変化させながら、グニャグニャと形を変えるユニークなThreeJSコレクション。

See the Pen
Strange Tubes #2
by Kevin Levron (@soju22)
on CodePen.

 

 

 

AI Assistant Blob

人工知能を活用することで、立体的でもこもことしたシェイプをデザインできます。

See the Pen
AI Assistant Blob
by Aaron Iker (@aaroniker)
on CodePen.

 

 

 

Untitled

きらびやかに無数の桜の花びらが舞う様子を描いた高画質なアニメーション。

See the Pen
tqdmv
by Anand Davaasuren (@at80)
on CodePen.

 

 

 

WebGL Wonderland #7

WebGLアニメーション技術を使うことで、驚くほど立体的なアニメーションを表現できます。

See the Pen
WebGL Wonderland #7
by Colin van Eenige (@cvaneenige)
on CodePen.

 

 

 

The Plastic Ocean

プラスチックが漂う海の中を泳ぐクラゲのような生き物を、マウスカーソルで操作できます。

See the Pen
The Plastic Ocean
by Onload (@onload)
on CodePen.

 

 

 

3D Software Vertex Ocean

超高速で光り輝く粒子の間を通り抜ける、疾走感のたまらないアニメーションが魅力です。

See the Pen
3D Software Vertex Ocean
by Radik (@H2xDev)
on CodePen.

 

 

 

The Starry Night

ゴッホの名作を立体的な粒子状に表現した作品で、WebGL技術を用いることで圧倒的なグラフィックを描きます。

See the Pen
The Starry Night
by Darryl Huffman (@darrylhuffman)
on CodePen.

 

 

 

Energy

ビリビリと飛び回るエネルギーがマウスカーソルに合わせて動き出します。

See the Pen
Energy
by Thibaud Goiffon (@Gthibaud)
on CodePen.

 

 

 

Exploding Points

点と点で結ばれた線が、七色の美しい色合いに染まりながら広がっていくアニメーションで、数値も自由に調整できます。

See the Pen
Exploding Points
by Devamardeep Hayatpur (@devamar)
on CodePen.

 

 

 

ゲーム系スニペット

The Cube

ランダムなルービックキューブを色ごとにきちんと揃えていきましょう。ダブルクリックでゲーム開始です。

See the Pen
The Cube
by Boris Šehovac (@bsehovac)
on CodePen.

 

 

 

30 – 50 hogs

歩行者に注意しながら、突進してくる豚のみを撃ち抜くシューティングゲーム。最後のオチも素敵。

See the Pen
30 – 50 hogs
by Cassie Evans (@cassie-codes)
on CodePen.

 

 

 

Space Shooter game

矢印キーで左右に移動しながら、Spaceバーで弾を打つシューティングゲーム。

See the Pen
Space Shooter game
by Andrew Rubin (@andyranged)
on CodePen.

 

 

 

Tower Blocks

表示されているブロックとぴったり重なるようにし、ブロックをどれだけ積み上げることができるかを競います。

See the Pen
Tower Blocks
by Steve Gardner (@ste-vg)
on CodePen.

 

 

 

Color Collision

上下から迫ってくる赤と青のボールの色に合わせて、中心にある玉の色をクリックでマッチさせる、シンプルだけど中毒性のあるゲーム。

See the Pen
Color Collision
by Dev Loop (@dev_loop)
on CodePen.

 

 

 

Connecting dots

表示されている点を順番通りに線で結び、浮かび上がってくるものを当てるゲーム。

See the Pen
Connecting dots
by Meiko Hori (@meiq)
on CodePen.

 

 

 

Pure CSS Concentration game

CSSのみでデザイン、作成された神経衰弱ゲーム。

See the Pen
Pure CSS Concentration game
by Kevin Newcombe (@kevinnewcombe)
on CodePen.