モーダル・通知・タブコード生成用
削除の確認ダイアログ
取り消せない操作の前に、もう一度確かめる。
用途・説明
削除など、取り消せない操作の前に表示する確認ダイアログを作成します。警告のアイコンと赤いボタンで、ふつうの確認とは違うことを伝えます。うっかり押してしまわないよう、最初のフォーカスを「キャンセル」に置く指定にしています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[削除する対象]- 例：ファイル「提案書.pdf」
[削除で起きること]- 例：削除すると、元に戻せません。
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「削除の確認ダイアログ」を実装してください。 ## 表示内容 - 警告のアイコン（！） - 見出し：[削除する対象]を削除しますか？ - 説明文：[削除で起きること] - ボタン：「キャンセル」と「削除する」 ## レイアウト - 画面の中央に表示。幅 400px（スマホでは左右に 16px の余白） - すべて中央揃え。上から アイコン → 見出し → 説明文 → ボタン - ボタンは横並びで同じ幅（左にキャンセル、右に削除） ## デザイン - 背景の幕：rgba(27,42,68,0.5) - ダイアログ：背景 #FFFFFF、角丸 16px、padding 32px 28px、影 0 24px 64px rgba(27,42,68,0.3) - アイコン：48px の円、背景 #FDF2F2、「！」は #C9343A・font-weight 700 - 見出し：20px、font-weight 700、色 #1B2A44 - 説明文：14px、line-height 1.8、色 #5F6D84 - 削除ボタン：高さ 44px、角丸 999px、背景 #C9343A、文字 #FFFFFF・14px・font-weight 700 - キャンセルボタン：背景 #FFFFFF、枠線 1px solid #CBD5E1、文字 #47566E - focus-visible の枠：#1463F0 ## 動作 - dialog 要素と showModal() で実装する - 「削除する」を押したら、ボタンを無効にして「削除中…」と表示し、処理が終わってから閉じる - 処理に失敗したら、ダイアログを閉じずに、説明文の下にエラーの文を表示する - 幕のクリックでは閉じない（うっかり閉じて、操作を見失わないため）。Esc キーとキャンセルで閉じる ## アクセシビリティ - role="alertdialog" にし、aria-labelledby と aria-describedby を設定する - 開いたら「キャンセル」にフォーカスを移す（Enter キーで、うっかり削除しないため） - 赤い色だけに頼らず、ボタンの文言で何が起きるかを伝える（「OK」「はい」は使わない） - 警告のアイコンは aria-hidden="true" ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。