ダイアログ

ダイアログ要素は、あらゆる種類のダイアログを その仕組みをご確認ください。

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

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

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

モーダル ダイアログ

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

HTMLDialogElement には 3 つの主要なメソッドがあり、HTMLElement から継承されたすべてのメソッドが含まれます。

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 属性を設定すると、 このメソッドは、ダイアログが開いたときにフォーカスを受け取ります。ただし、<dialog> 内の autofocus を含む 慎重に行う必要があります。オートフォーカス要素よりも前にあるシーケンス内のすべての要素はスキップされます。 この属性について詳しくは、フォーカス レッスンをご覧ください。

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

ダイアログが開かれたとき、ブール値 open 属性 が存在している場合、ダイアログがアクティブで、操作が可能です。代わりに open 属性を追加してダイアログを開くと、 .show() や .showModal() を使用する場合よりも、ダイアログはモーダルレスになります。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; を設定します。color は body や :root ではなく dialog から継承されるため、予期しない結果になる可能性があります。background-color プロパティは継承されません。

理解度をチェックする

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