確認ダイアログ型 モーダル

通称：確認ダイアログConfirmation dialog (alert dialog)

見本の中のメニューやボタンは押して動きを試せます（リンク先へは移動しません）。

データの削除や退会のように、やり直しのきかない操作を実行する直前に開き、その結果どうなるかを示したうえで、進めるかやめるかを選んでもらう小さなダイアログです。操作をいったん止める強い部品なので、本当に取り返しがつかない場面だけに使います。

自分のサイトの中身で、この形を作らせる指示文です。最初の「サイトの情報」を書き換えてから渡します。今あるページを直させるときは、その HTML を貼ります。

この形で作る 
# サイトの情報（ここを書き換える）
- どんなサイトか：〈例：工務店のサイト、税理士事務所のサイト、ネットショップ〉
- 入れたい文言・項目：〈見出し・ボタンの文言・項目の数など。決まっていなければ空けてよい〉
- 今あるページ：〈今のページを直すなら、その HTML を貼る。新しく作るなら空ける〉

# 部品の呼び名
一般に「確認ダイアログ」（Confirmation dialog (alert dialog)）と呼ばれる部品です。

# 作ってほしいもの
確認ダイアログ型のモーダル（Confirmation dialog）。削除など元に戻せない操作の前に、何が起きるかを伝えて、続けるかどうかを選んでもらう。

# 並べるもの
- 開くきっかけ：一覧の行にある「削除」ボタン
- 見出し：何をするのかを問いの形で
- 説明：消えるものと、元に戻せないこと
- ボタン2つ：「キャンセル」と「削除する」。実行する側は赤い塗りのボタン、キャンセルは灰色の面のボタン

# 守ってほしいこと
- 素のHTMLなら dialog 要素を showModal() で開き、role="alertdialog"、aria-labelledby（見出し）、aria-describedby（説明）を付ける
- 開いたときのフォーカスは「キャンセル」に置く（Enter を続けて押しても消えないように）
- Esc では閉じてよい（キャンセルと同じ扱い）。背景を押しても閉じない
- ボタンの文字は「はい／いいえ」にせず、動作の名前（削除する）で書く
- 閉じたら、開くきっかけのボタンにフォーカスを戻す
- 削除したら、ページの側に「削除しました」と知らせる（role="status"）
- 幅は 440px まで。背景は半透明の濃い灰色で覆う

# SP（画面幅 599px 以下）
- ダイアログの幅は画面の左右に 16px ずつ余白を残す
- ボタンは縦に積んで横いっぱいにする。親指に近い下側に「キャンセル」を置く

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 色は CSS 変数（--accent など）にまとめ、あとから変えやすくする
- 文言は「サイトの情報」に合わせて考える。決まっていないところは〈 〉で囲んだ仮の文言にする
- 「並べるもの」に書いた項目の名前（エリア・間取りなど）は一例。サイトに合うものに置き換える
- 今あるページを渡したときは、そのページの色・文字・余白に合わせ、変えた場所を最後に箇条書きで知らせる

モーダルを8つの型に分け、AIへの指示文・動く見本・コードを載せています。

モーダルはどの型を選ぶか

モーダルは、いまの画面の上に重ねて、ほかの操作をいったん止める部品です。便利な反面、読み手の流れを止めるので、まず「ページの中に書けないか」「別のページにしたほうがよくないか」を考えます。そのうえで、確かめてほしいのか、読んでほしいのか、入力してほしいのかで型を選びます。

こんなとき 向いている型
削除や退会のように、やり直しのきかない操作の直前に念を押したい確認ダイアログ型
料金の決まりや用語の説明を、読む人だけに見せたい情報表示型
資料請求など、2〜3項目の入力をページを移らずに受けたいフォーム入り型
来店予約のように、選ぶものが2〜4段に分かれるステップ型
店内や施工例の写真を大きく、何枚も見てほしい画像拡大型
カートや詳しい情報を、いまのページの横に重ねて見せたいサイドパネル型
検索結果の絞り込みを、SP で片手で操作してほしいボトムシート型
会員ページで、お届け先などを一覧を見たまま1件追加・編集したいSP全画面型

開く・閉じるときの動き方は、アニメーション集の部品の動き（モーダルが開いて閉じる）にあります。

申し込みの入力が4項目を超える・添付ファイルがある・申し込みの前に必ず読んでほしい、のどれかに当たるときは、モーダルにせず1枚のページにします。会員ページで登録済みのお届け先などを1件足す・直すときは、SP全画面型が使えます。

どの型でも守ること

  1. dialog 要素の showModal() で開く。うしろのページを操作できなくする、Esc で閉じる、フォーカスをモーダルの中に閉じ込める、の3つをブラウザが受け持ちます。自前の div で作るときは、この3つを全部自分で書くことになります。
  2. 見出しで名前を付ける。aria-labelledby でモーダルの見出しと結んでおけば、開いた直後に読み上げソフトがそのモーダルの名前を読みます。
  3. 閉じる手段を見えるところに置く。× ボタンには aria-label="閉じる" を付けます。背景を押して閉じてよいかは型で決めます（確認やフォームは閉じない、読むだけのものは閉じてよい）。
  4. 閉じたときは、開くきっかけになったボタンへフォーカスを返す。Tab キーで移動している人が、元の場所から続けられます。
  5. 開いている間は、うしろのページをスクロールさせない。ここに載せたコードは html:has(dialog[open]) に overflow: hidden を当てています。

よくある質問 (FAQ)

ダイアログは「重ねて出す小さな画面」全般、モーダルはそのうち「閉じるまでうしろを操作できないもの」を指します。HTML の dialog 要素は、show() で開くとうしろも操作できるダイアログ、showModal() で開くとモーダルになります。このページの8つの型は、どれも showModal() で開くモーダルです。

読むだけのモーダルなら閉じてよく、確認や入力のモーダルでは閉じないほうが安全です。入力の途中で外側を押してしまうと、書いた内容が消えます。確認ダイアログでは、どちらを選んだのか分からないまま閉じてしまいます。閉じない型でも、閉じるボタンと Esc は残します。

避けたほうが無難です。読み始める前に画面をふさぐと、内容を見る前に閉じられるか、そのまま離れられてしまいます。SP で本文を大きく覆う表示は、Google の検索順位で不利になる場合があります。お知らせは告知バーやページの中で伝え、モーダルは読み手がボタンを押したときに開きます。

見出しの段とボタンの段は固定し、本文の領域にだけスクロールを持たせます。モーダルごと動かしてしまうと、閉じるボタンが画面の外に出て見えなくなります。それでも収まらない分量なら、モーダルに向いた内容ではないので、独立したページを用意します。