ウェブ UI の新機能

Bramus
Una Kravets

公開日: 2026 年 7 月 1 日

Google I/O 2026 では、ウェブ UI プラットフォームに導入されるさまざまな最新情報が発表されました。ユーザー設定の尊重から、自然なインタラクションの実装、ナビゲーションのガイド、クラッターの削減、さまざまなフォーム ファクタへの適応まで、最新のウェブは、高品質で触覚的なユーザー エクスペリエンスを構築するための非常に強力なツールをデベロッパーに提供します。

「ウェブ UI の新機能」セッションで紹介されたすべての機能を、UX のコア原則に沿ってまとめたものがこちらです。

パート 1: ユーザー設定を尊重する

パーソナライズはウェブのユーザビリティにとって不可欠です。最新のウェブ API を使用すると、ユーザーのシステムレベルの選択に自動的に適応しやすくなります。これらのコンセプトは基本的なものであり、何年も前から議論されてきましたが、実際には、この動的なパーソナライズを簡単に構築できる新しい API とパターンがいくつかあります。

1. contrast-color()

contrast-color() CSS 関数は入力色を受け取り、WCAG AA の最小コントラスト アルゴリズムに基づいて入力色とのコントラストが高い方に応じて、black または white を自動的に返します。これにより、テキストと背景色のペアを手動で維持しなくても、読みやすさを確保できます。

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

「contrast-color()」の詳細

2. light-dark()

light-dark() CSS 関数を使用すると、1 つの宣言内で、プロパティに 2 つの異なる値（色または画像）を指定できます。1 つはライトモード用、もう 1 つはダークモード用です。ブラウザは、アクティブな color-scheme（:root または親で light、dark、light dark に設定されている必要があります）に基づいて、適切なコントラスト カラーを自動的に選択します。

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

light-dark() の新しい点は、色値のみに限定されなくなったことです。Chrome 150 以降では、2 つの画像値も受け入れるようになりました。

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. CSS カスタム関数（@function）

@function at ルールを使用すると、ネイティブ CSS 内でカスタムの再利用可能な関数を直接定義できます。ローカル スコープのカスタム プロパティを引数として受け取り、計算を実行して、result ディスクリプタを使用して値を返すことができるため、プリプロセッサの必要性が軽減されます。

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

コンテナ スタイル クエリと CSS if() 関数を組み合わせることで、このデモで示すように、あらゆる型の値で動作するカスタム --light-dark() 関数を作成できます。

4. コンテナ スタイル クエリ

CSS コンテナクエリの一部であるスタイルクエリを使用すると、デベロッパーは親コンテナの計算されたカスタム プロパティ値に基づいて子孫要素にスタイルを適用できます。これにより、サイズを明示的に含める必要のない動的コンポーネントが可能になります。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

このデモでは、スタイルクエリを使用して --theme カスタム プロパティに基づいて色を設定しています。

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

スタイル クエリの詳細

5. CSS if() 関数

if() CSS 関数は、インラインの条件付きロジックを CSS プロパティ値に直接適用します。セミコロンで区切られた一連の条件（スタイルクエリ、メディアクエリ、機能クエリ）を評価し、最初に true と評価された条件に関連付けられた異なる値を設定できます。else フォールバックは省略可能です。

Browser Support

  • Chrome: 137.
  • Edge: 137.
  • Firefox: not supported.
  • Safari: not supported.

Source

前のデモでは、if() 関数を使用して、contrast-color() 関数の出力に基づいてテーマ設定されたコントラスト色を作成しています。

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

@supports で使用する CSS at-rule() 関数を使用すると、デベロッパーは、ブラウザが @starting-style や @view-transition などの特定の @ 規則を認識するかどうかを機能検出できます。

たとえば、@function のサポートを確認するには、次のように使用します。

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

at-rule() を使用すると、@ 規則自体の基本サポートを確認できますが、特定の記述子、前置句、完全な @ 規則ブロックをテストすることはできません。アンカー付きクエリやスタイルクエリなどの機能を検出するための回避策があります。

