サイト制作やUIデザインに「ひと味」加えたい時、CSSだけで実現できる小技って本当に便利ですよね。
この記事では、そんな“見て楽しい・使って試したい”最新のHTML＆CSSスニペットをギュッとまとめてお届けします。
HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。
🚀 いますぐ使いたい！コピペOKなスニペット集
See the Pen Glass Button by Petr Knoll (@Petr-Knoll) on CodePen.
CSS view-timeline shine effect
マウススクロールに合わせてカードのエッジがきらりと光る、スクロール駆動アニメーションテクニックを活用したスニペット。
See the Pen CSS view-timeline shine effect by Ryan Mulligan (@hexagoncircle) on CodePen.
Photo gallery with Scroll Driven Animation
こちらもスクロール駆動アニメーションを駆使し、スクロールに合わせて画像が画面外から集まってくるエフェクトに仕上げています。
See the Pen Photo gallery with Scroll Driven Animation by Adam Argyle (@argyleink) on CodePen.
カードレイアウトに合わせてスクロールバーがぐにゃりと曲がるテニックを披露したスニペット。
See the Pen curved scrollbar ’25 by Jhey (@jh3y) on CodePen.
ダークモードに最適なカード用スタイリングでは、ひとつのコードを変更すれば全体の色合いが統一され、4カラーがあらかじめ用意されています。
See the Pen Course design cards #scss by Kristen (@kristen17) on CodePen.
CSSの新しい疑似要素:popover-openを利用して、ポップオバーの表示方法や見た目をカスタマイズした参考スニペット。
See the Pen Simple default popover by web.dev (@web-dot-dev) on CodePen.
See the Pen Animated CSS Gradient Text by Adam Argyle (@argyleink) on CodePen.
Table Cell :hover effect w/ CSS :has() ✨
テーブル表の各セルにマウスホバーすると、視覚的に分かりやすく、帯状ハイライトが表示されるテクニック。
See the Pen Table Cell :hover effect w/ CSS :has() ✨ by Jhey (@jh3y) on CodePen.
Infinite Orbit Animation with CSS Trigonometry
CSSの三角関数を使い、モバイルサイズでは水平スクロール、デスクトップビューでは見出しテキストの周りをくるくると回転する無限アニメーションを実装。ヒーローイメージやチーム紹介などに活用できそう。
See the Pen Infinite Orbit Animation with CSS Trigonometry by Arby (@mobalti) on CodePen.
浮遊感たっぷりの演出が素敵な、半透明のガラス風カードスタイル。CSSグラデーションを活用し、光が当たっているようなエフェクトを実現しています。
See the Pen Glass Cards by Rafa (@RAFA3L) on CodePen.
Chromeブラウザのタブ機能を再現したタブ・シミュネーター。More Tabsをクリックすると、ポンポンとタブが追加されていきます。
See the Pen Tab Simulator by Dario Corsi (@dariocorsi) on CodePen.
SVG Filter Sticker Effects (minus turbulence color-burn)
マウスカーソルの動きに合わせて、デザインパーツがきらりと輝きだすユニークなアニメーションエフェクト。
See the Pen SVG Filter Sticker Effects (minus turbulence color-burn) by Jhey (@jh3y) on CodePen.
Grainy distorted interactive 1 gradient blobs
ざらりとした粒状の質感を加えた、グラデーションアニメーション付きのブロブシェイプ。
See the Pen Grainy distorted interactive 1 gradient blobs by Ana Tudor (@thebabydino) on CodePen.
カードが表示されるとするするとサムネイル画像がスクロールしながら画像全体を表示できるCSSアニメーション。
See the Pen Outlined Mobile Cards [v1] by mandynicole (@mandynicole) on CodePen.
3枚のぼかし画像を重ねることで独特のグラデーションアニメーションを表現できるCSSテクニック。
See the Pen Who needs shaders by Steve Gardner (@ste-vg) on CodePen.
トグルを切り替えると、水平線の彼方に光り輝く惑星が見えるアニメーションに。
See the Pen Toggle Space 2 by Alvaro Montoro (@alvaromontoro) on CodePen.
イカゲームのあのキャラクターをCSSのみで再現し、各キャラクターにホバーすると左右にステップを踏み出すエフェクトも。
See the Pen Squid Game by Rafa (@RAFA3L) on CodePen.
Seeing Stars 🌟 Animating @property values with @keyframes (Chromium only)
@propertyと@keyframesを組み合わせて、くるくる回転しながらサークル状に円を描くエフェクトを実現したスニペット。
See the Pen Seeing Stars 🌟 Animating @property values with @keyframes (Chromium only) by Melissa Em (@meowwwls) on CodePen.
レインボーカラーに光るドロップシャドウをもつボタンのCSSスタイリング。
See the Pen Rainbow shadow button by Adam Argyle (@argyleink) on CodePen.
See the Pen Inline Images (GIFs) Within Text Flow by Chris Heuberger (@ChrisBup) on CodePen.
Instagramのストーリー風の画像スライドギャラリーで、クリックで画像の切り替えができます。
See the Pen Instagram Story Like Gallery by Max (@MyXoToD) on CodePen.
Build a “button-to-modal” animation with GSAP
ボタンをクリックすると、全画面に展開するモーダルウィンドウを心地よいアニメーションつきで表示するテクニック。
See the Pen Build a “button-to-modal” animation with GSAP by Envato Tuts+ (@tutsplus) on CodePen.
マウスの動きに合わせて目が上下左右へと自由に動くテクニックは、新しい@propertyを利用して実現しているスニペット。
See the Pen Ghost grid by Gabriele Corti (@borntofrappe) on CodePen.
くるくると回転するローディングアニメーションを作成、カスタマイズできるスニペット。サイズや半径、スピードなど細かい調整も可能で、SVGコードとしてコピペできます。
See the Pen SVG Loader Generator ⚙️🌀 by Matt Cannon (@matt-cannon) on CodePen.
100年かけて1周する、その名も100年時計。日本語にも自動で翻訳されています。
See the Pen 100 Year Clock Wheel by Chris Bolson (@cbolson) on CodePen.
transaction list with view transitions
View Transitions APIを使い、シンプルなスムーズな連続性のある動きを実装したサンプルでも。各リストをクリックすると、詳細ページへとスムーズに遷移します。
See the Pen transaction list with view transitions by Danny Moerkerke (@dannymoerkerke) on CodePen.
Intelligent Drum and Bass Vol. 2
土星の周りをくるくると動くクラシックカーたちですが、惑星をクリックすると大爆発で飛び散ってしまいます。
See the Pen Intelligent Drum and Bass Vol. 2 by Mustafa Enes (@pavlovsk) on CodePen.
Solstice & Equinox (Scroll Snap #CodePenChallenge) [pure CSS]
夏至や冬至、春分の日などを分かりやすくビジュアル化したデモで、scroll-snapを利用したテクニックが披露されています。
See the Pen Solstice & Equinox (Scroll Snap #CodePenChallenge) [pure CSS] by Denise Trocchi (@denisetrocchi) on CodePen.
デザイナーが訪れたアメリカの州を順番に塗りつぶすアニメーション付きのインタラクティブな地図デザイン。
See the Pen Animated States Visited Map by Greg Robleto (@robleto) on CodePen.
Transparent inner border for images
画像の一部に背景が透明のボーダー線を追加できるお手軽CSSスニペット。
See the Pen Transparent inner border for images by Temani Afif (@t_afif) on CodePen.
Frosted Glass Gooey Gravity Nav
背景が透けたグラスモーフィズムスタイルを適用したナビメニューで、各リンクをクリックするとGooeyエフェクト付きで表示されるのもポイント。
See the Pen Frosted Glass Gooey Gravity Nav by Simon Goellner (@simeydotme) on CodePen.
各スケートボードにホバーすると、商品の後ろに手書きスケッチが効果的に表示される素敵CSSエフェクト。
See the Pen Skateboard Product Grid by Alex Trost (@a-trost) on CodePen.
CMYK Glitch Animation Experiment
画像が左右や上下に歪むグリッチエフェクトをCSSのみで再現した小技デザインスニペット。
See the Pen CMYK Glitch Animation Experiment by Jason Lengstorf (@jlengstorf) on CodePen.
十字キーによって上下左右お好きな方向にスクロールされるグリッド型レイアウト。
See the Pen Scroll-Grid to Nowhere by Mads Stoumann (@stoumann) on CodePen.
マウスカーソルを当てた部分が拡大されて表示される虫眼鏡エフェクト。
See the Pen Magnifying glass cursor by Chris Smith (@BlogFire) on CodePen.
maskを利用してジグザグに端を切り取るテクニックで、たった一行のCSSで実現できるスタイリング。
See the Pen Zig-Zag edges by Temani Afif (@t_afif) on CodePen.
Sparkle Card Animation – @property, conic-gradient
カードの端がきらりと輝くアニメーションを@propertyとconic-gradientで表現したスニペット。
See the Pen Sparkle Card Animation – @property, conic-gradient by Takeshi Kano (@tonkotsuboy) on CodePen.
右と上にのみ移動できるUFOキャッチャーを再現したスニペットで、置かれたぬいぐるみは場所によって絶妙にとれない設定に。
See the Pen claw machine by Masahito Leo Takeuchi (@Ma5a) on CodePen.
気になるスニペットは見つかりましたか？
どれも最新のHTML/CSSテクニックを学べるだけでなく、実案件でも活用できる便利なアイデアばかり。
今後も定期的にアップデートしていく予定なので、ブックマークしておくのもおすすめですよ。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
