<dialog> …… ダイアログボックスを表す

<dialog>タグは、ダイアログボックスを表す際に使用します。

dialog要素は、アプリケーションがユーザーと対話するための情報を表します。 具体的には、アプリケーションが何らかのタスクを実行するための小さなウィンドウ（ダイアログボックス）です。

ダイアログボックスは、 ユーザーにメッセージを伝えたり、 ユーザーに入力などの操作を促したりする目的で表示されます。

開いたダイアログボックスは、 ユーザーがメッセージを読み終えたり、入力などの作業を完了すると、 ダイアログボックスはアプリケーションによって自動的に閉じられるか、 ユーザーが手動で閉じることができます。

dialog要素のopen属性

dialog要素にopen属性を指定すると、ダイアログボックスが開いた状態になります。 この状態は、dialog要素がアクティブでユーザーがdialog要素と対話できることを示します。 open属性が指定されていないdialog要素は、ユーザーに表示されません。

子孫要素のいずれかにautofocus属性を指定する

ダイアログでユーザーに入力などの操作を促す場合、 すぐに操作することが予想される子孫要素には、autofocus属性を指定する必要があります。 そのような子孫要素がない場合、dialog要素自体にautofocus属性を指定する必要があります。 ユーザーの期待に一致するように、どの要素にautofocus属性を指定するべきか検討します。

■属性

■使用例

以下のサンプルは、在庫管理ウェブアプリケーションで、製品編集ダイアログが使用されているという想定です。 dialog要素にopen属性を指定して、最初からダイアログが開くようにしています。 開いたダイアログでは、製品名の入力欄にautofocus属性を指定して、まずは製品名から入力するようユーザーに促しています。

<dialog open>
  <label>製品名 <input type="text" autofocus></label>
  <label>摘要 <input type="text"></label>
</dialog>

できるだけダイアログでのスクロール発生を避ける

ダイアログのテキスト量が多い場合など、 内容がオーバーフローしてスクロールが発生することがあります。 例えば、ユーザーがフォントサイズをズーム設定にしていると、 制作者が意図していなくてもスクロールが発生する可能性があります。

一般的に、スクロールが必要なダイアログはユーザーからは期待されていません。 制作者は、できるだけダイアログでスクロールが発生しないように検討するべきでしょう。

■使用例

以下のサンプルは、dialog要素を使用して利用規約をダイアログボックスで表示しています。 この際、ダイアログボックスにスクロールが発生しにくいように、ダイアログの高さをCSSで指定しています。

div要素にautofocus属性を指定しているのは、もしスクロールが必要になった場合などに、 すぐに操作することが予想される子孫要素だからです。

<dialog open style="height: 60vh;">
  <div style="overflow: auto; height: 50vh;" autofocus>
    <h4>利用規約</h4>
    <p>ユーザーは、自己の責任において本サービスを利用するものとします。</p>
    <p>ユーザーは、本サービスのユーザーIDおよびパスワードを適切に管理するものとします。</p>
    <p>ユーザーIDおよびパスワードを第三者に譲渡または貸与することはできません。</p>
    <p>本サービスの利用によって生じた損害について、当社は一切の責任を負わないものとします。</p>
  </div>
  <form method="dialog">
    <button type="submit" value="agree">同意する</button>
    <button type="submit" value="disagree">同意しない</button>
  </form>
</dialog>

ダイアログを閉じる／ダイアログを非表示にするは異なる

ダイアログを閉じることと、ダイアログを非表示にすることは異なります。 ダイアログを閉じると、戻り値が返されイベントが発生し、他のダイアログのページのブロックが解除されます。 一方、ダイアログの非表示は視覚的なプロパティの問題であり、 hidden属性を使用するかopen属性を削除することで実行されます。

ダイアログを開くことと、ダイアログを表示することは異なります。 ダイアログを開くということのなかには、そのダイアログを作成して表示することが含まれています。 一方、ダイアログの表示は視覚的なプロパティの問題であり、 DOM内のdialog要素を取得してユーザーに見えるようにします。

dialog要素にtabindex属性を指定しない

dialog要素には、tabindex属性を指定してはなりません。

Sponsors