「@supports at-rule」の詳細

7. <meta name="text-scale">

text-scale HTML メタタグは、<html> ルート要素の初期フォントサイズを OS とブラウザレベルのテキスト スケール設定に比例して拡大縮小するようにページを設定します。これはモバイル プラットフォームで特に重要です。

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

Source

適用すると、html 要素のフォントサイズはオペレーティング システムによって決定されるため、ベースの font-size を設定する必要はありません。次に、em や rem などの相対単位で長さを指定すると、計算されたピクセル値はそのベースのフォントサイズに基づいて計算されます。

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

DevTools のレンダリング タブで、優先フォントサイズをエミュレートできます。プルダウンを使用して値を変更します。

「<meta name=text-scale>」の詳細

パート 2: 自然なやり取りを実装する

直感的な物理的な動きと自然なジェスチャーは、ウェブ エクスペリエンスをネイティブ アプリケーションと同じくらい触覚的なものにするための鍵となります。最新の CSS を使用すると、これを簡単に実現できます。

8. linear() イージング関数

linear() イージング関数を使用すると、指定した進行状況ポイント間で線形補間を行うことで、複雑なカスタム トランジション曲線（バウンド、スプリング、弾性オーバーシュートなど）を作成できます。

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

次のデモでは、linear() を使用して、ダイアログの表示と非表示を自然なイージングで切り替えています。

「linear()」の詳細

9. @starting-style

@starting-style CSS @ 規則は、要素が DOM で最初にレンダリングされるとき、または display が none から表示可能な値に変化するときに、要素のプロパティの開始値を定義し、スムーズなエントリ遷移を可能にします。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

前のデモでは、<dialog> が最初に表示されるときにアニメーションで表示するために使用されています。

10. transition-behavior: allow-discrete

transition-behavior プロパティ（transition ショートハンドで allow-discrete として使用されることが多い）を使用すると、display や overlay などの個別のプロパティを遷移させ、要素が非表示になる前に終了アニメーション中に表示されたままになるようにできます。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index()、sibling-count()

sibling-index() と sibling-count() の CSS 関数は、それぞれ、兄弟要素の中での要素の 1 から始まる位置と兄弟要素の合計数を表す整数を返します。JavaScript を使用せずに CSS でスタッガード アニメーションの遅延を動的に計算するのに最適です。

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

このデモでは、animation-delay の sibling-index() を使用してダイアログの内容をずらしています。

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. ダイアログ ライトの閉じる（closedby 属性）

<dialog> 要素の closedby 属性（値は any）を使用すると、宣言型の「ライト ディスミス」動作を使用できます。これにより、モーダル ダイアログの外側をクリックするか ESC キーを押すと、カスタム JavaScript を必要とせずにモーダル ダイアログが自動的に閉じます。

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

前のデモで試すことができます。

13. corner-shape

試験運用版の corner-shape 省略形プロパティを使用すると、デベロッパーは角丸（border-radius）を変更して、bevel、scoop、notch、squircle などのカスタムの視覚的形状を作成できます（superellipse() 経由）。境界線、シャドウ、フォーカス アウトラインは、形状に合わせて自動的に調整されます。

Browser Support

  • Chrome: 139.
  • Edge: 139.
  • Firefox: not supported.
  • Safari: not supported.

Source

パート 3: ガイド付きナビゲーションを提供する

ユーザー ジャーニーをガイドすることで、コンテキストを維持し、アプリケーションのフローを理解し、混乱を招くリロードを排除できます。これを行うには、ビューの切り替えなど、いくつかの方法があります。ビューの切り替えは最近いくつかのアップデートが行われました。

14. 同じドキュメント内のビューの切り替え

View Transition API の一部であるドキュメント内遷移は、スナップショットをキャプチャして CSS を使用して遷移することで、シングルページ アプリケーション（SPA）の DOM 状態間でアニメーションを行うメカニズムを提供します。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

同じドキュメント内のビューの切り替えについて

15. クロスドキュメント ビューの切り替え

