モーダルとダイアログのスタイリング

HTML の <dialog> 要素は、フォーカストラップ、Escape キーでの終了、showModal() / close() API など、組み込みのモーダル動作を提供します。カスタムモーダルの土台を最初から構築するのではなく、CSS でスタイルを設定してください。

::backdrop 疑似要素を使うと、開いている <dialog> の背後にあるオーバーレイをスタイル設定できます。半透明の背景を適用します。dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); } のように指定します。ラッパーの div は必要ありません。

CSS で dialog を中央揃えにします。dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; } のように指定します。dialog に margin: auto を使うと、JavaScript で位置を計算しなくてもビューポートの中央に配置できます。

長いコンテンツを処理するには、dialog 自体に overflow-y: auto を設定します。モーダルが開いたときに body に overflow: hidden を設定すると、背景のスクロールを防げます。JavaScript でクラスを追加・削除して、この状態を切り替えてください。

@starting-style（Chrome 117 以降）を使うと、JavaScript なしで dialog の表示時アニメーションを CSS だけで実装できます。より広いブラウザー対応が必要な場合は、JavaScript で open クラスを追加し、transform と opacity に transition を使います。translateY(20px) から translateY(0) へ移動するスライドアップなどが可能です。

dialog の終了アニメーションは難しい処理です。close() を呼び出すと dialog がすぐに非表示になるためです。解決策として、終了アニメーションをネイティブでサポートする popover API を使うか、JavaScript で終了処理を横取りし、終了アニメーション用のクラスを適用してから、アニメーション終了後に close() を呼び出します。

dialog はページ上のほかのすべてのコンテンツより上に開きます。dialog 自体に z-index を設定する必要はありません。ネイティブの stacking context を使うことで z-index の競合を避けられます。dialog は top layer に描画され、すべての CSS の z-index 値より上に表示されます。

モバイルでは、dialog をシートとして画面下部からスライド表示します。dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; } のように指定します。デスクトップでは、margin: auto パターンを使って従来のモーダルのように中央揃えにします。

ネイティブの dialog 要素は、開いたときに内部の最初のフォーカス可能な要素へ自動的にフォーカスを移します。dialog 内の Tab 移動が論理的な順序になるようにしてください。適切なキーボード操作の流れを実現するため、dialog が閉じたときにトリガー要素へフォーカスを戻す閉じるボタンを追加します。

dialog のタイトルを指す aria-labelledby と、dialog の説明を指す aria-describedby を追加します。<dialog> では dialog ロールが暗黙的に設定されます。スクリーンリーダーは、フォーカスが dialog に入ったときにこれらのラベルを読み上げます。

確認ダイアログには、明確な質問形式のタイトル、影響を簡潔に説明する文、破壊的な操作のボタン（赤色で右寄せ）、キャンセルボタン（左寄せまたはセカンダリ）が必要です。キャンセルボタンに autofocus を使うと、安全な選択肢がキーボード操作のデフォルトになります。

::backdrop、margin: auto による中央揃え、オーバーフロー制御、表示時の CSS アニメーション、フォーカス管理を備えたネイティブの dialog 要素によって、アクセシブルで CSS 主体のモーダルパターンを実現できます。モバイル向けのレスポンシブなシートレイアウトと適切な ARIA 属性を加えることで、実運用に対応した dialog コンポーネントが完成します。