← 一覧へ

やってみよう「削除」を押してみてください

表示・レイアウトメジャー（よく見る）

モーダル

Modal / Dialog

画面の真ん中に箱がポンッと出て、背景が暗くなる。答えるまで他は触れない。

別名ダイアログモーダルウィンドウポップアップアラート確認ダイアログ

どこで使われている？

よく見かける場所
ほぼすべてのアプリとサイト（削除の確認、ログイン、お知らせ）
使うとよい場面
「本当に削除しますか？」など、先に答えてほしい大事な確認
避けたい場面
ちょっとしたお知らせ（作業を止めてしまうので、トーストにする）

補足「モーダル」は、閉じるまで他を操作できない状態のこと。中央に出る箱は「ダイアログ」とも呼びます。

似ているものとの違い

知らせ方の違い（トースト・バナー通知・アナウンスバー・モーダル）重ねて出す画面の違い（ボトムシート・アクションシート・モーダル・ポップオーバー）

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「モーダル（Modal / Dialog）」を実装してください。

動き：画面中央にダイアログ（タイトル・説明文・ボタン2つ）を拡大しながら表示し、背景を半透明の黒で暗くする。ダイアログが出ている間は背景を操作できないようにし、ボタンを押すと閉じる。

使う部品：<dialog> 要素の showModal()
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら<dialog> 要素の showModal()
iPhoneアプリなら.alert(...)（自由な中身なら .sheet / .fullScreenCover）
AndroidアプリならAlertDialog（中身を自由にするなら Dialog）
FlutterならshowDialog + AlertDialog
React NativeならAlert.alert(...)（自由な中身なら Modal）

似ているもの・一緒に使うもの