<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