dialogタグ -ネイティブのモーダルダイアログを作成する｜HTML辞典
<dialog>タグとは？
<dialog> タグは、ネイティブのモーダルダイアログ（ポップアップ）を作成するためのタグです。
JavaScript の .showModal() や .show() メソッドを使用して開閉でき、閉じるための組み込み機能も備えています。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）。
閉じタグの有無
<dialog> は 開始タグ（<dialog>）と閉じタグ（</dialog>）の両方が必要 です。
基本的な記述方法
<dialog id="myDialog">
<p>これはモーダルダイアログです。</p>
<button id="closeDialog">閉じる</button>
</dialog>
<button id="openDialog">ダイアログを開く</button>
<script>
const dialog = document.getElementById("myDialog");
document.getElementById("openDialog").addEventListener("click", () => dialog.showModal());
document.getElementById("closeDialog").addEventListener("click", () => dialog.close());
</script>
✅ 「ダイアログを開く」ボタンをクリックするとダイアログが表示され、「閉じる」ボタンで閉じることができます。
使用できる主な属性
| 属性名 | 説明 | 例 |
|---|---|---|
open | ダイアログを最初から開いた状態にする | <dialog open> |
JavaScript を使ったダイアログの制御
<dialog> タグは JavaScript のメソッドを使用して制御できます。
ダイアログを開く
document.getElementById("myDialog").showModal();
ダイアログを閉じる
document.getElementById("myDialog").close();
モーダルではなく通常のダイアログとして開く
document.getElementById("myDialog").show();
✅ showModal() との違いは、モーダル状態（他の要素を操作できなくするかどうか）。show() を使うと背景の操作が可能になります。
CSSを使ったデザイン変更
<dialog> タグのデフォルトデザインはブラウザごとに異なるため、カスタマイズが必要です。
dialog {
border: none;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
✅ このスタイルを適用すると、モーダルのデザインが向上し、背景に半透明のオーバーレイが追加されます。
適切な使用例
✅ showModal() を使ってモーダルウィンドウを開く
<dialog id="modalDialog">
<p>モーダルウィンドウのテスト</p>
<button onclick="document.getElementById('modalDialog').close()">閉じる</button>
</dialog>
<button onclick="document.getElementById('modalDialog').showModal()">ダイアログを開く</button>
✅ show() を使って通常のダイアログとして開く
<dialog id="nonModalDialog">
<p>これはモーダルではないダイアログです。</p>
<button onclick="document.getElementById('nonModalDialog').close()">閉じる</button>
</dialog>
<button onclick="document.getElementById('nonModalDialog').show()">通常ダイアログを開く</button>
適切でない使用例（誤った使い方）
❌ <dialog> を open なしで HTML 内に配置し、そのまま表示しようとする
<dialog>
<p>このダイアログは開きません</p>
</dialog>
✅ 正しい書き方（JavaScript で開閉を制御）
<dialog id="myDialog">
<p>モーダルダイアログのテスト</p>
</dialog>
<script>
document.getElementById("myDialog").showModal();
</script>
<dialog>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<dialog> | モーダルウィンドウ | JavaScript で開閉可能 | ネイティブモーダル |
<div> | 汎用コンテナ | CSS & JavaScript で制御 | カスタムモーダル |
<section> | セクションの区切り | ページ構造を整理 | コンテンツの区分 |
<article> | 独立した記事 | 記事や投稿を作成 | ブログやニュース |
使用上の注意点
✅ <dialog> を JavaScript で開閉する
- HTML に記述しただけでは開かないため、
showModal()またはshow()を使う必要がある。
✅ showModal() は背景をブロックし、show() は通常のダイアログ
- ユーザーの操作を制限したい場合は
showModal()を使う。
✅ スタイルを適用してデフォルトデザインをカスタマイズ
- デフォルトのスタイルがブラウザごとに異なるため、適切にデザインを調整する。
関連タグ
まとめ
<dialog> タグは、HTML の ネイティブなモーダルダイアログを作成するためのタグ です。
JavaScript の showModal() や close() を活用することで、簡単にポップアップウィンドウを実装できます。
