Dialog

ダイアログ要素は、HTML であらゆる種類のダイアログを表すために便利な要素です。その仕組みを確認しましょう。

モーダル ダイアログは、ウェブページに表示される特別なタイプのポップアップ ボックスです。ユーザーの操作を中断して、そのポップアップにフォーカスを当てます。ダイアログをポップアップするユースケースはいくつかありますが、そうする前に慎重に検討する必要があります。モーダル ダイアログは、ユーザーに特定のコンテンツにフォーカスを強制し、少なくとも一時的にページの残りの部分を無視させます。

ダイアログは、モーダル(ダイアログ内のコンテンツのみを操作可能)または非モーダル(ダイアログ外のコンテンツも操作可能)のいずれかです。モーダル ダイアログは、ページの残りのコンテンツの上に表示されます。ページの残りの部分は無効で、デフォルトでは半透明の背景で隠されます。

セマンティック HTML の <dialog> 要素は、セマンティクス、キーボード操作、HTMLDialogElement インターフェースのすべてのプロパティとメソッドを使用してダイアログを作成します。

モーダル <dialog> の例を次に示します。[モーダル ダイアログを開く] ボタンでダイアログを開きます。開いたダイアログを閉じる方法は 3 つあります。エスケープキー、formmethod="dialog" が設定されたボタン(またはフォーム自体に method="dialog" が設定されている場合)を使用してフォームを送信する、HTMLDialogElement.close() メソッドです。

HTMLDialogElement には、HTMLElement から継承されたすべてのメソッドに加えて、3 つのメイン メソッドがあります。

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

この <dialog>HTMLDialogElement.showModal() メソッドで開かれたため、モーダル ダイアログです。モーダル ダイアログを開くと、ダイアログ自体以外のすべてのものが無効になり、非表示になります。ダイアログの外側の UI にカーソルを合わせると、すべての要素が pointer-events: none; が設定されているかのように動作します。ダイアログを開くボタンも操作に反応しません。

ダイアログが開くと、フォーカスがダイアログに移動します。フォーカスは、そのダイアログ内のキーボードによる連続ナビゲーション順序の最初の要素に設定されます。tab キーを繰り返し押すと、モーダル ダイアログが開いている間はダイアログ内のコンテンツのみにフォーカスが当てられることがわかります。モーダル ダイアログが開いている間は、モーダル ダイアログの外側にあるものはすべて無効になります。

ダイアログが閉じられると(モーダルかどうかにかかわらず)、ダイアログを開いた要素にフォーカスが戻ります。ユーザー操作に基づかないダイアログをプログラムで開いている場合は、再検討してください。必要に応じて、ダイアログが開く前と同じ場所にフォーカスを戻します。特に、ユーザーがダイアログを操作せずに閉じた場合は、この操作が必要です。

アクティブなダイアログを除く、要素とそのすべての子孫を無効にするために使用できるグローバルな inert 属性があります。showModal() を使用してモーダル ダイアログを開くと、非アクティブ化が自動的に行われ、属性は明示的に設定されません。

ダイアログ以外のすべてを隠す背景には、::backdrop 疑似要素を使用してスタイルを設定できます。バックドロップは、.showModal() メソッドで <dialog> が表示されている場合にのみ表示されます。この疑似要素は、画面またはモニターと同じアスペクト比ではない動画を全画面モードで表示する場合など、FullScreen API が使用されたときに表示されるバックドロップを含む、すべてのバックドロップと一致します。

モーダル以外のダイアログ

HTMLDialogElement.show() も同様にダイアログを開きますが、背景を追加したり、何も無効にしたりしません。Esc キーを押しても、モーダル以外のダイアログは閉じません。そのため、非モーダル ダイアログを閉じるメソッドを含めることがさらに重要になります。閉じるボタンがダイアログの外部にある場合、ダイアログを開いた要素にフォーカスが移動します。これはユーザー エクスペリエンスに最適とは限りません。

