CSSで実装できる、最新HTMLテクニック・スニペットまとめ 2023年9月版

目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変です。

「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。

この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。

しかも、CSSのみで表現できるスニペット多数で、コピペで利用できます。

今後のプロジェクトに魅力的なWebテクニックを活用してみましょう。

CSSで実装できる、最新HTMLテクニック・スニペットまとめ

iPhone 15 Pro紹介ページのCTAボタン

コンテナスタイルクエリとスクロール駆動型アニメーションを使えば、JavaScriptゼロでAppleスタイルのダイナミックなCTAを作成できます。

See the Pen Apple Style CTA Reveal with CSS scroll-driven animations by coliss (@coliss) on CodePen.

参考URL: Apple Style CTA Reveal with CSS scroll-driven animations

スクロール駆動アニメーションのグラデーション文字

スクロール駆動のアニメーションと背景クリップを組みあわせて、グラデーション付きのテキスト表示を作成できます。

See the Pen Scroll Driven Gradient Reveal Text [Chrome 115+] by Jhey (@jh3y) on CodePen.

参考URL: Scroll Driven Gradient Reveal Text [Chrome 115+]

グラデーション付き影をコピペ作成 CSS Shadow Gradients とおすすめツール

アニメーション付き「いいね」ボタン

先日行われたAppleイベントで利用されていた、アニメーション付きの「いいね」ボタンは、いくつかのプロパティをもったスプライトCSSで再現できます。

See the Pen Apple Event CSS Sprite Button by Jhey (@jh3y) on CodePen.

参考URL: Apple Event CSS Sprite Button

【CSS】「これどうやる？」アップルやテスラのWebレイアウト再現テクニック集

スクロール駆動の画像グリッドエフェクト

スクロール駆動のCSSアニメーションと再利用可能なキーフレームによるテクニックを組み合わせれば、ダイナミックな画像グリッドエフェクトを実現できます。

See the Pen CSS Criss Cross Parallax with scroll-linked animations ⚡️ by Jhey (@jh3y) on CodePen.

参考URL: CSS Criss Cross Parallax with scroll-linked animations ⚡️

「スワイプで更新」アニメーション

上方向にスクロールすると更新できる、スクロール駆動アニメーションとスクロールスナップを使ったテクニック。

See the Pen Scroll to Refresh w/ Scroll Driven Animations and scroll-snap by Jhey (@jh3y) on CodePen.

参考URL: Scroll to Refresh w/ Scroll Driven Animations and scroll-snap

Linear() 関数をつかったカスタムアニメーション

Linear() 関数を使用して、カスタム アニメーション タイミングを作成できます。

See the Pen GreenSock Easing with CSS linear() ⚡️ by Jhey (@jh3y) on CodePen.

参考URL: GreenSock Easing with CSS linear() ⚡️

無限のイメージシャドウ

縦横自由に伸ばすことができる画像の影シャドウの作り方で、CSSのみで手軽に活用できるテクニック。

See the Pen Infinite image shadow by Temani Afif (@t_afif) on CodePen.

参考URL: Infinite image shadow

キラリと光るホバーエフェクト

カード要素にカーソルを合わせると、ホログラフィックのように七色に輝くCSSホバーエフェクト。

See the Pen Glowing Hover Effect by finnchillah (@finnchillah) on CodePen.

参考URL: Glowing Hover Effect

動くポスターアニメーション

表示されている画像のポスターのみがアニメーション付きで変化するクリエイティブなスニペット。

See the Pen Wall Poster Animation by Wakana Y.K. (@wakana-k) on CodePen.

参考URL: Wall Poster Animation

超リアルなWebルームツアー

マウスで角度や方向、ズームしながら、じっくりと部屋のインテリアを楽しむことができる、ThreeJSをつかった新しい体験型Webテクニック。

See the Pen 3D Room – ThreeJS by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.

参考URL: 3D Room – ThreeJS

暗闇に輝くボタン

See the Pen Sparkle Button ✨ by Jhey (@jh3y) on CodePen.

参考URL: Sparkle Button ✨

UI要素1200以上！HTML/CSSを直接コピペできる便利ライブラリUIverse

3Dガラスのニューモーフィズムスイッチ

See the Pen 3D Glass Switch (Pure CSS, Neumorphic, Animation) by Konstantin Denerz (@konstantindenerz) on CodePen.

参考URL: 3D Glass Switch (Pure CSS, Neumorphic, Animation)

光るドロップダウン

See the Pen Glowing Dropdown by LukyVJ (@LukyVj) on CodePen.

参考URL: Glowing Dropdown

CSSでできるアニメーション付きアコーディオン

See the Pen CSS-only Accordion with Reveal Animation by S. Shahriar (@ShadowShahriar) on CodePen.

参考URL: CSS-only Accordion with Reveal Animation

疑似要素で迷ったときのチートシート

備忘録として覚えておきたい、「:nth-child」の書き方をビジュアル図解しています。

See the Pen nth:child selector – some examples by Chris Smith (@BlogFire) on CodePen.

