Design Pattern

モーダルダイアログ

モーダルダイアログは、ユーザーの注意を特定のタスクに集中させるオーバーレイです。HTML の dialog 要素と showModal() を使うと、フォーカストラップや Escape キー対応をブラウザネイティブに活用できます。

難易度: 上級カテゴリ: オーバーレイ

いつ使う / 使わない

使うべきとき

重要なアクションの確認を求める場合
短いフォーム入力や補助作業をページ遷移なしで完了させたい場合
緊急のエラーや警告を強く伝える場合

使わないべきとき

単純な通知や軽いフィードバック → トーストやバナーを使う
長い複数ステップの入力フロー
常時参照すべき情報を見せる用途

構造（Anatomy）

1 バックドロップ（背景オーバーレイ）

2 ダイアログコンテナ

3 タイトル（見出し）

4 コンテンツ領域（本文・フォームなど）

5 アクションボタン（確認・キャンセル）

バックドロップ — ::backdrop でスタイリングする背景オーバーレイ
ダイアログ本体 — dialog 要素。タイトルや本文を含む対話領域
タイトル — ダイアログの目的を示し、aria-labelledby で関連付ける
本文 — 説明文、フォーム、警告などを配置する
アクション — 確認やキャンセルを行う操作群。初期フォーカス対象もここで決める

HTML 構造

重要なポイント

ネイティブの dialog 要素を使い、showModal() でモーダル表示する
method="dialog" を使うと、送信時に閉じる対話を簡潔に実装できる
適切な見出しを用意し、aria-labelledby で関連付ける
autofocus や開閉時の制御で、初期フォーカスと復帰先を明示する

CSS 実装

配置とスタイル設計

中央配置は position: fixed と transform で安定して制御する
::backdrop で背景の非活性を視覚化する
モバイルでは min() や max-width で横幅を制限する
ブラウザデフォルトの margin をリセットして位置ずれを防ぐ

キーボード操作

Escape でダイアログを閉じる
Tab / Shift+Tab でダイアログ内のフォーカスを循環する
閉じた後はトリガーボタンにフォーカスが戻る

ライブデモ

確認ダイアログ

確認系の最小構成。method="dialog" を使って閉じます。

フォームダイアログ

入力欄を含むパターンで、初期フォーカスを制御します。

アラートダイアログ

重要な警告を伝える alertdialog バリエーションです。

よくある間違い

dialog 要素を使わず div で実装する

フォーカス管理や閉じる操作をすべて自前で持つことになり、実装コストと漏れが増えます。

フォーカスを適切に管理しない

開いたときも閉じたときも、ユーザーの操作文脈が途切れないようにする必要があります。

Escape キーで閉じられない

オーバーレイを終了する一般的な操作を失うと、キーボード利用者が困ります。

バックドロップや閉じる条件が不明瞭

どの操作で閉じるのかが分からないと、ユーザーが対話を完了できなくなります。