View Transition API をマルチページ アプリケーション（MPA）に拡張し、ページ間で同じ view-transition-name を持つ要素を照合することで、異なるドキュメント間を移動する際にシームレスなアニメーション遷移を作成できるようにします。

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

クロスドキュメント ビューの切り替えの詳細

16. 要素スコープのビュー遷移

Chrome 147 で導入された要素スコープのビュー遷移を使用すると、ページの残りの部分をアクティブでインタラクティブな状態に保ちながら、特定の DOM サブツリー（element.startViewTransition() を使用）でのみビュー遷移を実行できます。

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

要素スコープのビュー トランジションを開始すると、分離して実行されます。そのサブツリーで view-transition-name を持つ要素のみがスキャンされ、::view-transition 疑似クラスがスコープ ルート自体に挿入されます。この分離は、view-transition-scope: all の自動適用によって実現されます。

これにより、複数のビュー遷移を同時に実行したり、ビュー遷移をネストしたりできます。これらのリスト内のアイテムをシャッフルしながら、リスト自体を入れ替えることもできます。

また、グループの疑似要素は自動的にネストされ、必要に応じて、囲んでいるグループの子の疑似要素のオーバーフローがクリップされます。

スコープ付きビュー遷移は、マイクロ インタラクションやページ内でのステートフルなモーフィングに最適です。視覚的な変化がある場合に、ユーザーにコンテキストをより多く提供できます。これは、アプリの使いやすさを向上させながら、見た目や操作感を高める優れた方法です。こうした小さなことが大きな違いを生み出します。

要素スコープのビュー トランジションの詳細

17. 2 フェーズのビュー切り替え

これは、新しい DOM の準備が整うのを待たずに、すぐにクロスドキュメント ビューの切り替えを開始する試験運用版の機能です。まず、中間スケルトン画面または読み込み UI に切り替えてから、クロスドキュメント ビューの切り替えを続行します。

2 フェーズのビュー切り替えの詳細

18. スクロールドリブン アニメーション

スクロール ドリブン アニメーションは、CSS アニメーションの進行状況をスクロール コンテナのスクロール位置に直接リンクさせ、デベロッパーが効率的な視差効果やスクロール インジケーターなどのスクロール ベースのインターフェースを構築できるようにします。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. スクロール トリガー アニメーション

Chrome には、スクロールでトリガーされるアニメーションが新たに導入されています。スクロール トリガー アニメーションは、スクロール境界が交差したときに標準の時間ベースの CSS アニメーションをトリガーします（timeline-trigger を使用してトリガーを定義し、animation-trigger を使用して再生します）。これにより、IntersectionObserver の宣言型代替手段が提供されます。

Browser Support

  • Chrome: 146.
  • Edge: 146.
  • Firefox: not supported.
  • Safari: not supported.

スクロール トリガー アニメーションの基盤となるメカニズムは、有効または無効のタイムライン トリガーです。

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

次のデモでビジュアライザーをオンにすると、何が起こっているかを確認できます。最初の範囲はアクティベーション範囲で、トリガーがアクティブになるタイミングを決定します。2 つ目の範囲はアクティブ範囲で、アクティブな状態を維持する期間を決定します。

スクロール トリガー アニメーションの詳細

20. scroll-target-group: auto

ユーザーのスクロール位置に基づいてナビゲーション リンクを自動的にハイライト表示する、ネイティブ CSS スクロール スパイを構築できるようになりました。ナビゲーション リストに scroll-target-group: auto を設定すると、ブラウザは自動的に aria-current="true" を設定し、アクティブなリンクに :target-current 疑似クラスを適用します。:target-current を使用して、アクティブなリンクのスタイルをさらに設定できます。

Browser Support

  • Chrome: 140.
  • Edge: 140.
  • Firefox: not supported.
  • Safari: not supported.

Source

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: not supported.
  • Safari: not supported.

Source

scroll-target-group を使用した CSS スクロール スパイの詳細

21. scrollIntoView() コンテナ オプション

