学びブログ

Learning Blog

「講座の持ち物を見る」を押すと、ページの上へ小さな説明画面が出る。モーダルは補足情報を見せる方法ですが、開いた見た目だけを作ると、閉じられない、操作先が見えない、元の作業へ戻れないという問題が残ります。

HTMLのdialog要素は、モーダルと非モーダルのダイアログを表します。showModalで開いた場合は、背景側の操作を抑えるなど、ブラウザが扱う機能があります。open属性を付けるだけの表示とは動作が違います。公式：HTML dialog要素

この記事では、架空の講座の持ち物を表示する例を扱います。予約や保存の処理は行いません。開く、読む、閉じる、元の操作へ戻る流れを、小さなコードと確認表で設計します。

1．補足情報を、モーダルへ置く理由を決める

持ち物のような短い補足なら、ページの本文や開閉できる領域へ置く方法もあります。モーダルは利用者の現在の操作を区切るため、なぜその方法を選ぶかを考えます。

必ず読む必要がある長い条件を、目立たないボタンの先へ隠す必要はありません。モーダルを開かないと申し込みの条件が分からないなら、必要な情報の置き方を見直します。

この例は説明用です。破壊的な操作を確認するダイアログや、入力するフォームでは、最初に置くフォーカスと必要な案内が異なります。一つの例を、すべてのモーダルへ同じように適用しません。

2．タイトルと閉じる操作を、HTMLへ用意する

次は、開くボタンとdialogの独自のHTML例です。aria-labelledbyでダイアログの目的をタイトルへ対応させ、閉じる操作を明示します。閉じるボタンには、この説明用の例での初期フォーカスとしてautofocusを付けます。

<button id="open-course-info" type="button">持ち物を見る</button>

<dialog id="course-info" aria-labelledby="course-info-title">
  <h2 id="course-info-title">当日の持ち物</h2>
  <p>汚れてもよい服装でお越しください。</p>
  <p>これは架空の講座案内です。</p>
  <button id="close-course-info" type="button" autofocus>
    閉じる
  </button>
</dialog>

閉じるボタンをアイコンだけにする場合も、目的が分かる名前が必要です。この例は文字を使い、画面を見たときにも、支援技術から使うときにも、閉じる操作だと分かる形にしています。

dialog自体へtabindexを足して、無理に操作先にする方法は取りません。初期フォーカスは内容と目的へ合わせて決め、実際に開いたあとにどこへ移るかを確認します。公式：dialogのアクセシビリティ

3．showModalで開き、閉じたら元の作業へ戻す

次は、上のHTMLへ対応する独自のJavaScript例です。HTMLが読み込まれたあとに実行してください。保存や予約、外部への送信は含んでいません。

const dialog = document.querySelector("#course-info");
const openButton = document.querySelector("#open-course-info");
const closeButton = document.querySelector("#close-course-info");

openButton.addEventListener("click", () => {
  if (!dialog.open) dialog.showModal();
});

closeButton.addEventListener("click", () => {
  dialog.close();
});

dialog.addEventListener("close", () => {
  if (openButton.isConnected) openButton.focus();
});

この例は開くボタンが一つです。複数のボタンから開く実装では、どの操作から開いたかを記録して、適切な場所へ戻す設計が必要です。最初のボタンへ一律に戻すと、別の作業位置へ移動してしまう場合があります。

showModalで開くと、モーダルとして扱われます。open属性の有無だけを切り替えると、同じ見た目でも非モーダルになるため、背景操作の期待と食い違います。表示の方法と、望む動作を合わせます。

Escで閉じる既定の操作は、この例では妨げません。閉じるボタンで閉じた場合と、Escで閉じた場合の両方で、close後の戻る場所を確認します。特定の閉じ方だけに戻る処理を書くと、別の経路が抜けます。

4．長い内容と、狭い画面の表示を確認する

説明が長くなると、画面の下へ閉じるボタンが隠れる場合があります。狭い画面や拡大表示で、内容を読んで閉じられるかを見ます。モーダルを小さく固定すれば、使いやすくなるとは限りません。

次は、幅と高さを画面内へ収める独自のCSS案です。具体的な数値はこの学習例の初期案で、対象サイトの表示は未検証です。

#course-info {
  max-inline-size: min(32rem, calc(100vw - 2rem));
  max-block-size: calc(100vh - 2rem);
  overflow: auto;
  padding: 1.5rem;
}

#course-info::backdrop {
  background: rgb(10 25 40 / 0.5);
}

背景を暗くすることは、モーダルの目的を示す補助です。暗くしただけで背景側の操作が止まるわけではありません。showModalの動作と、見た目の背景を別に確認します。

外側を押して閉じる動作は、この例のコードに含めていません。採用する場合は、意図しない終了が困る内容か、押した場所をどう判定するかを別に決めます。説明用の画面と、入力途中の画面では条件が変わります。

5．開く、閉じる、戻るを実際に試す

モーダルのレビューでは、スクリーンショットだけで完了としません。開く前の操作先、開いた後のフォーカス、閉じた後の位置を追います。

入力を含むdialogでformのmethodをdialogにする方法もありますが、それはサーバーへ内容を送る処理とは異なります。閉じたことだけで、保存や送信が完了したとは案内しません。結果の処理を分けて設計します。

支援技術でも、ダイアログの名前と内容、操作先を確認します。名前をHTMLで対応させたつもりでも、実際の読み上げや利用する環境での動作は別に点検が必要です。本記事のコードは、その実機試験を済ませた完成品として示していません。

6．閉じたあとに、続きの仕事が残っているかを見る

架空の持ち物案内では、閉じたら講座の本文へ戻り、条件の確認を続けられることが目標です。閉じたあとにページの先頭へ移ったり、ボタンが見えない場所へフォーカスが戻ったりすると、元の作業を続けにくくなります。

1. モーダルへ置く理由と、読んだ後の行動を決めます。
2. タイトルと明示的な閉じる操作を用意します。
3. 初期フォーカスと、開いた操作へ戻る方法を決めます。
4. ボタンとEscの両方で閉じ、背景操作との関係を確認します。
5. 長い内容、狭い画面、拡大表示を試します。
6. 読み上げとキーボードで、元の仕事まで続けられるかを点検します。

複数のモーダルを重ねる前に、一つの画面で説明できないかを考えます。重なると、どの画面を閉じるか、どこへ戻るかの条件が増えます。必要な場合は、最後に開いた画面と戻る場所を明確にして確認します。

動きを加える場合にも、開閉が終わるまで操作を不必要に待たせないかを見ます。演出を減らした条件でも、内容が現れ、閉じて戻れることを確認します。表示の完成と、操作の完成を一つにまとめないようにします。

今日の練習では、持ち物のような短い説明一つを用意してください。開く前、開いたあと、閉じたあとの操作先を記録し、キーボードだけで同じ仕事が続けられるかを点検します。モーダルの完成は、開いた一枚の画面から先まで含みます。

情報確認：2026年10月13日。題材、HTML・JavaScript・CSS例と図解は独自制作です。識別子とコードの構文をローカルで確認しています。対象ブラウザのフォーカス、背景操作、読み上げの実機試験は未実施です。