モーダルはJSで開閉を作り込まず、HTMLの <dialog> 要素を使う

どんな問題を解決するか / いつ使うか

モーダルの開閉・フォーカス管理・背景の暗転を毎回JSで書いているとき。AIエージェントにモーダルを作らせると独自実装の div が出てくるので、標準要素を使わせたいとき（DESIGN.md やルールに書いておくと良い）。

やり方

1. HTMLに <dialog> を置く：

<button id="open">詳細を見る</button>
<dialog id="modal">
  <form method="dialog">
    <p>モーダルの中身</p>
    <button>閉じる</button>
  </form>
</dialog>

2. 開くときは modal.showModal() を呼ぶ。showModal() で開くと、背面が操作できなくなり、Escキーで閉じられる。<form method="dialog"> 内のボタンを押すと閉じる。
3. 背景は ::backdrop 疑似要素でスタイルを付ける：

dialog::backdrop { background: rgb(0 0 0 / .5); }

4. 背景クリックで閉じたい場合は、closedby="any" 属性を使う（対応ブラウザを確認）か、dialog 自体へのクリックを判定する数行のJSを足す。

注意点

• 投稿では「背景クリックで閉じる動きまで標準機能で」とあるが、closedby は比較的新しい属性。古いブラウザでは数行のJSで補う。
• 開閉のアニメーションは @starting-style と allow-discrete で付けられる（display: none の表示・非表示もCSSでアニメーションできる を参照）。
• 開いたときのフォーカス位置や、閉じた後に元のボタンへ戻るかは実機・スクリーンリーダーで確認する。

出典

• 投稿者: @wokobo_net
• 投稿: @wokobo_net · 2026-10-12
• 収集日: 2026-10-13（JST）