<dialog>:任意のタイミングで開くダイアログボックスを作成する要素・HTMLタグの解説

取り扱い 標準仕様
カテゴリー フロー・コンテンツ
親にできる要素 フロー・コンテンツを受け入れる要素
子にできる要素 フロー・コンテンツ
対応ブラウザ caniuseで確認

<dialog>タグの解説

<dialog>は、任意のタイミングで開くダイアログボックスを作成します。これはユーザーに示すアラート、インスペクター、モーダルウィンドウのような対話的なコンポーネントとして機能します。

<dialog>タグの特徴

  • この要素はJavaScriptを使って呼び出します。初期値ではレイアウトに影響を与えません。
  • ダイアログを表示する場合、HTMLDialogElementオブジェクトのshowModalメソッドを呼び出します。ダイアログを閉じる場合はcloseメソッドを使います。
  • <form>method属性にdialogを指定した場合、ダイアログを閉じる操作が行えます。この時、HTTPリクエストは発生しません。
  • 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<dialog>要素に指定できる属性

open
ダイアログが操作可能な状態であることを表します。この属性が指定されていない時は、ダイアログをユーザーに表示すべきではありません。
グローバル属性
全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
イベントハンドラ
全てのHTML要素に指定できるコンテンツ属性です。

<dialog>要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。ダイアログは対話的なコンポーネントであるため、これ単体では機能しません。


<dialog>
	<p>Comment</p>
	<button type="button">Close</button>
</dialog>

JavaScriptのClickイベントを使って、HTMLDialogElementオブジェクトのshowModalメソッドを呼び出します。


<button type="button" onclick="document.getElementById('dialog_ex1').showModal()">ダイアログを表示</button>
<dialog id="dialog_ex1" aria-labelledby="dialog_ex1_h">
	<h3 id="dialog_ex1_h">ダイアログの見出し</h3>
	<p>ダイアログの内容。</p>
	<button type="button" onclick="this.closest('dialog').close();">閉じる</button>
</dialog>

<dialog>に関連するHTMLタグ

オブジェクトやスクリプトを埋め込む要素
<img> 画像ファイルを読み込む
<picture> 画像に対して複数のリソースを提供可能なコンテナを配置する
<figure> 写真や図表などの自己完結した要素を表す
<figcaption> 参照される写真や図表にキャプションを追加する
<canvas> スクリプトで描かれたグラフィックやアニメーションを表示する
<audio> ページに音声コンテンツを埋め込む
<video> ページに動画コンテンツを埋め込む
<source> 再生候補となる動画や音源などのメディアソースを指定する
<track> 音声や動画コンテンツにテキストトラックを提供する
<embed> 外部コンテンツを埋め込む
<object> 外部リソースのオブジェクトを埋め込む
<param> パラメーターを指定する
<script> HTMLで実行可能なスクリプトを埋め込む
<noscript> スクリプトが動作しない環境での表示内容を指定する
<meter> 規定範囲内の数量や測定値を表す
<progress> 作業の進捗状況を示すプログレスバーを表示する
<output> 計算結果やユーザーアクションの出力欄を作成する
<dialog> 任意のタイミングで開くダイアログボックスを作成する
<template> ページ読み込み後にスクリプトの実行によって挿入可能な要素を定義する
<slot> ウェブコンポーネントで独自に扱える枠を提供する