English 中文 العربية 日本語 Português

<dialog>: DIALOG 要素

最終更新：2026-10-13

<dialog>DIALOG 要素

ダイアログボックスやモーダルを表します。JavaScript の showModal() / show() で開きます。

カテゴリセマンティック
コンテンツモデルフローコンテンツ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </dialog> タグ
ステータス標準

📝 構文

<dialog>ダイアログの内容</dialog>
すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<dialog> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント： showModal() でネイティブなモーダル（背景＋Esc で閉じる）になります。open 属性で非モーダル表示もできます。

❓ よくある質問

Qdialog と div で作るモーダルの違いは何ですか？
A<dialog> はネイティブのモーダルダイアログ要素です。showModal() で開くと、トップレイヤー描画（すべての上に重なる）、フォーカスの封じ込め、Esc キーでの閉じるが組み込みで付きます。div 製のポップアップでは、z-index やフォーカストラップをすべて自前で実装する必要があります。
Qdialog の showModal と show の違いは何ですか？
AshowModal() はモーダルで開きます。オーバーレイ付きでページの他の操作をブロックし、Esc で閉じられます。show() はモードレスで開きます。オーバーレイがなく、ユーザーはページの他の部分を操作できます。どちらも close() で閉じます。
Qdialog は CSS でスタイルできますか？
Aできます。オーバーレイは ::backdrop 疑似要素で装飾し、ダイアログ本体は通常どおり CSS で組めます。display は open 状態で制御されるため、カスタマイズ時に dialog[open] の表示ロジックを壊さないよう注意しましょう。
<details> <button>
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

HTML タグリファレンス
すべての HTML タグの構文・属性・例を確認できます。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%