VIDEO LESSON

HTMLのdialogタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:39動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03エイチティーエムエルタグ編の八十六本目は、ダイアログタグです。
0:08ダイアログは、ページの上に小さな窓を重ねて表示し、利用者に確認や案内を伝えるための専用要素です。
0:14たとえば、削除してよいか尋ねたり、申し込み完了を知らせたりする場面が代表的です。
0:20以前はディブで自作することが多かったのですが、専用タグを使うと、開閉やキーボード操作の土台をブラウザーが用意してくれます。
0:28今回は、ダイアログの意味から、オープン属性、ショーモーダルによる表示、閉じ方、
0:33シーエスエス、注意点まで順番に確認していきましょう。
0:37基本の書き方を確認します。
0:39ダイアログは、開始タグと終了タグで内容を囲んで書きます。
0:43中には見出しや段落、ボタン、フォームなどを入れることができます。
0:48大切なのは、書いただけでは画面に表示されない点です。
0:52オープン属性がない状態では、ダイアログは隠れたままになります。
0:57つまりダイアログは、必要なタイミングで開いてこそ意味がある要素です。
1:02まずは練習ファイルで、見出しと短い案内文だけのシンプルなダイアログを用意し、
1:07まだ何も表示されないことを確認してください。
1:12この隠れていることが初期状態だと覚えておきましょう。
1:15開く方法のひとつ目が、オープン属性です。
1:19オープンと書くだけで、ダイアログは開いた状態として表示されます。
1:26これは真偽属性といって、あるかないかで状態が決まるタイプの属性です。
1:32ただし、オープン属性で開いたダイアログは、その場に表示されるだけで、背景のページはそのまま操作できます。
1:43いわゆるノンモーダルな表示です。
1:46常時出しておきたいお知らせには向きますが、必ず読んでほしい確認画面には物足りません。
1:54記事も、オープンで表示するだけとショーモーダルは異なると注意しています。
2:01この違いが、次に学ぶモーダル表示への分かれ道になります。
2:06本命の開き方が、ジャバスクリプトのショーモーダルメソッドです。
2:11ショーモーダルで開くと、ダイアログは画面の前面に出て、閉じるまで背景のページを操作できなくなります。
2:18これがモーダル表示です。
2:20削除の確認や、必ず答えてほしい案内は、こちらで開きます。
2:24一方、ショーメソッドで開くとオープン属性と同じノンモーダルになり、背景も操作できます。
2:30使い分けの目安は、答えるまで先に進ませたくないかどうかです。
2:35また、すでに開いているダイアログに再度ショーモーダルを呼ぶとエラーになるので、
2:39開く前に状態を確認する配慮も大切です。
2:43記事の活用事例を読み解きます。
2:45例は、案内を開くボタンを押すと、参加のご案内というモーダルが表示される構成です。
2:51ボタンとダイアログにはそれぞれアイディーが付いていて、スクリプトがそのアイディーを目印に要素を取得します。
2:58ボタンのクリックでショーモーダルを呼び、ダイアログの中には、メソッドがダイアログのフォームと閉じるボタンが置かれています。
3:07試すときは、練習用ファイルのボディにこの例を写し、保存して再読み込みし、
3:12ボタンを押して前面に表示されるか、閉じるボタンで戻れるかを実際に確認してください。
3:18構造と動作をセットで確かめることが大切です。
3:21閉じ方には主に三つの方法があります。
3:24一つ目は、ジャバスクリプトのクローズメソッドで閉じる方法です。
3:28二つ目は、モーダル表示中にエスケープキーを押す方法で、利用者にとっておなじみの操作です。
3:36三つ目が、フォームのメソッドにダイアログと指定する方法です。
3:40このフォームの中のボタンを押すと、ページ遷移や送信を行わずにダイアログだけが閉じます。
3:47さらに、押されたボタンのバリューは、ダイアログのリターンバリューとしてスクリプトから読み取れます。
3:55オーケーが押されたのかキャンセルなのかを判別できるので、確認画面ではこの仕組みがとても便利です。
4:03ジャバスクリプトとの連携をもう少し深く見ます。
4:06ダイアログが閉じると、クローズイベントが発生します。
4:10このタイミングでリターンバリューを読み取れば、利用者がオーケーを選んだのか、
4:14キャンセルを選んだのかが分かります。
4:18エスケープキーで閉じられた場合は、その前にキャンセルイベントが発生するので、
4:22必要なら閉じるのを防ぐこともできます。
4:26実務では、削除ボタンを押したらモーダルを開き、クローズイベントで結果を見て、
4:31本当に削除するかどうかを決める、といった流れが典型例です。
4:35表示はエイチティーエムエル、判断はスクリプト、と役割を分けると分かりやすいコードになります。
4:42見た目はシーエスエスで整えます。
4:44ダイアログ自体にパディングやボーダーラジアス、影を指定すれば、カードのような見た目になります。
4:52そしてモーダル表示のときだけ現れる特別な要素が、バックドロップです。
4:57ダイアログの後ろの画面全体を指す疑似要素で、半透明の黒で暗くすると、前面の窓に自然と視線が集まります。
5:05幅については、マックスウィドスで上限を決めておくと、広い画面でも文章が横に伸びすぎず読みやすくなります。
5:13スマートフォンでは画面幅いっぱいに近くなることもあるので、三百二十ピクセル程度の狭い幅でもボタンが欠けないかを必ず確認してください。
5:24アクセシビリティの観点も欠かせません。
5:26モーダルを開くと、キーボードのフォーカスはダイアログの中に移動し、タブキーを押しても中を循環するようになります。
5:34背景にフォーカスが逃げないので、キーボード利用者も迷子になりません。
5:39そして閉じると、フォーカスは開くきっかけになったボタンへ自動で戻ります。
5:44この戻り先があるおかげで、操作の続きを自然に再開できます。
5:48注意点は、閉じる手段を必ず用意することです。
5:51ボタンが見当たらず、エスケープキーも知らない利用者は画面から抜け出せなくなります。
5:57見出しで内容を伝え、閉じるボタンを分かりやすい言葉で置くことが、優しいモーダルの条件です。
6:03ブラウザー互換性を確認します。
6:06記事が紹介するエムディーエヌのデータでは、ダイアログ要素本体は、クロームが三十七以降、
6:12ファイアフォックスが九十八以降、サファリが十五点四以降で対応しています。
6:18現在広く使われているブラウザーなら、安心して採用できる要素です。
6:22一方で注意したいのが、クローズドバイという新しい属性です。
6:27これは、背景クリックなど、どの操作で閉じてよいかを細かく決める属性ですが、
6:31対応開始の時期が要素本体と大きく異なります。
6:36記事でも、本体とは別に対応を確認するよう案内されています。
6:40新しい属性を使うときは、未対応のブラウザーでも閉じるボタンで確実に閉じられる設計にしておきましょう。
6:48よくある間違いとまとめです。
6:50まず、オープン属性を付けただけなのにモーダルになったと思い込むミスです。
6:56背景を止めたいならショーモーダルが必要です。
7:00次に、閉じるボタンの置き忘れです。
7:03開く処理ばかりに集中して、利用者が戻れなくなるケースは意外と多くあります。
7:09そして、確認が不要な内容まで何でもモーダルにする使いすぎにも注意してください。
7:15モーダルは操作を止める強い手段なので、本当に今答えてほしい場面に絞るのが原則です。
7:22ダイアログは、開く、答える、閉じる、戻る、という一連の流れがブラウザーに支えられた要素です。
7:30ディブの自作から一歩進んで、ぜひ専用タグで実装してみてください。
7:35これでダイアログタグの解説を終わります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

dialogタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。ダイアログ。showModal() でモーダル表示し、閉じる手段やフォーカスを確認します。

解説記事・サンプルコードを読む：HTMLのdialogタグとは？属性・使い方・ブラウザー互換性と活用例 →