この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。
新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のデザイン制作に活用してみてはいかがでしょう。
ここでは、カテゴリー別に分けて最新HTML／CSSスニペットをまとめています。
コンテンツ目次
- 1. 小技テクニック系（15個）
- 2. 面白、ユニーク系（16個）
- 3. ホバーエフェクト系（6個）
- 4. テキストエフェクト系（10個）
- 5. ページレイアウト系（10個）
- 6. イメージスライダー系（9個）
- 7. ナビゲーションメニュー系（2個）
- 8. ローディングアニメーション系（4個）
- 9. ボタンエフェクト系（13個）
- 10. CSSマジック（10個）
- 11. ゲーム系（5個）
「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。
サイトの質が向上！コピペできるHTML/CSS便利スニペットまとめ
小技テクニック系
Declaring Bits of Unselectable Text
文章テキストの補足に便利なテクニック、文字の右上に数字を小さく表示し、文章下にまとめて補足テキストを追加します。
See the Pen
Declaring Bits of Unselectable Text by Will Boyd (@lonekorean)
on CodePen.
目次に戻る
コピペで利用できる、方眼紙のようなマス目をCSS Gridプロパティを利用して作成しています。
See the Pen
CSS Grid-ient 2 by Jordan Marshall (@TheCSSKing)
on CodePen.
目次に戻る
Grid hover effect with subgrid
重ねて表示されたデザイン要素全体をクリック可能にするテクニック。詳しい使い方はこちらの記事よりどうぞ。
See the Pen
Grid hover effect with subgrid by Michelle Barker (@michellebarker)
on CodePen.
目次に戻る
CSSスタイリングによって、紙の折り目のようなエフェクトを再現します。
See the Pen
CSS folded poster effect by Lynn Fisher (@lynnandtonic)
on CodePen.
目次に戻る
ScrollTrigger – Highlight Text
ページスクロールに合わせて、部分的に黄色マーカーでハイライトされるテクニック。話題のScrollTriggerプラグインによる実装。
See the Pen
ScrollTrigger – Highlight Text by Ryan Mulligan (@hexagoncircle)
on CodePen.
目次に戻る
スクロールに合わせて、セクションごとに要素を固定できる小技。position: sticky;プロパティを利用したお手軽スタリングですが、効果的なテクニック。
See the Pen
Pretty Sticky by Ying (@BurmesePotato)
on CodePen.
目次に戻る
疑似要素を使って、画像のドロップシャドウを表現するテクニック。ぼかし具合と不透明度をお好みで調整しましょう。
See the Pen
Realistic shadows to images by Gayane (@gayane-gasparyan)
on CodePen.
目次に戻る
Slide up hover effect CSS-only
マウスホバーで詳細テキストが下からスライド表示されるCSSテクニック。行数が異なるテキストにも対応可能。
See the Pen
Slide up hover effect CSS-only by Michelle Barker (@michellebarker)
on CodePen.
目次に戻る
IntersectionObserver Visualizer
スクロールでのイベント制御を行いやすくするIntersection Observer APIの使い方をビジュアル化した、チートシート的ツール。
See the Pen
IntersectionObserver Visualizer by Michelle Barker (@michellebarker)
on CodePen.
目次に戻る
ウェブサイトで利用する配色をスライダーを動かすだけで、直感的に選ぶことができるカラーツール。
See the Pen
Sorted CSS Colors by Mustafa Enes (@pavlovsk)
on CodePen.
目次に戻る
各種CSSフィルタを利用したイメージ画像のマスキングエフェクトで、右側のリンクより各エフェクトをプレビューできます。
See the Pen
Mask & Css Filter by Hisami Kurita (@hisamikurita)
on CodePen.
目次に戻る
疑似要素の構造をビジュアル的に解説したチートシート。
See the Pen
Structural pseudocats 🐱 by Wendy Kong (@wendko)
on CodePen.
目次に戻る
Cooltipz.css – Cool tooltips made from pure CSS
CSSのみでスタイリングされたツールチップ用ライブラリ。表示する向きやサイズなどの調整も可能。
See the Pen
Cooltipz.css – Cool tooltips made from pure CSS by Jack Domleo (@JackDomleo)
on CodePen.
目次に戻る
Underline to Talking Bubble Morphing
リンクにカーソルを合わせるとツールチップがポップアップ表示されるCSSテクニック。
See the Pen
Underline to Talking Bubble Morphing by Mikael Ainalem (@ainalem)
on CodePen.
目次に戻る
3色をつかったアニメーション付きグラデーションを生成できるツールで、ソースコードもそのままコピペで利用できます。
See the Pen
Fuze – CSS Gradient Animator by Mr Alien (@mr_alien)
on CodePen.
目次に戻る
面白系
マウスの軌跡にカラフルなレインボーなバブルが追従するアニメーションエフェクト。
See the Pen
Colorful Bubbles by Aniket Kudale (@aniketkudale)
on CodePen.
目次に戻る
Codepen Challenge – Scrolling GSAP Animation
海に浮かぶ船から釣り糸を垂らし、ページ下までスルスルと移動するスニペット。
See the Pen
Codepen Challenge – Scrolling GSAP Animation by Shunya (@shunyadezain)
on CodePen.
目次に戻る
Animated folder micro-interaction
クリックするとアニメーション付きでドロップダウン表示されるリスト用スニペット。
See the Pen
Animated folder micro-interaction by Niels Voogt (@NielsVoogt)
on CodePen.
目次に戻る
各カードをクリックすると、フライト情報がパネル上に展開、表示されるUIインタラクション。
See the Pen
Folding Ticket Detail by Yugam (@pizza3)
on CodePen.
目次に戻る
左パネルのAdd to Cartボタンをクリックすると、右パネルに商品が追加されるシームレスなフロー。
See the Pen
Shopping UI by morooka (@mo-ro)
on CodePen.
目次に戻る
42 | Bedroom Construction with threejs + GSAP #codepenchallenge
See the Pen
42 | Bedroom Construction with threejs + GSAP #codepenchallenge by Yiting Liu (@yitliu)
on CodePen.
目次に戻る
レトロなAppleパソコンをCSSのみで超リアルに再現したスニペット、すごすぎ。
See the Pen
Apple IIe 3D by Marian Ban (@marianban)
on CodePen.
目次に戻る
白いカップに注いだ熱々のコーヒーを真上から見た様子を、まるで動画のようにデザインした作品。
See the Pen
Coffee for you by Vadim (@v_Bauer)
on CodePen.
目次に戻る
Codepen Challenge: GSAP – Sequencing
アメリカの田舎町に立っていそうな、ネオン管をつかった派手な看板。
See the Pen
Codepen Challenge: GSAP – Sequencing by Sicontis (@Sicontis)
on CodePen.
目次に戻る
マウススクロールに合わせて、ハムスターがくるくると走り出す、ScrollTriggerプラグインのインタラクティブなコンテンツの魅せ方。
See the Pen
ScrollTrigger Demo by Mariusz Dabrowski (@MarioD)
on CodePen.
目次に戻る
カンバスに描かれる無数のドットの軌跡を、カラフルなレインボーカラーで表現するアニメーション。
See the Pen
sea anemone by Dillon (@Dillo)
on CodePen.
目次に戻る
はためく旗をカスタマイズできるオンラインツールで、画像をアップロードして旗にすることも可能。
See the Pen
flags waves anime three.js by okada-web (@okada-web)
on CodePen.
目次に戻る
背景写真が透けて見える、半透明エフェクトがポイントのUIデザイン。トグルで切り替えも可能。
See the Pen
Profile Card UI by JotForm (@jotform)
on CodePen.
目次に戻る
See the Pen
deconstructed by Gerard Ferrandez (@ge1doot)
on CodePen.
目次に戻る
血液型をクリックすると、輸血できるタイプを瞬時に教えてくれるビジュアルツール。
See the Pen
Who can get my blood? by Romina (@RominaMartin)
on CodePen.
目次に戻る
マイク端子から入力した音をつかって、自分だけのオーケストラを完成させるユニークなツール。音を繰り返すことで、はじめのイメージとは全く異なる雰囲気に。
See the Pen
Repeater Orchestra (1.0) by Bryant Smith (@barefootfunk)
on CodePen.
目次に戻る
ホバーエフェクト系
文字テキストにホバーすると、多彩なアニメーション付きで画像リンクが表示されます。
See the Pen
Hover image by Cassie Evans (@cassie-codes)
on CodePen.
目次に戻る
CSS-only Fade Siblings on Hover
ホバーしたリンク以外は、半透明の非表示状態となるCSSテクニック。
See the Pen
CSS-only Fade Siblings on Hover by Shaw (@shshaw)
on CodePen.
目次に戻る
カスタマイズされたマウスカーソルをつかって、各メニューをロックオンするホバーエフェクト。
See the Pen
Magnetic Hover Interaction by Sikriti Dakua (@dev_loop)
on CodePen.
目次に戻る
アンダーラインが引かれたリンクにホバーすると、矢印に形を変化させる、シンプルで効果的なテクニック。
See the Pen
Underline animation by Aaron Iker (@aaroniker)
on CodePen.
目次に戻る
文字テキストが左から塗りつぶされるホバーエフェクト、ナビメニューにも最適。
See the Pen
Text fill on hover #1 by G Rohit (@grohit)
on CodePen.
目次に戻る
画像にマウスカーソルを合わせると、矢印にシェイプを変化させるホバーエフェクト。
See the Pen
CSS Clip-Path Hover Effect by freefrontend.com (@cssparadise)
on CodePen.
目次に戻る
テキストエフェクト
山頂に雲がかかる雪山をスクロールすると、文字テキストが変化します。
See the Pen
ScrollTrigger: SVG Text Mask by Tom Miller (@creativeocean)
on CodePen.
目次に戻る
#webdev series – Colorful text animation #updated
文字テキストに美しいグラデーションを採用し、滑らかなアニメーションで色が変化していきます。
See the Pen
#webdev series – Colorful text animation #updated by Hendry Sadrak (@hendrysadrak)
on CodePen.
目次に戻る
-webkit-background-clipプロパティを利用して、文字テキストに合わせて画像をマスキング。
See the Pen
#BlackLivesMatter ✊🏿✊🏾✊🏽 by Max Mikhalchuk (@s1mpson)
on CodePen.
目次に戻る
文字テキストがカラフルに伸縮しながら上下に移動するテキストエフェクト。
See the Pen
WEEKEND 😃 by Sikriti Dakua (@dev_loop)
on CodePen.
目次に戻る
SVG text mask w/ image sequence
モクモクとした煙から文字テキストが出現するSVGマスキングテクニック。
See the Pen
SVG text mask w/ image sequence by Tom Miller (@creativeocean)
on CodePen.
目次に戻る
文字を入力すると音声付きでアルファベットを読み上げてくれます。
See the Pen
Type it Say it by David Lewis (@dp_lewis)
on CodePen.
目次に戻る
Variableフォントを利用することで、呼吸をするように滑らかなテキストアニメーションを実現できます。
See the Pen
Splitting Demo by diego (@diego154)
on CodePen.
目次に戻る
ネオンライトで照らされた文字テキストにアニメーションエフェクトを追加したスニペット。
See the Pen
IN TOO DEEP by Alex Trost (@a-trost)
on CodePen.
目次に戻る
モーション制作用JSプラグインGSAPを活用したテキストエフェクト。ページ下にある再読み込みボタンクリックで、別の配色カラーパレットでランダム表示します。
See the Pen
GSAP Practice by Caroline Artz (@carolineartz)
on CodePen.
目次に戻る
GSAP ScrollTrigger on Variable Fonts Perspective
マウスカーソルの動きに合わせて、ルーレットのようにクルクルと回転する文字テキスト。こちらもGSAPプラグインにて実装。
See the Pen
GSAP ScrollTrigger on Variable Fonts Perspective by Pete Barr (@petebarr)
on CodePen.
目次に戻る
ページレイアウト
飛行機についてストーリーテリング形式で、多彩なアニメーションで紹介するランディングページ向けレイアウト。
See the Pen
Airplanes. by Steve Gardner (@ste-vg)
on CodePen.
目次に戻る
書籍販売サイト向けのUIデザインで、文庫本の表紙カバーが引き立つレイアウトが特長。
See the Pen
Book Store UI by Aysenur Turk (@TurkAysenur)
on CodePen.
目次に戻る
スクロールに合わせて景色が変わり、太陽がのぼり、コウモリが羽ばたくなど、ストーリーテリング性を強調したパララックス・アニメーション。
See the Pen
Parallax scroll animation by isladjan (@isladjan)
on CodePen.
目次に戻る
CSS Gridプロパティを利用して、新聞紙のようなレイアウトを再現するレイアウト用スタイリング。レスポンシブ対応で、モバイル表示も問題ありません。
See the Pen
CSS Grid: Newspaper Layout by Olivia Ng (@oliviale)
on CodePen.
目次に戻る
Overlapping Header with CSS Grid
CSS Gridを利用して、立体的に重なるヘッダーデザインをスタイリング。
See the Pen
Overlapping Header with CSS Grid by Jonathan Snook (@snookca)
on CodePen.
目次に戻る
格子状に並べたレイアウト、こちらもCSSGridプロパティとCSS Variablesを利用しています。
See the Pen
Responsive CSS Grid – Books by Andy Barefoot (@andybarefoot)
on CodePen.
目次に戻る
Apple Watchのページレイアウトを完全再現。ヘッダーではアニメーション付きで画像が表示。
See the Pen
Apple Watch Page Layout by Jorge Mendes (@jorgemoovein-the-bashful)
on CodePen.
目次に戻る
イメージ画像がすらすらと流れるように背景でアニメーションするレイアウトアイデア。
See the Pen
Meet our team by Paulina Hetman (@pehaa)
on CodePen.
目次に戻る
Distortion Effect Landing Page
See the Pen
Distortion Effect Landing Page by Chouaib Belagoun (@chouaibblgn45)
on CodePen.
目次に戻る
Horizontal Timeline Responsive
イラストを利用したタイムライン用レイアウトの参考スニペット。
See the Pen
Horizontal Timeline Responsive by Nicko Afan (@nickoafan)
on CodePen.
目次に戻る
イメージスライダー
スライドする画像をタイムパネル上に並べることで、どこまで表示したのか一目で確認できるスライダー。
See the Pen
MCU Timeline Carousel by Ryan Mulligan (@hexagoncircle)
on CodePen.
目次に戻る
CSSのみでスタイリングされたイメージカルーセルで、背景色も切り替えと同時に変化します。
See the Pen
Playlist Carousel – css only by Aybüke Ceylan (@aybukeceylan)
on CodePen.
目次に戻る
CodePen Home
Parallax swipe (React)
水平方向にスワイプすると、それに合わせて画像がパララックスエフェクト付きで切り替わります。
See the Pen
Parallax swipe (React) by Yugam (@pizza3)
on CodePen.
目次に戻る
Image slider with multiple controls and mobile swipe control (Javascript)
モバイル端末でのスワイプ操作にも対応した画像スライダー。
See the Pen
Image slider with multiple controls and mobile swipe control (Javascript) by Hakeem (@Akimzzy)
on CodePen.
目次に戻る
カードパネルの切り替えに合わせて背景も変化するアニメーション付スライダー。
See the Pen
Voyage Slider | GSAP by Sikriti Dakua (@dev_loop)
on CodePen.
目次に戻る
モバイルアプリでの利用を想定したイメージカルーセル、スワイプ操作にも対応。
See the Pen
Custom scroll slider by Arseny M. (@theseventh)
on CodePen.
目次に戻る
キーボードの上下キーでも切替可能なイメージスライダー。
See the Pen
Vue Page Animation by Tolga Eğilmezel (@Tolga-Egilmezel)
on CodePen.
目次に戻る
CodePen Home
CSS Only: Carousel/Slider with proper sliding between Slides
CSSオンリーでスタイリングされたイメージスライダー。
See the Pen
CSS Only: Carousel/Slider with proper sliding between Slides by Abubaker Saeed (@AbubakerSaeed)
on CodePen.
目次に戻る
画像にマウスカーソルを合わせると文字テキストがテロップ状に流れるように表示されます。
See the Pen
Image Slider | GSAP by Sikriti Dakua (@dev_loop)
on CodePen.
目次に戻る
ナビゲーションメニュー
右下に表示されたハンバーガーメニューをクリックすると、画面全体をオーバーレイしたリンクメニューが出現します。
See the Pen
Hamburger Menu Interaction by Tsukasa Aoki (@TKS31)
on CodePen.
目次に戻る
モバイル向けに固定表示されるナビゲーションメニューのコンセプトスニペット。
See the Pen
Navigation by Vadim (@v_Bauer)
on CodePen.
目次に戻る
ローディングアニメーション
話題のニューモーフィズム・スタイルを利用したローディングアニメーション。立体的な影の付け方もポイント。
See the Pen
Neumorphic Preloader by Jon Kantner (@jkantner)
on CodePen.
目次に戻る
ニューモーフィズムにグラデーションを追加することで、より奥行き感のある立体的なデザインに。
See the Pen
Neumorphism Gradient Loader by samuel garcia (@sam_garcia2)
on CodePen.
目次に戻る
コロコロと転がるたびにキャラクターの表情が変化するアニメーション。
See the Pen
Balancing Moods by Chris Gannon (@chrisgannon)
on CodePen.
目次に戻る
プカプカと浮く小島を描いたローディングアニメーション。
See the Pen
Animal Crossing Island Loader by Alex Trost (@a-trost)
on CodePen.
目次に戻る
ボタンエフェクト
ボタンをクリックするとローディング状況を知らせるプログレスバーが出現。
See the Pen
Download button by Aaron Iker (@aaroniker)
on CodePen.
目次に戻る
本物そっくりにCSSオンリーでスタイリングされたボタンデザイン。もちろんクリックすることも可能です。
See the Pen
Literal Radio Buttons by Jon Kantner (@jkantner)
on CodePen.
目次に戻る
ゆらゆると水面が揺れるようなCSSエフェクトを採用したボタンデザイン。
See the Pen
Creative Wave Button by Oğuzhan Ağyar (@oguzhanagyar)
on CodePen.
目次に戻る
クリックすると紙飛行機となって彼方へ飛んでいくアニメーションエフェクト。
See the Pen
Paper plane button by Aaron Iker (@aaroniker)
on CodePen.
目次に戻る
クリックするとレインボーカラーに変化するボタンは、ニューモーフィズムを取り入れています。
See the Pen
Rainbow V2 by Chance Squires (@chancesq)
on CodePen.
目次に戻る
ダーク版ニューモーフィズム・スタイルのボタンエフェクト。
See the Pen
Darkness by Chance Squires (@chancesq)
on CodePen.
目次に戻る
ぼんやりと輝くネオンエフェクトをボタンデザインに実装。カラフルなスタイリングが特長。
See the Pen
Glowing buttons by Pranjal Bhadu (@bhadupranjal)
on CodePen.
目次に戻る
ボタンクリックでロケットが発射され、確実に送信されたことをユーザーに伝えます。
See the Pen
GSAP Send Button Animation by Shahid Shaikh (@shahidshaikhs)
on CodePen.
目次に戻る
ぼよんとしたコミカルな動きは、控えめながらユーザーの注目を集めるテクニック。
See the Pen
Button squish animation by Aaron Iker (@aaroniker)
on CodePen.
目次に戻る
ボタンホバーで立体的にイラストやアイコンなどのデザイン要素がポップアップ表示されるエフェクト。
See the Pen
3D button by Robin Delaporte (@robin-dela)
on CodePen.
目次に戻る
鮮やかに光るラインが文字テキストを囲み、点灯するネオンライトエフェクト。
See the Pen
Button Neon (:hover fx) by Shay (@Shay_Reichert)
on CodePen.
目次に戻る
Smash that “Like” button! w/ GSAP 😅
超人ハルクがボタンを破壊するスニペット。音が出ます、ご注意ください。
See the Pen
Smash that "Like" button! w/ GSAP 😅 by Jhey (@jh3y)
on CodePen.
目次に戻る
お好みでカスタマイズできるラジオボタン用スタイリングスニペット。
See the Pen
CSS Custom Radio Buttons by Abubaker Saeed (@AbubakerSaeed)
on CodePen.
目次に戻る
CSSマジック
CSSのみでスタリングされたとは思えないほど、リアルな動きを表現したキャラクターデザイン。
See the Pen
Painter by Ricardo Oliva Alonso (@ricardoolivaalonso)
on CodePen.
目次に戻る
3D First Person Art Gallery – No Javascript!
360度ぐるりと見渡すことができるスニペットで、JSは一切利用していません。
See the Pen
3D First Person Art Gallery – No Javascript! by Ben Evans (@ivorjetski)
on CodePen.
目次に戻る
HTML/CSSのみで再現されたフレディー・マーキュリー。
See the Pen
Freddie Mercury – HTML & CSS by Ricardo Oliva Alonso (@ricardoolivaalonso)
on CodePen.
目次に戻る
Animal Crossing: Isabelle’s Day Off ☀️(Pure CSS)
どうぶつの森の世界観をCSSのみで表現したアニメーション作品。
See the Pen
Animal Crossing: Isabelle’s Day Off ☀️(Pure CSS) by Tee Diang (@cybercountess)
on CodePen.
目次に戻る
Minecraft world animated in pure CSS
マインクラフトの世界をCSSだけで作成した作品。
See the Pen
Minecraft world animated in pure CSS by Hai Le (@hailedev)
on CodePen.
目次に戻る
あの某有名キャラクターもCSSのみでデザイン、光と影の当たり方にも注目。
See the Pen
scssuper mario face by Louise Flanagan (@louflan)
on CodePen.
目次に戻る
CSSのみで表現できるリアルな花火エフェクト。
See the Pen
Only CSS: Fireworks Rush by Yusuke Nakaya (@YusukeNakaya)
on CodePen.
目次に戻る
ひとつのDIV要素のみでスタイリングされたiPad Proは、レスポンシブによる表示にも対応しています。
See the Pen
One Div iPad Pro – Responsive by Annie (@anniebombanie)
on CodePen.
目次に戻る
Pure CSS halftone portrait from .jpg source
JPEG画像をCSSのみでスタリングした、ハーフトーン風エフェクトに仕上げることができるテクニック。
See the Pen
Pure CSS halftone portrait from .jpg source by Ana Tudor (@thebabydino)
on CodePen.
目次に戻る
パノラマ写真を折りたたんだようなCSSアニメーションに注目のスニペット。
See the Pen
Folding panorama animation by Bennett Feely (@bennettfeely)
on CodePen.
目次に戻る
ゲーム系
目標に設定したタイピング速度にチャレンジする、サイバースタイルのタイピング練習ツールで、中毒性たっぷり。
See the Pen
CYBERTYPE by Manan Tank (@MananTank)
on CodePen.
目次に戻る
画面上に表示されるロケットをキャッチする単純なゲームですが、難易度高め。
See the Pen
vue rocket 🚀 by Pepita K. (@PepitaK)
on CodePen.
目次に戻る
誰もが一度はしたことがある○×ゲームを再現、ハードモードのコンピュータ、めちゃくちゃ早いです。
See the Pen
TicTacToe v.3.5 In ReactJS by Takane Ichinose (@takaneichinose)
on CodePen.
目次に戻る
上から落ちてくる隕石を避けながら滞在時間でスコアを競うゲーム。
See the Pen
Avoid Asteroids Game by Sagee Conway (@saconway)
on CodePen.
目次に戻る
クリックの速さを測定できるツール。時間とクリック数をシンプルに表示してくれます。
See the Pen
Click Speed Test ⚡ by Luciano Felix (@FelixLuciano)
on CodePen.
目次に戻る