ダイアログを閉じるボタンは仕様で正式に必須ではありませんが、必須と見なしてください。Esc キーを押すとモーダル ダイアログは閉じますが、非モーダル ダイアログは閉じません。フォーカスを受け取ることができる表示ボタンを使用すると、ユーザー補助とユーザー エクスペリエンスが向上します。

ダイアログを閉じる

ダイアログを閉じるために HTMLDialogElement.close() メソッドは必要ありません。JavaScript はまったく必要ありません。JavaScript を使用せずに <dialog> を閉じるには、<form>method="dialog" を設定するか、ボタンに formmethod="dialog" を設定して、ダイアログ メソッドを含むフォームを含めます。

ユーザーが dialog メソッドで送信すると、ユーザーが入力したデータの状態が維持されます。送信イベントが発生すると、フォームは制約検証を受けます(novalidate が設定されていない場合)。このとき、ユーザーデータは消去も送信もされません。JavaScript を使用しない閉じるボタンは次のように記述できます。

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

この例では、閉じ <button>autofocus 属性が設定されています。<dialog> 内に autofocus 属性が設定された要素は、ページの読み込み時にフォーカスを受け取りません(ダイアログが表示された状態でページが読み込まれる場合を除きます)。ただし、ダイアログが開くとフォーカスが設定されます。

デフォルトでは、ダイアログが開いたときに、ダイアログ内の別の要素に autofocus 属性が設定されていない限り、ダイアログ内の最初のフォーカス可能な要素がフォーカスを受け取ります。閉じるボタンに autofocus 属性を設定すると、ダイアログが開いたときにフォーカスが設定されます。ただし、autofocus<dialog> 内に含めるのは慎重に行う必要があります。自動フォーカスされた要素の前に続くシーケンス内の要素はすべてスキップされます。この属性について詳しくは、フォーカス レッスンをご覧ください。

HTMLDialogElement インターフェースには returnValue プロパティが含まれています。method="dialog" を使用してフォームを送信すると、returnValue は、フォームの送信に使用された送信ボタンの name(存在する場合)に設定されます。<button type="submit" name="toasty">close</button> と記述した場合、returnValuetoasty になります。

ダイアログが開くと、ブール値 open 属性が存在します。これは、ダイアログがアクティブで操作可能であることを意味します。.show().showModal() ではなく open 属性を追加してダイアログを開くと、ダイアログはモーダルレスになります。HTMLDialogElement.open プロパティは、ダイアログがモーダルかどうかではなく、ダイアログが操作可能かどうかに応じて、true または false を返します。

ダイアログを開くには JavaScript を使用することをおすすめしますが、ページ読み込み時に open 属性を含めて、.close() で削除すると、JavaScript が使用できない場合でもダイアログを使用できます。

詳細

tabindex を使用しない

ダイアログを開くためにアクティブ化された要素と、そのダイアログに含まれる閉じるボタン(およびその他のコンテンツ)は、フォーカスを受け取ることができ、インタラクティブです。<dialog> 要素はインタラクティブではなく、フォーカスを受け取りません。tabindex プロパティをダイアログ自体に追加しないでください。

ARIA ロール

暗黙的なロールは dialog です。ダイアログが、確認やその他のユーザーの応答を必要とする重要なメッセージを伝える確認ウィンドウの場合は、role="alertdialog" を設定します。ダイアログにもユーザー補助機能名が必要です。表示されるテキストでユーザー補助機能用の名前を指定できる場合は、aria-labelledby="idOfLabelingText" を追加します。

CSS のデフォルト

ブラウザには dialog のデフォルトのスタイルが用意されています。Firefox、Chrome、Edge はユーザー エージェント スタイルシートで color: CanvasText; background-color: Canvas; を設定し、Safari は color: black; background-color: white; を設定します。colorbody:root ではなく dialog から継承されるため、予期しない結果になる可能性があります。background-color プロパティは継承されません。

理解度を確認する

ダイアログ要素に関する知識をテストします。

ダイアログの背後の領域にスタイルを設定する方法

::background 疑似要素。
background プロパティ。
::backdrop 疑似要素。