モーダルダイアログ（バックドロップフェード）
クラシックなモーダル実装。バックドロップフェード + センター配置 + Escape キー対応 + フォーカス管理付き。JS で開閉制御。
解説
このモーダルは、暗い背景（バックドロップ）がフェードインし、ダイアログがポンと弾むように現れる定番の重ね表示です。表示の切り替えは HTML の hidden 属性を JavaScript で付け外しする素直な方式で、CSS の .modal[hidden]{display:none} と組み合わせています。開く・閉じるは三経路に対応します。閉じるボタンのクリック、バックドロップ（外側）のクリック、そして keydown で Escape キーを押したときです。ダイアログには role="dialog" と aria-modal="true" が付いており、支援技術にモーダルであることを伝えます。出現アニメは背景の fade とダイアログの pop という二つの @keyframes です。
使う場面
- 確認・注意喚起（削除確認、規約同意など）のダイアログ
- 簡易フォームをページ遷移なしで出す
- 画像や詳細情報のクイックビュー
アニメの速さや弾み方は fade・pop の duration とイージングで調整できます。アクセシビリティを高めるなら、開いたときにダイアログへフォーカスを移し、Tab 移動をモーダル内に閉じ込める（フォーカストラップ）処理を足すとより安全です。prefers-reduced-motion で出現アニメを抑える配慮も検討してください。
使用例・適したシーン
- 利用規約・プライバシーポリシー表示
- 画像拡大表示
- 確認ダイアログ
よくある質問
どの操作でモーダルを閉じられますか
閉じるボタンのクリック、暗い背景（バックドロップ）の外側クリック、そしてEscapeキーの3通りで閉じられます。いずれもJavaScriptでhidden属性を付け直して非表示にしています。
アクセシビリティで追加した方がよいことは
ダイアログにrole=dialogとaria-modal=trueが付いていますが、さらに開いた時にダイアログへフォーカスを移し、Tab移動をモーダル内に閉じ込めるフォーカストラップを足すと、キーボードユーザーにより安全になります。