HTMLのdialog要素の使い方｜showModal・returnValue・::backdrop

HTMLのdialog要素の使い方｜showModal・returnValue・::backdrop HTML

HTMLのdialog要素の使い方とは

<dialog> は、ダイアログ(確認画面、入力フォーム、通知など)を表すHTML要素です。JavaScriptで showModal() を呼ぶと、背面が操作できなくなるモーダルとして表示されます。以前は div とJS、フォーカストラップの自作が必要でしたが、dialog は次のような機能を標準で備えています。

  • 背面のページを操作不可にする（inert化）。
  • 最初のフォーカス可能な要素にフォーカスを移す。
  • Escキーで閉じられる。
  • 背景を ::backdrop で装飾できる。

MDN によると、dialog は2022年3月から主要ブラウザで広く使える機能です。

基本（構文・仕組み）

メソッド・属性 内容
showModal() モーダルとして開く。背面は操作不可。Escで閉じられる
show() 非モーダルとして開く。背面も操作可能。Escでは閉じない
close(値) 閉じる。値は returnValue に入る
returnValue 閉じたときの戻り値(文字列)
open 属性 開いている状態。HTMLに直接書くと非モーダルで表示される
closedby 属性 閉じ方の制限。any・closerequest・none
cancel / close イベント Esc 等で閉じようとしたとき / 閉じたとき

closedby の値は、any（外側のクリックでも閉じる）、closerequest（Escなどの閉じる操作）、none（開発者が用意した方法だけ）です。既定は、モーダルが closerequest、非モーダルが none です。closedby は新しい属性で、MDN の互換性データ（2026年10月時点）では Chrome 134、Firefox 141 から対応し、Safari は正式版では未対応です。対応状況を確認してから使います。

<form method="dialog"> を使うと、送信時にダイアログが閉じ、押したボタンの value が returnValue に入ります。サーバーへのデータ送信は行われません。

サンプルコード（実行結果つき）

確認ダイアログの完成形です。

<button id="open">削除する</button>
<dialog id="dlg">
  <form method="dialog">
    <p>削除しますか?</p>
    <button value="cancel">キャンセル</button>
    <button value="ok">削除</button>
  </form>
</dialog>

<script>
  const dlg = document.getElementById("dlg");
  document.getElementById("open").addEventListener("click", () => dlg.showModal());
  dlg.addEventListener("close", () => {
    console.log("returnValue:", dlg.returnValue); // "ok" または "cancel"
  });
</script>

背景を暗くするCSSです。

dialog::backdrop { background: rgb(0 0 0 / .5); }
dialog { border: 0; border-radius: 8px; padding: 1.5rem; }

Escでの閉じを止めたい場合は、cancel イベントを止めます(使う場面は限定的です)。

dlg.addEventListener("cancel", (e) => e.preventDefault());

動作確認（検証環境と結果）

  • 環境: Windows 11、headless Microsoft Edge 154.0.4258.53（Chromium系、render.ps1）。
  • 確認内容: 上記の確認ダイアログを読み込み、showModal() を呼んだ直後と、「削除」ボタンをプログラムでクリックした後の状態を取得。
  • 結果: showModal() 直後は open=true、:modal に一致(matches(":modal") が true)。「削除」ボタンのクリック直後は open=false、returnValue=ok。close イベントも発火し、closed returnValue=ok open=false を確認しました。
  • 追加確認: showModal() 直後の document.activeElement は最初のボタン「キャンセル」でした。open 属性付きで開いている非モーダルの dialog に showModal() を呼ぶと InvalidStateError になりました。
  • 未検証: Escキーでの閉じ、::backdrop の見た目、closedby 属性の動作、閉じた後のフォーカスの戻り、スクリーンリーダーの読み上げ。
  • ログ: C:Tempks2techtestshtml-dialog.md、画面は C:Tempks2techtestst1dialog2.png。

HTMLのdialog要素の使い方の注意点

  • showModal() で開くと aria-modal="true" 相当になり、背面は支援技術にも隠れます。show() ではそうなりません。
  • open 属性を付けて既に開いている(非モーダルの)状態で showModal() を呼ぶと、InvalidStateError の例外になります（headless Edge で確認）。開閉はJSのメソッドで一貫させます。
  • ダイアログ内に必ず「閉じる」手段を用意します。モーダルでEscを無効にする場合は特に注意します。
  • 閉じた後は、開く前にフォーカスしていた要素にフォーカスを戻すことが望ましい動作です。ブラウザの既定動作を確認してから自作の処理を足します。
  • 重要な確認は、サーバー側でも検証します(クライアントのdialogは見た目の制御に過ぎません)。

HTMLのdialog要素の使い方でよくあるミス

  • open 属性を付けて表示して、モーダルになると思い込む(非モーダルになります)。
  • div でモーダルを作り、フォーカスの閉じ込めとEscを自作して不具合が出る。
  • 閉じるボタンを type="button" にし忘れ、form 内で意図しない送信が起きる。
  • ::backdrop に親要素の変数が継承されると期待する(別途指定が必要になる場合があります)。

ブラウザ対応・バージョン

dialog 要素自体は MDN で2022年3月から広く利用可能とされています。一方、closedby や requestClose() などの新しいAPIは対応が限られる可能性があるため、利用前に MDN の互換性表で最新を確認してください。

HTMLのdialog要素の使い方のチェックリスト

  • [ ] モーダルは showModal() で開いている。
  • [ ] 閉じる手段(ボタン・Esc)を用意している。
  • [ ] form method="dialog" と returnValue で結果を受け取っている。
  • [ ] 背景のスタイルを ::backdrop で指定している。
  • [ ] 実機のキーボード操作とスクリーンリーダーで確認した。

HTMLのdialog要素の使い方のFAQ（よくある質問）

Q. 背景クリックで閉じるには。
A. closedby="any" が使えますが、新しい属性です。対応を確認するか、click イベントで要素の外側のクリックを判定します。

Q. ダイアログを閉じるときにアニメーションは付けられますか。
A. CSSで実現できる方法がありますが、この記事では未検証です。

Q. alert() や confirm() との違いは。
A. 見た目をCSSで自由に変えられ、alert() のようにスクリプトの実行を止めません（結果は close イベントなどで受け取ります）。

筆者の見解（HTMLのdialog要素の使い方）

私見では、モーダルは dialog を第一候補にしてよい段階に来ていると考えます。フォーカス管理やEscの処理を自作して漏れるリスクを避けられるからです。ただし、モーダルは操作を中断させる強い仕組みなので、本当に必要か、インライン表示や details で済まないかを先に検討するのが、使いやすさの面で重要だと考えます。

HTMLのdialog要素の使い方の関連項目

出典（一次情報）

タイトルとURLをコピーしました