ホームページを制作するときに、何度も繰り返し利用するコードは、スニペットとして整理しておくのがオススメです。
スニペットとは「切れ端」「断片」という意味で、コピペで簡単に再利用できるテンプレートのようなもの。
この記事では、コピペで使える便利な最新HTML／CSSスニペットをまとめてご紹介します。
ブラウザ上でHTMLやCSSのコードを編集しながら、リアルタイムでプレビューを確認できるのもポイント。
画面右下にある「Return」キーをクリックすることで、再読み込みでプレビューできます。
コピペ��きる、保存しておくと便利なHTMLスニペットまとめ
水平方向に無限スクロールするアニメーション
左右どちらへもスクロールするCSSアニメーションで、両サイドはグラデーションでフェードアウトしています。
See the Pen
Infinite Scroll Animation by Yoav Kadosh (@ykadosh)
on CodePen.
円錐形のCSSグラデーション
backgroundにconic-gradientを利用し、美しいグラデーションをCSSのみで実現するテクニック。
See the Pen
Conic splash by Miriam Suzanne (@miriamsuzanne)
on CodePen.
キラキラに輝く、立体的なダイヤモンド
ThreeJSで再現されたダイヤモンドは、自由な角度から見ることができる、インタラクティブなサイトづくりに。
See the Pen
ThreeJS Diamond by Jos Faber (@josfabre)
on CodePen.
スクロール/ホバー時にくるりと回転する文字エフェクト
スクロール時やマウスホバーすると、文字テキストごと回転させるJSテクニック。
See the Pen
How to Animate Twisting Text With CSS and JavaScript by Envato Tuts+ (@tutsplus)
on CodePen.
マウスカーソルを自由にカスタマイズできるライブラリ
ウェブサイトを魅力的にする、ユニークなマウスカーソルを利用できるミニライブラリ。カスタマイズとソースコードのコピペはこちらから。
See the Pen
Curzr | Free cursor library by Taylon, Chan (@tin-fung-hk)
on CodePen.
いつまでもスクロールしていたい、心地よいアニメーションテクニック
Intersection Observerに、カスタムプロパティを活用し、いつまでもスクロールしたくなるアニメーションテクニック。
See the Pen
Intersection Observer Scrolling Effects ✨ by Jhey (@jh3y)
on CodePen.
スクロールで立体的に飛び出る画像ギャラリー
スクロールすると、手間に迫りくるように画像が流れるギャラリー向けレイアウト。
See the Pen
3D Scrolling Gallery/Timeline by Tom Miller (@creativeocean)
on CodePen.
文字や画像が左右に流れるようなCSSマーキーエフェクト
CSSでスタイリングできる、ウェブサイトでもよく見かけるレイアウトテクニック。
See the Pen
CSS Marquee by Ryan Mulligan (@hexagoncircle)
on CodePen.
なめらかにジャンプを繰り返す文字テキスト
CSSのKeyframeアニメーションのみで実現できるテクニック。
See the Pen
Bouncing letters by Michelle Barker (@michellebarker)
on CodePen.
水面に映ったような反射エフェクト
ゆららゆらと水面に写り込んだようなアニメーションをCSSでどうぞ。
See the Pen
Reflection by Josh Kennedy (@joshonweb)
on CodePen.
美しいカードホバーエフェクト
カードにカーソルを合わせると、美しいグラデーションで背景が塗りつぶされる、Twitchで使われているホバーエフェクト。
See the Pen
Gradient Hover Card Effect by Hyperplexed (@Hyperplexed)
on CodePen.
円形に展開するCSSナビゲーションメニュー
ハンバーガーメニューをクリックすると、サークル状に各リンクがポップアップ表示される仕掛けが面白いCSSテクニック。
See the Pen
Menu micro-interaction with CSS by Mert Cukuren (@knyttneve)
on CodePen.
パタパタと回転しながら表示される反転フラップアニメーション
アニメーション時間や反転する回数なども、自由にカスタマイズできるテキストエフェクト。
See the Pen
Customizable link spinner effect by Josh (@jdillon)
on CodePen.
カラーフォントをつかったCSSアニメーションのサンプル例
Google Fontsで利用できるカラーフォントによる、シンプルで効果的な、連続するCSSアニメーション。ソースコードもシンプル。
See the Pen
Nabla color font! by Scott Kellum (@scottkellum)
on CodePen.
キラキラ輝くテキストリンクのつくり方
文字テキストをアニメーション付きのグラデーションカラーで表示しながら、キラキラと光る、CTAに最適なエフェクト。
See the Pen
Magical Text Effect by Hyperplexed (@Hyperplexed)
on CodePen.
テーマカラー切り替えツール
inputを利用し、たった1行のJSを加えるだけで、配色カラーの切り替えができるように。
See the Pen
Theme Picker / One line of js by Hyperplexed (@Hyperplexed)
on CodePen.
進捗状況がわかりやすい、プログレスバー付きボタン
ダウンロードやアップロードの状況を、視覚的に伝えることができるマウスエフェクト。
See the Pen
Progress Button by Taylon, Chan (@tin-fung-hk)
on CodePen.
ミルクシェイクを注文できるボタン
ボタンをクリックすると、シャカシャカと作り出し、完了したらピックアップと表示されるユニークさに注目です。
See the Pen
Progress Button by Taylon, Chan (@tin-fung-hk)
on CodePen.
ユラユラと揺れるボタンアニメーション
クリックすると、文字が点滅しながら、ユラユラとローディングするボタン。
See the Pen
Wavy Upload Button by Aaron Iker (@aaroniker)
on CodePen.
七色のホログラムでキラリと輝くボタンエフェクト
ホバー���合わせてボタンの周りを、キラキラと輝くボーダーラインが印象的なデザイン。
See the Pen
Sketch Button by Aaron Iker (@aaroniker)
on CodePen.
疑似要素をつかった画像のスタイリングテクニック
画像だけでスタイリングできる、疑似要素を重ねるだけのお手軽コードスニペット。
See the Pen
Pattern + Background Combo by Brian Bale (@brianbale)
on CodePen.
クレイモーフィズムによるリストホバーエフェクト
粘土のような質感を表現し、2022年によく見かけたデザインスタイルのひとつをつかい、クリエイティブなリスト形式に。
See the Pen
Claymorphism list hover effect by Morteza (@mortezasharifinia)
on CodePen.
カスタマイズ自在なグラデーション背景のつくり方
4つの色を重ねることで、これまにない新しいグラデーションカラーを表現できるテクニック。色やサイズ、位置などを編集できます。
See the Pen
Highly Customizable Background Gradient Demo by Scott Vandehey (@spaceninja)
on CodePen.
レインボーカラーのキューブ状ローディング
CSSのみでスタイリングされた、七色のレインボーカラーに変化し続けるローディングアニメーション。
See the Pen
Rainbow Cuboid Loader – CSS by Josetxu (@josetxu)
on CodePen.
アニメーション付きグラデーション文���テキスト
ほんの少しのCSSコードを加えることで、動きのあるダイナミックなテキストエフェクトに仕上げることができるテクニック。
See the Pen
Speedy CSS Tip! ⚡️ Animated Gradient Text by web.dev (@web-dot-dev)
on CodePen.
幅が変化する文字テキストアニメーション
Variableフォントに@keyframeアニメーションを加えることで��文字が横に伸びたり、縮んだりする、ユニークな動きを表現できるテクニック。
See the Pen
Sublime – Bion Variable Font by Type Forward (@typeforward)
on CodePen.
映画アプリのUIコンセプト
マウスを左右にドラッグすることで、なめらかにスワイプでき、奥行き感のある画像の重なりも素敵。
See the Pen
Movie App Concept by Rod Leviton (@rodleviton)
on CodePen.
2枚の画像を自然にブレンドするテクニック
CSSカスタムプロパティを使い、お好みでブレンド具合を調整できるコントロール付き。
See the Pen
mask image blend CSS custom properties w/ tweakpane controls by Tom Hermans (@tomhermans)
on CodePen.
月と地球の位置からえらぶ日付選択ツール
ドラッグで地球をくるくる回すことで、日付を選ぶことができるユニークな仕掛け。
See the Pen
Another Datepicker by Aaron Iker (@aaroniker)
on CodePen.
グラデーションだけでできてるとは思えない英語アルファベット
クリックするたびに配色が自動で切り替わる、CSSでスタイリングされたアルファベット文字テキスト。
See the Pen
Gradient Alphabet – CSS Doodle by Aragakey (@aragakey)
on CodePen.
前回のスニペットまとめはこちら。
参考記事: コピペで簡単！Webサイトを素敵にする最新＆実用HTMLスニペット24選
また、Appleなどの大企業のWebレイアウトを再現できるテクニックも話題です。
参考記事: 【CSS】「これどうやる？」アップルやテスラのWebレイアウト再現テクニック集
最新のCSSテクニックを学びたいときは、こちらもオススメです。