参考URL: nth:child selector – some examples

コピペ一発！便利なCSSレイアウト生成ツールおすすめ12選（Grid ＆ Flexbox編）

背景が透ける固定ナビメニュー

CSS Blend-Modeを活用したナビメニューは、背景と重なることでさまざまな表情を変えるテクニック。

See the Pen Blend-Mode Sticky Nav & Hero by Jalin Burton (@jalinb) on CodePen.

参考URL: Blend-Mode Sticky Nav & Hero

ジャンプする星レビュー

See the Pen Bouncy Star Rating by Jon Kantner (@jkantner) on CodePen.

参考URL: Bouncy Star Rating

CSSでできたNintento Switch

See the Pen 3D Nintendo Switch – CSS Art by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.

参考URL: 3D Nintendo Switch – CSS Art

ネオンライトのトグルスイッチ

See the Pen Neon Toggle Switch by Jon Kantner (@jkantner) on CodePen.

参考URL: Neon Toggle Switch

変身するトランスフォーマーのオプティマス

トラックをクリックするとアニメーション付きでロボットに変身。すごいのが、CSSのみでスタイリングされている点。

See the Pen Optimus Prime Toggle with CSS Transform [cpc-toggles] by Jhey (@jh3y) on CodePen.

参考URL: Optimus Prime Toggle with CSS Transform [cpc-toggles]

オンライン型ギターチューナー

See the Pen Online Guitar Tuner – v3 by Josetxu (@josetxu) on CodePen.

参考URL: Online Guitar Tuner – v3

マーキー文字リンク（動画再生付）

See the Pen Marquee links with videos by Natalia (@natszafraniec) on CodePen.

参考URL: Marquee links with videos

たまご型タイマー

See the Pen Functional Egg Timer by Nicolas Jesenberger (@nicolasjesenberger) on CodePen.

参考URL: Functional Egg Timer

スクロール駆動のアニメーション文字

See the Pen CSS Responsive Scroll-Driven Text Reveals [Chrome 115+] by Jhey (@jh3y) on CodePen.

参考URL: Responsive Scroll-Driven Text Reveals [Chrome 115+]

パララックス効果付きバブルエフェクト

ページをスクロールすると、ふわりとした浮遊感のある泡バブルが、パララックス効果付きで追従します。

See the Pen Pixi Scrolling Bubbles by Nathan Long (@nathanlong) on CodePen.

参考URL: Pixi Scrolling Bubbles

宇宙が見える銀河ボタン

See the Pen CSS Galaxy Button by Jhey (@jh3y) on CodePen.

参考URL: CSS Galaxy Button

見やすい影つき表テーブル

CSS「animation-timeline」プロパティを活用した、新しい表テーブルの見せ方。

See the Pen sticky scroll shadow animation-timeline by Dave Rupert (@davatron5000) on CodePen.

参考URL: sticky scroll shadow animation-timeline

完全レスポンシブな動画ヒーロー

See the Pen Full Screen Video with Text Overlay by Lisa Catalano (@lisa_c) on CodePen.

参考URL: Full Screen Video with Text Overlay

ネバっとしたGooeyトグルスイッチ

See the Pen Gooey Toggle Switch by Nicolas Jesenberger (@nicolasjesenberger) on CodePen.

参考URL: Gooey Toggle Switch

大リーグMLBチーム成績比較ツール

See the Pen Comparing Teams – MLB by Kit Jenson (@kitjenson) on CodePen.

参考URL: Comparing Teams – MLB

スキューモーフィズム風トグルスイッチ

See the Pen Skeuomorphic Toggle Switch (vol. 2) by Nicolas Jesenberger (@nicolasjesenberger) on CodePen.

参考URL: Skeuomorphic Toggle Switch (vol. 2)

おしゃれなCSSボタンコレクション45個

See the Pen Modern Button Styles – 45 CSS Only Buttons by Vincent Van Goggles (@Gogh) on CodePen.

参考URL: Modern Button Styles – 45 CSS Only Buttons

CSSコピペで完成！押したくなるWebボタンデザインまとめ

View Transition APIの画面遷移アニメーション

See the Pen Bookmark App – View Transition by Aysenur Turk (@TurkAysenur) on CodePen.

参考URL: Bookmark App – View Transition

ネガティブスペース使いトグルスイッチ

See the Pen Merging Letter Toggle by Jon Kantner (@jkantner) on CodePen.

参考URL: Merging Letter Toggle

触りたくなる金額スライダー

See the Pen (Svelte) Range Slider Pips fancy example by Simon Goellner (@simeydotme) on CodePen.

参考URL:

進化を続けるCSSの世界

Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ

サンプル付コピペOK！すごいCSSアニメーションライブラリ30選【2022年版】

CSSのみで表現OK 人気レイアウトやUIパターンを集めた便利ライブラリ CSS Layout

前回のテクニック・スニペットまとめから、およそ6か月ぶりとなるアップデートです。

コピペで簡単！他と差のつくHTML/CSSスニペット30選まとめ