【だいあろぐようそ】

dialog要素とは？

最終更新: 2026年10月8日

💡 ブラウザ標準の、対話用の小さな画面

対話用の画面部品を表すHTMLのdialog要素。showModal()では背景の操作を止めるモーダル、show()やopen属性では非モーダルとして表示する。フォーカス管理などをブラウザが支援する。

📌 このページのポイント

モーダル表示の例。背景の色はCSSで調整できます。見出しや閉じる方法も用意します。

ひよこ

dialog要素は、どんなときに使うの？

ペンギン先生

操作の確認や短い入力など、ユーザーとやり取りする画面を作るときだよ。<dialog>の中に見出しやボタンなどを置き、ブラウザ標準のダイアログ機能を利用できる。

ひよこ

タグを書くだけで、モーダルになる？

ペンギン先生

書くだけでは表示されないよ。JavaScriptでshowModal()を呼ぶとモーダルになる。対応するブラウザでは、ボタンのcommandforとcommand属性で開く方法もある。HTMLだけで操作する方法を使うときも、対象ブラウザの対応を確認しよう。

ひよこ

show()との違いは何？

ペンギン先生

showModal()ではダイアログが最前面の層に入り、同じ文書内の背景を操作できなくなる。show()やopen属性では非モーダルで、背景も操作できるよ。背景を暗くするなどの見た目は、モーダルの::backdropをCSSで調整できるんだ。

ひよこ

Escを押せば、いつも閉じる？

ペンギン先生

showModal()で開いたダイアログは、標準ではEscなどの閉じる操作に対応するよ。設定やキャンセル処理で変わる場合があり、非モーダルは標準で同じ動作をしない。キーボードのない端末でも閉じられるよう、分かりやすい閉じるボタンを用意しよう。

ひよこ

アクセシビリティも、全部お任せでいい？

ペンギン先生

ブラウザはモーダルの背景操作の制限やフォーカス移動を支援するけれど、内容の設計は必要だよ。何の画面か分かる見出し、閉じる方法、最初に操作する要素を用意しよう。キーボード操作や、閉じた後のフォーカスも実際に確認するんだ。

まとめ：ざっくりこれだけ覚えればOK！

「dialog要素」って出てきたら「対話用の画面を作るHTML標準のタグ」と思えばだいたいOK！

📖 おまけ：英語の意味

「HTML dialog element」＝ HTMLのダイアログ要素

💬 「dialog（対話）」という名前の通り、ユーザーとの対話的なやり取りに使う画面部品として名付けられているんだよ。

参考資料