Web制作者は要チェック！ 2025年、Webサイトやスマホアプリの実装に役立つモダンCSSのスニペットのまとめ
Post on:2025年2月6日
sponsors
Google Chromeの開発マネージャーであり、The CSS Working Groupのメンバーでもあり、VisBugやOpenPropsなどの開発者でもあるAdam Argyle氏による、2025年のUI/UX案件に役立つCSSのスニペットを紹介します。
一手間加えてCSSアニメーションを気持ちよく動かすスニペット、大きく進化したCSS変数の効果的な使い方、簡単にできるページ遷移、ポップオーバーやdetailsの遷移アニメーション、これまでより美しいCSSグラデーションの実装など、次のプロジェクトで試してみたいことばかりです。
6 CSS Snippets Every Front-End Developer Should Know In 2025
by Adam Argyle
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- はじめに
- linear()による弾力性のあるイージング
- 型指定されたCSSの変数
- ページナビゲーションのページ遷移
- ダイアログとポップオーバーの遷移アニメーション
- detailsの遷移アニメーション
- グラデーションテキストのアニメーション
はじめに
ここで解説するCSSのスニペットは、これまでよりパワフルで、プログレッシブエンハンスメントを活用して、2025年のUI/UX案件に対応できるようにしています。ページ遷移の有効化、dialogとポップオーバーとdetailsのトランジション、明暗グラデーションのアニメーション化、安全なCSSシステム、アニメーションに弾力性のあるイージングを追加するなど、知っておくと非常に便利です。
それでは、さっそく始めましょう！
linear()による弾力性のあるイージング
CSSのlinear()関数を使用してアニメーションに弾力性を与え、操作して気持ちいいアニメーションを実装します。
CSSのイージング関数でポイント間で線形に補間すると、驚くほどリアルな視覚的物理現象を作り出すことができます。動き自体はわずかですが、ユーザエクスペリエンスに関心と好奇心を高めることができます。
続いて、上ではease-outを使用し、下ではlinear()関数を使用したアニメーションです。結果はかなり異なり、下のアニメーションの方が気持ちよく動きます。
下記は、典型的なlinear()を使用したイージングのCSSです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.springy { transition: transform 1s linear( 0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1 ); } |
linear()関数のCSSは人間が読みやすいものではありませんが、機械はこれを好みます。CSSを書くときは、ジェネレーターを利用すると、簡単です。
linear()を使用する場合は、継続時間が長くなることを想定してください。処理が長くなると、シームレスに中断できるようにすると便利です。そのため、linear()はトランジションに適しており、キーフレームに使用すると問題が発生する可能性があります。
また、Open Propsのようなライブラリで、あらかじめ用意されたCSS変数を使用することもできます。
|
1 2 3 4 5 6 7 |
@import "https://unpkg.com/open-props/easings.min.css"; .springy { @media (prefers-reduced-motion: no-preference) { transition: transform 1s var(--ease-spring-3); } } |
Open Propsの変数には5段階の強度が用意されており、さらに弾力性と物理特性のための追加のイージングも用意されています。
Open Propsの変数を使ったみたい人は、下記ページをご覧ください。
CSSを段階的に導入する
このCSSを使うもっとも簡単な方法は、カスケードを使用することです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@media (prefers-reduced-motion: no-preference) { /* just repeat the shorthand with adjusted easing */ .thingy { transition: transform 0.3s ease; transition: transform 0.3s linear(…); } /* or, target a specific property */ .thingy { animation-timing-function: var(--ease-1); animation-timing-function: var(--ease-spring-2); } } |
そして、アップグレードをします。
|
1 2 3 4 5 6 7 |
.thingy { transition: transform 0.3s ease; @supports (transition-timing-function: linear(0, 0.1, 1)) { transition-timing-function: var(--ease-spring-2); } } |
型指定されたCSSの変数
varで定義されるJavaScriptの変数と同様に、--で定義されるCSSの変数はグローバルで、ルーズで、ダイナミックで、フレキシブルです。これはとても素晴らしいことです。
しかし、大規模なサイトを構築するときなどでは、信頼性を持って動作できるように変数に入れるものを制限したい場合があります。
上記のCSSは、変数に無効な色が設定されています。最初はこれによって壊れてしまうかもしれません。しかし、@propertyが追加されると、有効な色で機能します。
下記のように型指定された<color>のCSS変数を作成します。
|
1 2 3 4 5 |
@property --color-1 { syntax: "<color>"; inherits: false; initial-value: rebeccapurple; } |
型の安全性に加えて、@propertyで定義された変数は割り当てられた型に基づいて値の変更を補間するために必要な手順をブラウザが推測できるため、アニメーション化することもできます。
@propertyが定義される前は、ブラウザは型を導出して補間ステップを見つけることはできません。現在ではブラウザにヒントを与えるだけで、簡単にできます。
2025年にはフロントエンドのデベロッパーは、@propertyを使用した変数の定義に慣れておく必要があります。その理由は、下記の通りです。
- CSSシステムインタフェースの形式化
- CSSシステムの保護
- 新しいアニメーションを可能にする
inherits: falseを使用すると、パフォーマンスが向上します
ページナビゲーションのページ遷移
この小さなスニペットは、リンクがクリックされたときにページをクロスフェードさせるCSSです。
|
1 2 3 |
@view-transition { navigation: auto; } |
このCSSはあなたのサイトに追加するもっとも簡単なスニペットで、特に注意すべき点はありません。
リンクがクリックされたときに、Webサイトがページ遷移を使用することを示します。デフォルトの遷移はクロスフェードです。
ブラウザがサポートしていない場合は、これまで通り普通に遷移します。サポートしている場合は、ページにクロスフェードを与えます。フルページアニメーションなどカスタマイズできることはたくさんありますが、この記事での要点はこの簡単なスニペットとこの機能を段階的に強化する方法を共有することです。
CSSを段階的に導入する
ページ遷移にアニメーションを追加する機会は、まだまだたくさんあります。ページ遷移のエクスペリエンスを向上させるには、まずページ間でよく使用される要素を特定し、それらにCSSで名前を付けることから始めるのが最適です。
|
1 2 3 4 5 6 7 |
.nav { view-transition-name: --nav; } .sidenav { view-transition-name: --sidenav; } |
これにはページ遷移の要素も含まれます。異なる要素であっても構いません。
|
1 2 3 |
a, h1 { view-transition-name: --morphy; } |
2つの異なるページでaとh1に同じview-transition-nameを与えると、ブラウザは1ページ目の要素を2ページ目の要素の位置とサイズに移動してサイズも変更し、モーフィングしているように見えるかもしれません。もちろん、同じ要素でモーフを行うこともできます。
このCSSを使った例は他にもたくさんあります。要素に名前を付けて、下記のような動きのあるエクスペリエンスを作成することもできます。
私はデベロッパーツールのアニメーション機能が大好きです。ページ全体のビュー遷移をスクラブするのはとても満足いくもので、本当に細かい部分を検査して改善するのに優れています。
ダイアログとポップオーバーの遷移アニメーション
2025年では、<dialog>と[popover]の使い方を知っていることが重要です。z-indexでという古い知識は1というちっぽけな値に打ち負かされます。
ダイアログとポップオーバーは一般的なUI要素で、JavaScriptをダウンロードする必要もなく、アクセシビリティが組み込まれています。まずは、実際に使用してその違いを理解しましょう。
これら2つの要素は、トップレイヤーと呼ばれるUIの最上位レイヤーに表示されます。ブラウザはドキュメント内の任意の場所にある要素を最上位に表示します。
これを遷移するには、transition-behavior、@starting-styleルール、overlayといったCSSプロパティがいくつかあります。
これらを組み合わせるのは呪文のように思うかもしれませんが、コピペで大丈夫です。下記のCSSを使用して<dialog>と[popover]のクロスフェード遷移を実装してみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/* enable transitions, allow-discrete, define timing */ [popover], dialog, ::backdrop { transition: display 1s allow-discrete, overlay 1s allow-discrete, opacity 1s; opacity: 0; } /* ON STAGE */ :popover-open, :popover-open::backdrop, [open], [open]::backdrop { opacity: 1; } /* OFF STAGE */ /* starting-style for pre-positioning (enter stage from here) */ @starting-style { :popover-open, :popover-open::backdrop, [open], [open]::backdrop { opacity: 0; } } |
手っ取り早く確認するために、デモページをご覧ください。
See the Pen
Transitioning dialog and popover in and out - minimal demo by coliss (@coliss)
on CodePen.
このCSSは効果的で簡単ですが、ダイアログをポップオーバーとは異なる方法で表示・非表示したい場合は、カスタマイズができません。または、開始と終了のアニメーションを異なるものにしたい場合もです。
ダイアログの遷移
下記は基本的なCSSを使用した<dialog>要素です。見た目はいまいちですが、これを使って素晴らしいことができます。
See the Pen
pop-n-lock basic <dialog> - transitioned by coliss (@coliss)
on CodePen.
まず、<dialog>要素をHTMLで記述します。<dialog>はボタンで表示・非表示を切り替えることができ、開くボタンはページ内に、閉じるボタンはダイアログ内に配置します。
|
1 2 3 4 5 6 7 |
<button onclick="demo.showModal()">…</button> <dialog id="demo"> <header> <button title="Close" onclick="demo.close()">close<</button> </header> </dialog> |
閉じるボタンをスキップしたい場合は、<dialog closedby="any">にしてダイアログのライトクローズを有効にできます。
ダイアログ遷移をアニメーション化するには、
- アニメーションが必要なのは、
<dialog>と::backdropの2つです。 - ダイアログが表示されると、
display: none;はdisplay: block;に変更され、transition-behaviorによってこの変更のタイミングをアニメーションに合わせて調整できます。 - ダイアログは最上位レイヤーに複製されますが、これもアニメーションに合わせて調整する必要があります。
[open]属性は、ダイアログが開いているか閉じているかを知るために使用されます。@starting-styleは、最初のレンダリング時に開始スタイルとして使用されます。
CSSは、下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
dialog { /* Exit Stage To */ transform: translateY(-20px); &, &::backdrop { transition: display 1s allow-discrete, overlay 1s allow-discrete, opacity 1s ease, transform 1s ease; /* Exit Stage To */ opacity: 0; } /* On Stage */ &[open] { opacity: 1; transform: translateY(0px); &::backdrop { opacity: 0.8; } } /* Enter Stage From */ @starting-style { &[open], &[open]::backdrop { opacity: 0; } &[open] { transform: translateY(20px); } } } |
実際の動作は、デモページをご覧ください。
See the Pen
pop-n-lock basic <dialog> - transitioned by coliss (@coliss)
on CodePen.
このCSSを出発点として、Have a dialogからさまざまなコードやインスピレーションを得るために3つのダイアログのエクスペリエンスを見つけることができます。
ポップオーバーの遷移
ポップオーバーも<dialog>要素のように、最上位レイヤーに表示されます。ライトクリアがデフォルトで、キーボードやフォーカスの管理はすべて自動的に行われます。
See the Pen
Toggle Tip - Anchor + Popover - Over-Easy Mini Web Machine by coliss (@coliss)
on CodePen.
実装のコードを見てましょう。
まずは、HTMLから。
|
1 2 3 |
<button popovertarget="pop">?</button> <p id="pop" popover>An overlay with additional information.</p> |
<dialog>要素と同様に、ポップオーバーのdisplayプロパティの遷移と最上位レイヤーの挿入をアニメーション化するには、transition-behaviorと@starting-styleを組み合わせます。
ポップオーバーの場合、開いている状態は属性ではなく、CSSの疑似クラス:popover-openであることに注意してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
[popover] { &, &::backdrop { transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete, opacity 0.5s, transform 0.5s; /* Exit Stage To */ opacity: 0; } /* On Stage */ &:popover-open { opacity: 1; &::backdrop { opacity: 0.5; } } /* Enter Stage From */ @starting-style { &:popover-open, &:popover-open::backdrop { opacity: 0; } &:popover-open { transform: translateY(10px); } } } |
実際の動作は、デモページをご覧ください。
See the Pen
Transition popover in and out by coliss (@coliss)
on CodePen.
detailsの遷移アニメーション
まずは、デモをご覧ください。
ディスクロージャー要素である<details>は、CSSプリミティブによってアニメーションの可能性が解き放たれるのを長年待ち望んできました。基本となるHTMLを見てましょう。
|
1 2 3 4 |
<details> <summary>Show disclosed content</summary> <p>…</p> </details> |
details要素は、height: 0px;からheight: auto;に遷移させる必要があり、開示のために内部的に使用するスロットされたコンテンツをターゲットにする方法が必要です。CSSのinterpolate-sizeプロパティはこの高さアニメーションに使用でき、::details-contentはセレクタに使用できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
details { inline-size: 50ch; @media (prefers-reduced-motion: no-preference) { interpolate-size: allow-keywords; } &::details-content { opacity: 0; block-size: 0; overflow-y: clip; transition: content-visibility 1s allow-discrete, opacity 1s, block-size 1s; } &[open]::details-content { opacity: 1; block-size: auto; } } |
実際の動作は、デモページをご覧ください。
See the Pen
<details> open/close transitions by coliss (@coliss)
on CodePen.
ボーナス
2つ以上のdetails要素を使用して、それぞれを互いに近づけたい場合は、使用したいdetails要素にname属性を追加することで実現できます。ラジオボタンのグループ化と似ています。
|
1 2 3 4 5 6 7 8 9 10 11 |
<details name="linked-disclosure"> <summary>Show disclosed content</summary> <p>…</p> </details> <!-- name="linked-disclosure" connects these together --> <details name="linked-disclosure> <summary>Show disclosed content</summary> <p>…</p> </details> |
inline-sizeについて詳しくは、先日の記事をご覧ください。
CSSのinterpolate-sizeプロパティやcalc-size()関数を使用すると、width: auto;やheight: auto;へのアニメーションができるようになります
グラデーションテキストのアニメーション
デザインにおける大胆な見出しテキストは、グラデーションで引き立てられ、興味をそそり鮮やかさで目を引くのに役立ちます。
2015年以降、Webではグラデーションのテキストエフェクトを作成できるようになり、この10年でアニメーション・ユーザー設定・補間などさまざまなアップデートと機能強化がされてきました。
prefers-color-schemeクエリを使用することで、グラデーションのテキストエフェクトをライトテーマやダークテーマに簡単に適応させることができます。- CSSアニメーションのアップデートにより、グラデーションのエフェクトはグラデーションを回転・移動させることに加え、時間の経過とともにカラーを変化させることもできます。
- 補間のアップデートにより、ミックスがより鮮明になり、豊かで、興味深いものにできます。
See the Pen
Animated CSS Gradient Text by coliss (@coliss)
on CodePen.
CSSは、下記の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
@property --color-1 { syntax: "<color>"; inherits: false; initial-value: #000; } @property --color-2 { syntax: "<color>"; inherits: false; initial-value: #000; } @keyframes color-change { to { --color-1: var(--_color-1-to); --color-2: var(--_color-2-to); } } .gradient-text { --_space: ; /* ライトモード */ --_color-1-from: yellow; --_color-1-to: orange; --_color-2-from: purple; --_color-2-to: hotpink; /* ダークモード */ @media (prefers-color-scheme: dark) { --_color-1-from: lime; --_color-1-to: cyan; --_color-2-from: cyan; --_color-2-to: deeppink; } --color-1: var(--_color-1-from); --color-2: var(--_color-2-from); animation: color-change 2s linear infinite alternate; background: linear-gradient( to right var(--_space), var(--color-1), var(--color-2) ); /* 古いブラウザ用 */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* モダンブラウザ用 */ background-clip: text; color: transparent; @supports (background: linear-gradient(in oklch, #fff, #fff)) { --_space: in oklch; } } |
これはちょっと長いCSSですね、分解してみましょう。
グラデーションのテキストエフェクトを作成するには、下記のCSSから始めます。
|
1 2 3 4 5 |
.gradient-text { background: linear-gradient(to right, hotpink, cyan); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } |
プレフィックスを削除
最新のアップデートは、プレフィックスを削除することです。ただし、古いブラウザでもこのエフェクトが表示されるように古いブラウザ用のCSSも残した方がよいでしょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
.gradient-text { background: linear-gradient(to right, hotpink, cyan); /* 古いブラウザ用 */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* モダンブラウザ用 */ background-clip: text; color: transparent; } |
アップデートされた勾配補間空間
次に、CSS変数と@supportsと一緒にinの補間構文を使用して、グラデーションの品質を向上させます。
また、代わりにグラデーションの定義を繰り返し記述して、in oklchを含めることもできます。これもうまく機能し、古いブラウザをサポートします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.gradient-text { --_space: ; background: linear-gradient(to right var(--_space), hotpink, cyan); /* 古いブラウザ用 */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* モダンブラウザ用 */ background-clip: text; color: transparent; @supports (background: linear-gradient(in oklch, #fff, #fff)) { --_space: in oklch; } } |
型付き<color>プロパティの作成
グラデーションのアニメーションには、ダイアログとポップオーバーの遷移アニメーションで解説した@propertyを使用します。型付けされたカラー値はテキストで使用されるグラデーションのように、グラデーション内部でアニメーションさせることができます。
|
1 2 3 4 5 6 7 8 9 10 11 |
@property --color-1 { syntax: "<color>"; inherits: false; initial-value: #000; } @property --color-2 { syntax: "<color>"; inherits: false; initial-value: #000; } |
これで--color-1はtransition: –color-1 .3s ease;のようにアニメーションさせたり、キーフレームで使用したりできるようになります。アニメーション化できるこれらの値は、グラデーションのテキストエフェクトのようにカラーが許される場所であればどこでも使用できます。
|
1 2 3 4 5 6 7 8 9 |
@keyframes color-change { to { --color-1: lime --color-2: orange; } } .gradient-text { animation: color-change 2s linear infinite alternate; } |
いくつかの小道具を用意します
宣言的に保つために、アニメーションのカラーを保持する変数を定義します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.gradient-text { --_color-1-from: yellow; --_color-1-to: orange; --_color-2-from: purple; --_color-2-to: hotpink; @media (prefers-color-scheme: dark) { --_color-1-from: lime; --_color-1-to: cyan; --_color-2-from: cyan; --_color-2-to: deeppink; } /* set our typed variables to the "from" values */ --color-1: var(--_color-1-from); --color-2: var(--_color-2-from); } |
これらをすべてまとめて、最終的なスニペットが完成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
@property --color-1 { syntax: "<color>"; inherits: false; initial-value: #000; } @property --color-2 { syntax: "<color>"; inherits: false; initial-value: #000; } @keyframes color-change { to { --color-1: var(--_color-1-to); --color-2: var(--_color-2-to); } } .gradient-text { --_space: ; /* ライトモード */ --_color-1-from: yellow; --_color-1-to: orange; --_color-2-from: purple; --_color-2-to: hotpink; /* ダークモード */ @media (prefers-color-scheme: dark) { --_color-1-from: lime; --_color-1-to: cyan; --_color-2-from: cyan; --_color-2-to: deeppink; } --color-1: var(--_color-1-from); --color-2: var(--_color-2-from); animation: color-change 2s linear infinite alternate; background: linear-gradient( to right var(--_space), var(--color-1), var(--color-2) ); /* 古いブラウザ用 */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* モダンブラウザ用 */ background-clip: text; color: transparent; @supports (background: linear-gradient(in oklch, #fff, #fff)) { --_space: in oklch; } } |
CSSのスニペットは短くて分かりやすいときもありますが、今回解説したのはすこし違います。また、来年もお楽しみに！
sponsors
