【もーだる】
モーダル とは？
最終更新:
💡 いま開いた内容の操作に集中する
表示中のダイアログを閉じるまで、背後の内容を操作できなくするUIの状態。見た目との違い、キーボード操作と閉じ方を解説します。
📌 このページのポイント
- 表示中のダイアログの外側を操作できなくする
- 暗い背景や中央の配置だけで決まるものではない
- 開いたら内部へフォーカスを移し、Tabの移動を内部に保つ
- 閉じる方法と、閉じた後の操作先も整える
ひよこ モーダルって、背景が暗くなる小窓？
ペンギン先生 大切なのは見た目より操作の状態だよ。開いたダイアログの外側を操作できなくし、そこでの入力や確認に集中させる。暗い背景や中央の配置は、それを伝える見せ方の例なんだ。
ひよこ ダイアログとは、同じ言葉？
ひよこ マウスの操作だけ止めればよい？
ペンギン先生 キーボードでの移動も考えるよ。開いたら内容に合った場所へフォーカスを移し、TabとShift＋Tabでは内部の操作先を巡るようにする。画面の外側へ抜けないことが必要だね。
ひよこ 閉じ方は、どう用意する？
ペンギン先生 閉じるボタンやキャンセルなど、見つけて操作できる方法を用意するよ。Webの標準的なパターンではEscapeでも閉じる。閉じた後は、通常は開いたボタンへ戻し、作業の流れに応じて適切な場所へ移すんだ。
ひよこ 確認を強調したいときは、全部モーダルにする？
ペンギン先生 必要な入力や確認に使うと役立つけれど、読むだけの情報で何度も作業を止めると負担になるよ。背景の作業を止める必要があるか、閉じ方が分かるかを考えて使おう。
もっと詳しく知りたい人へ
HTMLのdialog要素を表示すれば、必ずモーダルになる？
いいえ。showModal()で開くとモーダルになり、ブラウザーが背後を操作不能にします。show()やopen属性による表示はノンモーダルです。表示方法に加え、初期フォーカスや閉じる操作も確認します。
aria-modal="true"を付ければ、操作も止まる？
属性は支援技術へ状態を伝えるものです。それだけで背景の操作やフォーカス移動を制御することはできません。実際の操作と、読み上げられる状態が一致するように実装します。
まとめ：ざっくりこれだけ覚えればOK！
「モーダル」って出てきたら「表示中の内容を閉じるまで、背後の操作を止めるUIの状態」と思えばだいたいOK！
📖 おまけ：英語の意味
「Modal」 ＝ 操作できる範囲を限定する状態
💬 UIでは、ダイアログが開いている間、その外側の内容を操作できなくする状態を指します。このページではWebのモーダルダイアログを例に説明します。