モーダル・通知・タブコード生成用
お知らせ一覧のドロップダウン
ベルを押すと、最近のお知らせが並ぶ。
用途・説明
ヘッダーのベルのアイコンを押すと開く、お知らせ一覧のドロップダウンを作成します。未読のものは背景色と点で区別し、「すべて既読にする」で一括して既読にできます。Webサービスや会員サイトのヘッダーに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[お知らせのリスト]- 内容・日時・未読かどうか・リンク先を5件程度
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「お知らせ一覧のドロップダウン」を実装してください。 ## 表示内容 - 開くボタン：ベルのアイコンと、未読の件数のバッジ - ヘッダー：「お知らせ」と、「すべて既読にする」 - お知らせ： [お知らせのリスト] - フッター：「すべてのお知らせを見る」のリンク ## レイアウト - ベルのボタンの真下に、右端をそろえて表示する。幅 360px - スマホでは、画面の幅いっぱい（左右に 8px の余白）にする - 一覧は最大の高さ 400px でスクロール。ヘッダーとフッターは固定 - 各行：左に未読の点、その右に内容と日時 ## デザイン - パネル：背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、影 0 8px 32px rgba(27,42,68,0.12) - ヘッダー：padding 14px 16px、下に 1px solid #E2E8F0。「お知らせ」15px・font-weight 700、「すべて既読にする」13px・色 #1463F0 - 行：padding 12px 16px、下に 1px solid #EDF1F7 - 内容：14px、line-height 1.6、色 #1B2A44、2行で省略。日時：12px、色 #8A96AA - 未読の行：背景は #1463F0 の9%の淡い色。左に 8px の点（#1463F0） - 既読の行：背景 #FFFFFF。点の場所は空けておく（内容の位置をそろえるため） - hover：行の背景を #F7F9FC にする ## 動作 - ベルを押すと開閉する。外側のクリックと Esc キーで閉じる - 行を押すと、既読にしてからリンク先へ移動する - 「すべて既読にする」で、未読の表示とバッジを消す - お知らせが0件のときは「新しいお知らせはありません」と表示する - 日時は「5分前」「昨日」のような相対表示にする ## アクセシビリティ - ベルのボタンに aria-expanded、aria-controls、aria-label（例：「お知らせ、未読2件」）を設定する - 一覧は ul / li。各行は a 要素 - 未読かどうかを、色だけでなく読み上げ用の文字（「未読」）でも伝える - 日時は time 要素（datetime 属性つき） - 閉じたら、ベルのボタンにフォーカスを戻す ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。