モーダル・通知・タブコード生成用
ポップオーバー
ボタンのそばに、操作できる小さなパネルを開く。
用途・説明
ボタンを押すと、そのすぐそばに小さなパネルが開くポップオーバーを作成します。ツールチップと違い、なかに入力欄やボタンを置けます。共有リンクのコピー、絞り込み、色の選択など、ちょっとした操作に向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[開くボタンの文言]- 例：共有
[パネルの内容]- 例：共有用のURLと、コピーのボタン
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「ポップオーバー」を実装してください。 ## 表示内容 - 開くボタン：[開くボタンの文言]（右に下向きの山形） - パネル：見出し、[パネルの内容]、補足の文 ## レイアウト - ボタンの真下に、8px 離して表示する。横はボタンの中央にそろえる - ボタンのほうを指す、小さな三角形のしっぽを付ける - 幅 320px。画面からはみ出すときは、収まる位置にずらす。下に場所がないときは上に出す ## デザイン - パネル：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、padding 16px、影 0 8px 32px rgba(27,42,68,0.12) - しっぽ：パネルと同じ背景と枠線 - 見出し：15px、font-weight 700、色 #1B2A44 - URLの欄：高さ 40px、枠線 1px solid #DCE4F0、角丸 8px、文字 13px・色 #5F6D84。右端に「コピー」のボタン（背景 #1463F0、文字 #FFFFFF・13px・font-weight 700、角丸 6px） - 補足：12px、色 #5F6D84 - 開くボタン：高さ 40px、左右padding 16px、角丸 999px、背景 #FFFFFF、枠線 1px solid #CBD5E1、文字 #47566E・14px・font-weight 700 ## 動作 - ボタンを押すと開閉する。外側のクリックと Esc キーで閉じる - 標準の popover 属性が使える場合はそれを使い、位置合わせだけを JavaScript で行う - 「コピー」を押したら、クリップボードにコピーし、ボタンの文言を2秒間「コピーしました」に変える - 開くときは、0.15秒でフェードしながら 4px 下へ動く ## アクセシビリティ - 開くボタンに aria-expanded と aria-controls を設定する - 開いたら、パネルのなかの最初の操作できる要素にフォーカスを移す。閉じたら、開くボタンに戻す - フォーカスは閉じ込めない（Tab キーでパネルの外に出たら、閉じる） - 「コピーしました」を aria-live="polite" で伝える - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。