web制作

Interop 2026で何が変わる？Popover・View Transitions・Anchor Positioningを初心者向けに解説

更新日：2026-10-06 著者：unigram 読了目安：7分

この記事の要点

Interop 2026で注目されるCSS・JS新機能（Popover API・View Transitions・Anchor Positioning）を初心者向けにわかりやすく解説。従来のJavaScriptやCSSとの違い、実際の使いどころ、ブラウザ対応状況まで整理しました。

PR 本ページにはプロモーションが含まれています。

この記事では、Interop 2026で注目されている3つのCSS・JS新機能についてまとめています

「CSSが進化している」と聞いても、何がどう変わるのかピンとこない方は多いはずです。特にWeb制作を始めたばかりの方にとって、ブラウザの互換性（どのブラウザでも同じように表示される状態）という話題は、少し遠く感じるかもしれません。

でも実は、これが実案件に直結する話です。Interop 2026とは、Google・Mozilla・Apple・Microsoftなど主要ブラウザメーカーが共同で進める「ブラウザ間の動作統一プロジェクト」のことで、2026年2月12日にweb.dev公式ブログで正式発表されました。

このプロジェクトによって対象に選ばれた機能は、各ブラウザでの動作が揃うよう集中的に改善されます。つまり「ChromeでしかできなかったこれがSafariでも使えるようになる」という状況が生まれやすくなります。

今回はその中から、特に実務で役立つ3つの機能を取り上げます。

Popover API：ツールチップや通知バナーをJavaScript最小限で表示する仕組み
View Transitions：ページ切り替えに滑らかなアニメーションを加える機能
Anchor Positioning：特定の要素を基準に別の要素を自動配置するCSS機能

それぞれ「従来はどうやっていたか」「何が楽になるか」「実際にどう書くか」をセットで説明します。

Popover API｜JavaScript不要でポップアップが作れる

従来のやり方と何が違うか

これまでポップアップ（画面上に浮き出る通知や吹き出し）を作るには、JavaScriptで「クリックしたら表示・もう一度クリックしたら非表示」という処理を自分で書く必要がありました。慣れていないと、クリック外を判定する処理（「他の場所をクリックしたら閉じる」というよくある動作）がなかなか難しく、初心者が最初につまずくポイントの一つです。

Popover APIはHTML属性（HTMLに直接書き込む設定値）だけでこの動作を実現できます。2025年1月27日にBaseline Newly available（主要ブラウザで使えると公式が認定した状態）となっており、今すぐ実務で使い始めてよい段階です。

実際にどう書くか

HTMLに以下のように書くだけで動作します。

表示させたい要素に popover という属性を追加し、idをつける（例：id=”my-popup”）
ボタンに popovertarget=”my-popup” という属性を追加する

これだけでボタンをクリックするとポップアップが表示され、外側をクリックすると閉じます。JavaScriptを一行も書かずに完成です。

実際に使ってみて感じること

最初「本当にこれだけで動くの？」と半信半疑になります。実際に動かすと、「あの複雑なJSコードは何だったんだ」という感覚になります。特に社内サイトの簡易通知バナーや、入力フォームのヒント表示に重宝します。慣れると「ちょっとしたポップアップはPopoverで済ます」が自分の定番になります。

View Transitions｜ページ切り替えをアプリのように滑らかにする

「画面がパッと切り替わる」問題を解決する

Webサイトのページを移動すると、通常は画面が白くなってから次のページが表示されます。スマホアプリでよく見る「スルッとスライドして次の画面へ」という体験とは別物です。View Transitionsはこのギャップを埋めるための機能です。

同一ドキュメント内（同じページ内でコンテンツを切り替えるタイプのサイト）のView TransitionsはInterop 2025の成果としてBaseline Newly availableとなっています。つまり主要ブラウザで動作確認済みの段階です。

Interop 2026ではさらにページをまたぐクロスドキュメントのView Transitionsの互換性改善が重点分野として取り上げられています。ただし、クロスドキュメントのView Transitionsについてはブラウザ対応が進行中の段階であるため、実案件での使用前に各ブラウザの最新対応状況の確認を推奨します。

実際の使いどころ

たとえばWordPressのシングルページ的な動作（同一ページ内でコンテンツを切り替えるタイプ）や、SPAのような動きを取り入れたLPで効果を発揮します。実際に試すと、フェードアウト・フェードインのような動きがCSSだけで表現できる点に驚きます。

最初につまずくポイント

「どこに書けばいいかわからない」が最初の壁です。基本的な流れはJavaScriptで document.startViewTransition() という関数（特定の処理をまとめた命令のかたまり）を呼び出し、その中でページ内容を書き換える処理を書きます。CSSで ::view-transition という特殊な記法を使ってアニメーションを調整します。最初は「とりあえずフェードだけ」と割り切って始めると理解しやすいです。

圧倒的にSEOに強いWPテーマ「ゴールドメディア」

WordPressテーマならLIQUID PRESS

誰でもかんたん！プロ級サイトをサクッと作成できる『Xwrite(エックスライト)』

Anchor Positioning｜「この要素の横に表示」をCSSだけで実現

従来の配置の難しさ

「ボタンのすぐ下にドロップダウンメニューを表示したい」——これを実現するには今まで、JavaScriptでボタンの位置（座標）を取得して、計算してメニューを配置するという処理が必要でした。画面のスクロール量や要素のサイズが変わるたびに計算がずれることもあり、地味に面倒な処理でした。

Anchor Positioningは「この要素（アンカー）を基準に配置する」という指定をCSSだけで書ける機能です。Interop 2026の重点分野として選ばれており、ブラウザ間の動作統一が進められています。

イメージをつかむための例え

Anchor Positioningは「付箋をノートの特定の行に固定するルール」のようなものです。ノート（画面）がどんなサイズでも、指定した行（アンカー要素）の横に付箋（配置したい要素）が自動でくっついてきます。

実際の記述イメージ

基準にしたい要素に anchor-name: –my-button というCSSを書いてアンカー（基準点）として登録する
配置したい要素に position-anchor: –my-button を指定し、top: anchor(bottom) のように「アンカーの下端を基準にする」と書く

JavaScriptで座標計算をしなくて済む分、コードが読みやすく保守（後から修正しやすい状態）しやすくなります。

注意点

Anchor PositioningはInterop 2026の対象として互換性改善が進む段階にあります。使用前には実際のブラウザでの動作確認を行い、対応していない環境向けのフォールバック（代替表示）を用意しておくのが安全です。

Baselineとは何か｜「使っていい機能かどうか」の目安

web.devが提供するBaseline（ベースライン）は、機能がどの段階にあるかを3段階で示す公式指標です。

ステータス	意味	実務での判断
Baseline Newly available	主要ブラウザすべてで使えるようになった	使い始めてOK。古いブラウザへの配慮は必要
Baseline Widely available	2年以上普及が続いている	安心して使える
Limited availability	一部ブラウザしか対応していない	本番環境での使用は慎重に