モーダル・通知・タブコード生成用
基本のモーダルダイアログ
見出し・説明・2つのボタンの、いちばん基本の形。
用途・説明
画面の中央に開く、基本のモーダルダイアログを作成します。見出し、説明文、「キャンセル」と実行のボタン、右上の閉じるボタンで構成します。フォーカスの移動や Esc キーでの終了など、使いやすさに必要な動作をひととおり含めています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：プランを変更しますか？
[説明文]- 例：変更は、次回の更新日から適用されます。
[実行ボタンの文言]- 例：変更する
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「基本のモーダルダイアログ」を実装してください。 ## 表示内容 - 見出し：[見出し] - 説明文：[説明文] - ボタン：「キャンセル」と「[実行ボタンの文言]」 - 右上に閉じるボタン（✕） - モーダルを開くためのサンプルのボタン ## レイアウト - 画面の中央に表示。幅 480px（スマホでは左右に 16px の余白を残す） - ボタンは右下に横並び（左にキャンセル、右に実行）。スマホでは縦に並べ、実行を上にする - 内容が長いときは、モーダルのなかだけをスクロールさせる（最大の高さは画面の85%） ## デザイン - 背景の幕：rgba(27,42,68,0.5) - モーダル：背景 #FFFFFF、角丸 16px、padding 28px、影 0 24px 64px rgba(27,42,68,0.3) - 見出し：20px、font-weight 700、色 #1B2A44 - 説明文：15px、line-height 1.8、色 #5F6D84、見出しの下 8px - 実行ボタン：高さ 44px、左右padding 24px、角丸 999px、背景 #1463F0、文字 #FFFFFF・14px・font-weight 700 - キャンセルボタン：同じ大きさ、背景 #FFFFFF、枠線 1px solid #CBD5E1、文字 #47566E - 閉じるボタン：40×40px、アイコン 20px、色 #8A96AA ## 動作 - 標準の dialog 要素と showModal() で実装する - 開くとき：幕は 0.2秒でフェードイン、モーダルは下から 8px 浮き上がる - 閉じる方法：閉じるボタン、キャンセル、Esc キー、幕のクリック - 開いているあいだ、後ろのページはスクロールさせない ## アクセシビリティ - aria-labelledby で見出し、aria-describedby で説明文と結びつける - 開いたら、最初のボタン（キャンセル）にフォーカスを移す。閉じたら、開いたボタンにフォーカスを戻す - Tab キーでのフォーカスは、モーダルのなかだけを巡回させる - 閉じるボタンに aria-label="閉じる" を付ける - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。