プロンプトとスコープ
この質問は、「ボタンの隣に配置する」という要件を検証可能なレイアウトおよびインタラクションの仕様として確立できるかをテストします。anchor-name、anchor()、候補位置、オーバーフロー、スクロール、機能検知、ならびにメニューやダイアログのキーボードおよびフォーカス動作を網羅してください。
面接官が評価しているポイント
- 安定したアンカー関係と、
position-area、anchor()、フォールバック位置の役割。 - ビューポートの端、スクロールコンテナ、ズーム、動的コンテンツにおける視認性。
- JavaScriptによる計測への依存を避け、プログレッシブエンハンスメントを採用しているか。
- メニュー、ツールチップ、ダイアログに対する適切なセマンティクスと動作。
- ブラウザマトリクス、ビジュアルリグレッション、キーボード、スクリーンリーダーによる検証。
推奨される回答の構成
ポップオーバーの種類、アンカー、最小表示領域を定義します。アンカーの命名、優先位置、フォールバック、非表示ルールを含むCSSパスを示します。次に、@supportsによる既存の位置決めコンポーネントへのフォールバックを説明し、フォーカス、スクロール、動的なサイズ変化、テストについて続けます。
ディープダイブ：使いやすくアクセシブルな配置
安定したアンカーの作成
トリガーに一意のanchor-nameを付与し、ポップオーバー側でposition-anchorまたは明示的な参照を使用します。行が連続する場合は、DOMの隣接関係から推測するのではなく、行ごとに安定した関係を作成し、アンマウント時に状態をクリアします。
候補位置とオーバーフロールールの定義
優先する側にposition-areaまたはanchor()を使用し、反対側、端揃え、縮小サイズにはposition-try-fallbacksまたは同等のルールを使用します。最大のブロックサイズと内部スクロールを設定します。収まらない場合は、コンテンツを切り取るのではなく、非表示にするかフルスクリーンパネルに切り替えます。
スクロールと動的サイズの処理
アンカーがスクロールコンテナ内で移動する場合、包含ブロック（containing block）とスタッキングコンテキストを確認します。非同期コンテンツ、フォントの読み込み、ズーム変更後に視認性を再確認します。ネイティブパスでは、手動によるスクロール計測を避けます。
プログレッシブエンハンスメントの追加
@supports (anchor-name: --trigger)を使用します。対応ブラウザはCSSを使用し、非対応ブラウザは、制限された計測、クリーンアップ、反転（flip）処理を備えた既存のポータルおよび位置決めロジックを再利用します。どちらのパスもメニューの状態とアクセシビリティルールを共有します。
セマンティクスをタスクに合わせる
メニューにはメニュー項目と文書化された矢印キーモデルを使用します。ツールチップには必須のアクションを含めてはなりません。背景が完全にブロックされている場合にのみダイアログを使用します。モーダルは、進入フォーカス、Tab動作、Escape、およびフォーカスの復元を管理します。
回答例
「フィルターは非モーダルメニューとして作成します。ボタンに安定したanchor-nameを付与し、メニューはその下にposition-anchorを使用し、上部やビューポートの端に沿ったフォールバック、および内部スクロール用の最大高さを設定します。@supportsが失敗した場合、状態とキーボード動作を共有したまま、既存のポータルポジショナーがレイアウトを処理します。開くと最初の項目にフォーカスが移動し、矢印キーでメニュー内を移動し、Escapeまたは外部クリックで閉じてボタンにフォーカスを戻します。スクリーンショット、キーボードチェック、スクリーンリーダーチェックを使用して、狭いビューポート、スクロールコンテナ、ズーム、非同期コンテンツ、クリッピングをテストします。」
よくある失敗パターンと対策
topとleftの設定のみを行う → 候補、オーバーフロー、サイズ制限、フォールバックについて説明する。- すべてのポップオーバーをモーダルにしてしまう → タスクごとにメニュー、ツールチップ、ダイアログを分類する。
- 非対応ブラウザを無視する →
@supportsと既存の位置決めフォールバックを提供する。 - 固定されたデスクトップウィンドウのみでテストする → スクロール、ズーム、狭い画面、動的コンテンツ、キーボード操作を含める。
- フォーカスをCSSの関心事として扱う → 開く、移動する、閉じる、フォーカス復元の状態を定義する。
採点ルーブリックとセルフチェック
優れた回答には、安定したアンカー、候補位置、オーバーフローおよび非表示ルール、プログレッシブエンハンスメント、スクロールおよび動的サイズの境界、正確なセマンティクス、フォーカス管理、テストマトリクス、オブザーバビリティが含まれます。
確認事項：アンカーは安定しているか？ メニューが収まらない場合はどうなるか？ スクロールコンテナ内では何が位置決めを行うか？ 古いブラウザではどう動作するか？ フォーカスはどこに戻るか？ 切り取り、ジャンプ、到達不能なコンテンツがないことをどのように証明するか？
フォローアップと発展
anchor()とposition-areaの違いは何ですか？
position-areaはアンカーに対する領域を表現します。anchor()は、インセット、オフセット、計算のためのエッジまたはサイズを公開します。これらを組み合わせることもできますが、依然としてフォールバックとサイズ制限が必要です。
メニューがビューポートよりも高い場合はどうなりますか？
ブロックサイズを制限し、コンテンツをスクロール可能にします。小さな画面では、タスクに適している場合はフルスクリーンまたはボトムシートに切り替えます。コンテンツがビューポートの外に残らないようにしてください。
配置候補はどのようにテストしますか？
ビューポートのサイズ、スクロール位置、ズーム、フォント、コンテンツの長さにわたってスクリーンショットを生成します。表示領域、フォーカス順序、および閉じた後のフォーカスターゲットをアサートします。
JavaScriptによる位置決めはどのような場合に依然として適切ですか？
古いブラウザ、複雑なポータルの境界、またはビジネスロジックによる衝突データのために、JavaScriptのフォールバックを維持します。対応ブラウザにはCSSで処理させ、機能のギャップや状態の同期にのみJavaScriptを使用します。