目次
Chrome for Developersは2026年10月20日付のDevTools更新案内で、CSSのposition-areaを視覚的に変更できるエディターを紹介しました。ボタンの近くに補足パネルを出す画面では、パネルがどの要素を基準にしているか、画面端でどちらへ移るかを確認しやすくなります。本稿は11月3日に確認した公式資料に基づく実践解説です。開閉、配置、画面端での反転を別々に検証し、既存の座標計算を減らせる条件を整理します。
スポンサーリンク
開閉と配置を別の層として設計する
Popover はパネルの表示状態を管理します。HTMLのbuttonにpopovertargetを指定すると、対応するIDの要素を開閉できます。CSS Anchor Positioningは、そのパネルをどこに置くかを担当します。この組み合わせでは、ボタンから開いたポップオーバーに暗黙のアンカーができるため、単純な構成ではanchor-nameで名前を付ける工程を省けます。開閉の関係はWHATWGのPopover仕様、配置の規則はCSS Working GroupのAnchor Positioning仕様で確認できます。
対象は、一覧画面の列の説明や入力欄の補足など、周囲の操作も続けられる小さなパネルです。例えば注文一覧の「配送状態の説明」を出したまま、隣の列にある別の項目を参照する場面です。背景の操作を止めて入力や確認を完了してもらう画面では、モーダルの要件として設計します。操作の種類を最初に決めると、後からフォーカスを閉じ込める処理を追加して挙動を作り直す手間を減らせます。
同じ画面でも、ボタンで開閉する補足と、リンク先へ移動する導線を分けて考えます。短い説明だけなら通常の本文に置く方法もあります。常時読めることで理解が進む文をパネルに移すと、確認に必要な操作が増えます。繰り返し表示すると一覧の行が読みにくくなる補足に絞ると、パネルを使う理由が明確になります。
基準となるボタンと通常時の位置を決める
次の例は一覧の一か所に配送状態の説明を出す構成です。位置指定を扱える環境ではボタンの下を優先し、下側で収まらない場合に反対側を試します。Popover APIは使えても位置指定を扱えない環境では、ブラウザーの標準配置が残ります。Popover API自体を扱えない環境では、説明を本文中で読める構成です。掲載例はこの制作環境では実行していません。
<button class="help-toggle" type="button" popovertarget="delivery-help">
配送状態の説明
</button>
<div id="delivery-help" class="help-panel" popover="auto">
<p>発送準備中は倉庫で梱包を進めている状態です。</p>
<button type="button" popovertarget="delivery-help"
popovertargetaction="hide">閉じる</button>
</div>.help-panel {
box-sizing: border-box;
inline-size: max-content;
max-inline-size: min(22rem, calc(100vi - 2rem));
max-block-size: calc(100dvb - 2rem);
overflow: auto;
overflow-wrap: anywhere;
padding: .75rem 1rem;
border: 1px solid #64748b;
border-radius: .5rem;
background: white;
color: #172033;
}
@supports selector(:popover-open) {
.help-panel:popover-open { display: block; }
}
@supports not selector(:popover-open) {
.help-toggle, .help-panel button { display: none; }
}
@supports selector(:popover-open) and (position-area: block-end)
and (position-try-fallbacks: flip-block) {
.help-panel:popover-open {
position: fixed;
inset: auto;
margin: 0;
position-area: block-end;
position-try-fallbacks: flip-block;
}
}ボタンはtypeを明示し、フォームの中に入っても送信操作と混ざらないようにしています。閉じるボタンは同じIDを指し、hideを指定します。複数行に同じ部品を置く場合、IDは行ごとに一意にします。テンプレートの複製でIDが重複すると、意図した行と別の説明が開くことがあり、配置を調整する前に開閉対象の一致を確認する必要があります。
CSSでは開いた状態にだけdisplayを指定しています。閉じている要素へ常時displayを指定すると、ユーザーエージェントの非表示スタイルを上書きするおそれがあります。標準配置を残す条件ではinsetやmarginもそのままにします。先に中央配置のための余白を解除してしまうと、位置指定が適用されない環境で表示位置だけが変わることがあります。
position-areaはアンカーを囲む領域から配置先を選びます。通常の横書きでblock-endを指定すると、ボタンの下側を基準に配置できます。flip-blockはブロック軸を反転する候補です。上か下かという物理方向と、書字方向から決まるブロック軸を区別してください。横書きだけを想定した図を縦書きや右から左へ進むページに当てはめる際は、実際の配置を別に確認します。
スポンサーリンク
反転候補を足す前にパネルの寸法を測る
反転が働くかどうかは、パネルとその配置領域の寸法に左右されます。開く場所を画面中央、下端、上端、左右の端へ移し、同じ説明で比較します。下端だけで失敗するならブロック方向の候補が役に立ちます。左右だけで切れるなら、まず長い文字列やパネル幅を確認します。上に反転しても横幅の問題は残るため、どの軸に余地がないかを先に見ます。
上と下のどちらにも十分な余地がない場合は、反転候補だけで読みやすい画面を作れません。短い要約と詳細ページへのリンクに分ける、狭い画面では文書内の説明へ切り替える、パネル内でスクロールできるようにする、といった設計を比較します。スクロールを選ぶ場合は、閉じる操作が内容の末尾まで移動しないと見つからない構成になっていないかも確認します。
例の最大幅は横長の内容が際限なく広がるのを抑えます。画面全体に対する寸法制限を設けても、アンカー付近に同じ広さが確保されるとは限りません。実際の文言、改行しづらい注文番号、翻訳で長くなったラベルを入れて測ります。ダミーの短文では収まった条件と、運用データを入れた条件を区別して記録してください。
Elementsで宣言と実際のアンカーを照合する
ChromeのChrome for DevelopersのDevTools更新案内は、ElementsパネルのStyles欄にあるposition-areaのスウォッチから配置候補を試せると説明しています。先に実ページで補足を開き、Elementsでパネルの要素を選択します。Styles欄に目的の宣言が出るか確認し、表示された場合はスウォッチで上下や横の候補を比較します。変更前後でアンカーの位置を動かし、同じパネルがどの条件で切り替わるかを見ます。
宣言が表示されない場合は、CSSファイルが届いているか、対象のクラス名と開いている状態が一致するか、@supportsが成立するかの順で切り分けます。宣言が取り消し線になっていれば、別ルールの詳細度や読み込み順も確認します。DevToolsで一時的に選んだ値は、元のCSSに反映してページを読み直し、同じ結果になるところまで確かめます。
複数のボタンで同じパネルを開く部品では、最後に押したボタンと検査中の要素の関係を追います。公式案内には、ツリーにあるpopoverのバッジのコンテキストメニューから複数の暗黙アンカーを調べる機能も記載されています。開くボタンを交互に変え、意図した起点で出るかを確かめます。検査中にDOMが再生成される構成なら、古いノードを見続けていないかも確認してください。
表示がずれたときは、DevToolsのアンカー配置のオーバーレイでパネルの配置に使われる領域を確認できます。見た目で数ピクセルのずれを追う前に、基準の要素、配置領域、パネルの幅と高さを分けて観察します。配置に使える領域が想定より狭ければ、位置の候補を足す作業より、幅や内容の制約を見直す方が原因を切り分けやすくなります。
スポンサーリンク
操作試験は位置が変わるケースと組み合わせる
最初にボタンへTabキーで移動して開き、説明を読めるか、閉じるボタンへ移動できるか、Escapeで閉じた後にどこへ戻るかを確認します。ポップオーバーは周囲の操作を継続できる部品なので、モーダル向けのTab循環を流用すると、本来選べるはずの操作を制限してしまいます。視覚的な上下反転が起きても、キーボードの操作順とフォーカス表示を追えることが合格条件です。
外側をクリックして閉じる場面と、閉じるボタンを押す場面を分けます。外側にある次の操作をクリックしたときは、その操作が利用者の意図どおり実行されるかも確認します。タッチ端末ではボタンの近くに出たパネルが押したい操作を覆っていないかを見ます。パネルの外周だけを確認するより、開いてから作業を再開する一連の流れで試す方が、実際のつまずきを見つけられます。
一覧をスクロールした場合、固定ヘッダーの下にボタンが隠れた場合、画面を拡大した場合も試します。ボタンが見えなくなっても補足が残ると、どの行の説明か分かりにくくなります。意図する動作を製品側で決め、必要なら閉じる条件を追加します。データ更新で行が削除される画面では、パネルと起点のどちらが残るか、閉じた後に次の作業位置へ移れるかも確認します。
対象ブラウザーでは標準配置とアンカー配置の両方を検証します。CSSの機能クエリーは宣言を解釈できるかを調べる条件です。実際に狭い画面で収まるか、特定の組み合わせで操作できるかは別途確認します。検証記録にはブラウザー版、表示倍率、、開いたボタン、選ばれた位置、閉じた後のフォーカスを残します。再現に必要な条件が揃えば、次の変更で同じ確認を繰り返せます。
既存の座標計算を外せる範囲を決める
既存実装でスクロールやリサイズのたびに座標を計算している場合は、まず一種類の補足パネルだけを置き換えます。共通ライブラリーが担っていた処理には、開閉状態の同期、外側操作の処理、スクロール時の終了、衝突回避なども含まれ得ます。座標の計算をCSSへ移した後、製品の要件として残る処理を項目ごとに確認します。
画面の四辺、拡大表示、複数起点、キーボードでの終了まで通る構成から移行を進めます。配置を固定できない長い内容や、独自の重なり順を必要とする画面は別に評価します。同じコードへ一律に移すより、ブラウザーの標準配置で成立する範囲と、製品固有の判断が必要な範囲を先に切り分けると、変更の影響を説明しやすくなります。
関連記事
背景の操作を止める入力画面では、HTMLのdialogでモーダルを作る｜初期フォーカスと閉じた後の戻り先まで実装するで扱う初期フォーカスと復帰位置の設計も確認できます。
参考資料
WHATWGのPopover仕様
CSS Working GroupのAnchor Positioning仕様
Chrome for DevelopersのDevTools更新案内