scrollIntoView() メソッドに container オプションが追加されます。target.scrollIntoView({container: 'nearest'}) を設定すると、スクロールが一番上の要素までバブリングされず、最も近い祖先スクローラーに制限されるため、ページレベルのスクロールによる混乱を防ぐことができます。

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

このデモのチェックボックスを使用して、オプションのオンとオフを切り替えます。

「container: "nearest"」の詳細

22. プログラムによるスクロールの待機可能化

すべてのプログラムによるスクロール メソッド（scroll()、scrollTo()、scrollIntoView() など）が Promise を返すようになりました。これにより、デベロッパーは、後続のロジック（ハイライト効果の追加など）を実行する前に、スムーズ スクロール アニメーションの完了を await できます。

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

次のデモでは、要素が最初にビューにスクロールされ、その後ハイライト効果が追加される様子を確認できます。

パート 4: コンテンツを最大化し、ノイズを低減する

ウェブで最もストレスを感じる体験の一つは、コンテンツを見ようとしたときに、邪魔なポップアップやバナーでブロックされることです。視覚的なノイズやアプリの境界線を排除し、セカンダリ アクションをレイヤード UI の背後に移動することで、コンテンツ領域を優先します。

23. スクロール状態クエリ（scrolled）

CSS コンテナ クエリの一部である scroll-state クエリを使用すると、コンテナ（container-type: scroll-state を使用）のスクロール状態に基づいて子孫のスタイルを設定できます。scrolled クエリ（scroll-state(scrolled: bottom) など）は、最新の相対スクロールの方向を検出し、「Hidey Bar」のようなパターンを可能にします。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

「Hidey Bar」パターンについて

24. アンカー付きコンテナクエリ

CSS アンカー ポジショニングには、アンカー ポジショニングされた要素で現在アクティブなフォールバック位置（fallback: bottom や fallback: flip-block など）を確認できるアンカー コンテナ クエリが含まれています。これにより、アンカー ポジショニングされた要素（ツールチップの矢印など）のスタイルを動的に更新できます。

Browser Support

  • Chrome: 143.
  • Edge: 143.
  • Firefox: not supported.
  • Safari: not supported.

次のデモでは、アンカー付きコンテナ クエリを使用して、アンカー付きポップオーバーがフォールバック位置とビューポート内の位置に基づいて再配置されます。ツールチップが呼び出し元の上に開くときは、ソースから下から上に向かってアニメーションします。呼び出し元の下に表示される場合は、上から下へのアニメーションになります。

25. CSS border-shape

border-shape プロパティを使用すると、clip-path と同じ形状構文を使用して、長方形以外の境界線を定義できます。クリッピングとは異なり、border-shape では、境界線、アウトライン、シャドウがカスタムシェイプと視覚的に揃えられます。また、border-shape は corner-shape よりもはるかに柔軟性が高いため、corner-shape の機能を超えています。

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: not supported.
  • Safari: not supported.

26. CSS shape() 関数

CSS の shape() 関数を使用すると、CSS で複雑な幾何学的パスをインラインで定義できます。clip-path、border-shape、shape-outside などのプロパティと組み合わせて使用すると、コンテンツが回り込むことができる有機的で長方形以外の形状を作成できます。

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. 軸ごとの固定位置

最近のオーバーフロー仕様の変更により、コンテナを単一の軸のスクローラーにできるようになったため、スティッキー ポジショニングで 2 つの異なるスクロール コンテナ（軸ごとに 1 つ）を同時に追跡できるようになりました。これにより、単一軸スクロール コンテナ内でも、テーブルの最初の列と上部の行が期待どおりに固定されます。

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

この機能は、Chrome 148 で試験運用版のウェブ プラットフォームの機能フラグを有効にするとテストできます。

軸ごとの position: sticky の詳細

パート 5: フォーム ファクタに対応する

ウェブの最も価値のあることの一つは、その柔軟性です。ユーザーはさまざまなデバイスからウェブを閲覧できます。各デバイスには独自の操作メカニズムがあります。レイアウトは、仮想キーボードが開いているか、タッチ ターゲットがアクティブかどうかにかかわらず、デバイスと入力方法に根本的に適応する必要があります。ウェブ向けに設計する際にフォーム ファクタを考慮することで、サイトやウェブアプリに洗練さが加わり、ユーザーの期待に沿うことができます。

