モーダル・通知・タブコード生成用
横から出てくるドロワー
画面の右から、カートや詳細のパネルが滑り出る。
用途・説明
画面の右端から滑り出るドロワー（サイドパネル）を作成します。いま見ているページを残したまま、カートの中身や詳細情報、設定などを表示できます。ECサイトのカートを例に、ヘッダー・スクロールする本文・固定のフッターで構成します。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出し]- 例：カート（2点）
[本文の内容]- 例：商品の画像・名前・数量・金額のリスト
[決定ボタンの文言]- 例：レジに進む
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「横から出てくるドロワー」を実装してください。 ## 表示内容 - ヘッダー：見出し「[見出し]」と、閉じるボタン（✕） - 本文：[本文の内容] - フッター：小計と、決定ボタン「[決定ボタンの文言]」 ## レイアウト - 画面の右端に貼りつき、高さは画面いっぱい。幅 400px（スマホでは画面の幅の90%） - ヘッダーとフッターは固定し、本文だけをスクロールさせる - 本文の各行：左に画像（64px）、右に名前・数量・金額 ## デザイン - 背景の幕：rgba(27,42,68,0.5) - ドロワー：背景 #FFFFFF、影 -8px 0 32px rgba(27,42,68,0.25) - ヘッダー：padding 20px 24px、下に 1px solid #E2E8F0。見出し 18px・font-weight 700・色 #1B2A44 - 本文の行：padding 16px 24px、下に 1px solid #EDF1F7。名前 14px・font-weight 700、数量と補足 13px・色 #5F6D84、金額 14px・font-weight 700 - フッター：padding 20px 24px、上に 1px solid #E2E8F0 - 決定ボタン：高さ 48px、幅100%、角丸 999px、背景 #1463F0、文字 #FFFFFF・15px・font-weight 700 ## 動作 - 右から左へスライドして開く（0.3秒）。幕は同時にフェードイン - 閉じるボタン、幕のクリック、Esc キーで閉じる - 開いているあいだ、後ろのページはスクロールさせない - 中身が空のときは、「カートに商品がありません」と、買い物を続けるリンクを表示する ## アクセシビリティ - dialog 要素で実装し、aria-labelledby で見出しと結びつける - 開いたら閉じるボタンにフォーカスを移し、閉じたら開いたボタンに戻す - Tab キーでのフォーカスは、ドロワーのなかだけを巡回させる - 閉じるボタンに aria-label="閉じる" - スライドの動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 左から出したい場合の変更箇所をコメントで説明
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。