2023年09月5日(火)

HTMLのdialogタグでダイアログ（モーダル）を実装する方法

• 0
• 26
• 5
• 14

Webページでモーダルウィンドウやダイアログ表示を実装する際はJavaScriptのライブラリやプラグイン等を使って組み込むことが多いですが、HTMLのdialogタグを使うととても簡単に実装することができます。

dialogタグを使用することで、ダイアログを表示させたり非表示にしたりするJavaScript動作をブラウザが処理してくれることになるので、アクセシビリティにもよいと言われています。（dialogタグでも表示するための指示はJavaScriptを使用しますが）

IEのサポートも終わり、主要ブラウザでdialog要素がサポートされたことで活用できる機会が増えてきたので実装する方法をいくつかのパターンで紹介してみます。

dialogタグを使ってダイアログ表示

まずは基本的な使用方法として、dialogタグを使った場合のHTMLから。

ダイアログで表示する内容をdialogタグの中に記載し、併せてダイアログを表示するためのボタンと閉じるためのボタンを設置します。

ボタンにはidまたはクラスをつけておきます。

これはHTMLのdialogタグで作られたダイアログです。

ダイアログを閉じる ダイアログを開く

dialogタグで書...