28. オーバースクロール ジェスチャー（スワイプ可能な領域）

フォーム ファクタへの適応の例としては、モバイルウェブでスワイプやジェスチャー ベースの操作を使用できることが挙げられます。スクローラーを使用してこれらの効果の一部を実現できますが、必ずしも直感的なアプローチではありません。

Chrome チームは、OpenUI コミュニティ グループと協議して、overscrollcontainer とコマンド呼び出し元を使用して、ネイティブのジェスチャー駆動型スワイプ可能領域（スワイプ可能な Gmail リストやスワイプで閉じるサイドメニューなど）を作成し、タッチとスクロールを自然に連携させる宣言型ソリューションを提案しています。

オーバースクロール ジェスチャーの詳細

29. HTML-in-Canvas

HTML-in-Canvas API は、デベロッパーが実際の DOM 要素を <canvas> 内に配置できるようにする（layoutsubtree 属性を使用）大きなパラダイム シフトです。これらの要素は、完全に検索可能でアクセス可能であり、自動入力などのブラウザ機能をサポートしながら、WebGL/WebGPU シェーダーがネイティブに操作できるようにします。

ライトニング ラウンド

ウェブを前進させるその他の強力な機能について簡単に見ていきましょう。

30. DOM の状態を保持する移動（moveBefore()）

moveBefore() DOM メソッドを使用すると、状態を破棄したり再読み込みをトリガーしたりすることなく、DOM ノード（動画の再生、iframe、フォーカスされた入力など）の親を変更できます。

つまり、レイアウト全体で要素を再親要素化しても、動画の再生は継続され、iframe の再読み込みや CSS アニメーションの再開は行われず、入力フィールドのフォーカスは維持されます。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

「moveBefore()」の詳細

31. CSS text-fit

text-fit は、フォントサイズを動的にスケーリングして、テキスト行を包含要素（text-fit: grow per-line-all など）の正確な幅に正確に合わせる実験的な CSS プロパティです。

「text-fit」の詳細

32. CSS text-box（text-box-trim と text-box-edge）

text-box プロパティ（およびそのショートハンド text-box-trim と text-box-edge）は、テキストの上下の垂直スペース（行送り）をトリミングし、垂直方向の完璧な配置と中央揃えを実現します。

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

「text-trim」の詳細

33. CSS ギャップ装飾

CSS のギャップ装飾により、グリッドと flexbox に column-rule が導入され、新しい row-rule プロパティが導入されます。これにより、デベロッパーは行と列の間のガターのスタイルを設定できます。行と列の間のルールをスタイル設定するために、枠線や疑似要素を操作する必要がなくなります。

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

CSS Gap Decorations の詳細

34. スクロールバーを考慮したビューポート単位（vw、vh など）

vw や vh などのビューポート単位は、スクロールバーのサイズを自動的に差し引きます（:root で宣言された overflow-y: scroll または scrollbar-gutter: stable を使用して表示されることが保証されている場合）。これにより、要素を 100vw に設定したときに水平方向のオーバーフローが誤って発生するのを防ぎます。

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

スクロールバーを考慮したビューポート単位の詳細

35. 疑似要素への JavaScript アクセス

Web API が CSS 疑似要素（::before や ::after など）を JavaScript に公開するようになりました。

Element.pseudo(type) を使用して CSSPseudoElement インスタンスを取得し、Event.pseudoTarget を使用してどの疑似要素がイベントをトリガーしたかを確認できます。

Browser Support

  • Chrome: 149.
  • Edge: 149.
  • Firefox: not supported.
  • Safari: not supported.

「CSSPseudoElement」の詳細

まとめ

ウェブ UI の最新情報のまとめは以上です。これらの機能を利用して、優れたインターフェースを構築していただければ幸いです。それでは、また来年もお会いしましょう！