ナビゲーションコード生成用
アカウントのドロップダウンメニュー
右上のアイコンを押すと、マイページや設定のメニューが開く。
用途・説明
ヘッダーの右上にあるユーザーのアイコンを押すと開く、アカウント用のメニューを作成します。名前とメールアドレス、マイページ・設定・ログアウトなどの項目をまとめます。会員制のサービス、管理画面、ECサイトのログイン後のヘッダーに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[メニュー項目]- 例：マイページ、注文履歴、アカウント設定、ログアウト
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「アカウントのドロップダウンメニュー」を実装してください。 ## 表示内容 - 開くボタン：丸いアイコン（イニシャルまたは写真）と、下向きの小さな矢印 - メニューの上部：名前とメールアドレス - 項目：[メニュー項目] ## デザイン - 開くボタン：アイコンは直径 36px の円。背景は #1463F0 の15%の淡い色、イニシャルは #1463F0・14px・font-weight 700 - メニュー：ボタンの下 8px、右端をそろえる。幅 240px、背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px、影 0 8px 24px rgba(27, 42, 68, 0.12) - 上部：padding 16px、下に 1px solid #E2E8F0。名前 14px・font-weight 700、メールアドレス 12px・色 #5F6D84（長い場合は省略） - 項目：高さ 40px、左右padding 16px、文字 14px、左に線のアイコン（18px、色 #5F6D84） - hover：背景 #F1F5FC - 「ログアウト」は線で区切って最後に置き、文字色を #C9343A にする ## 動作 - ボタンを押すと開閉する。メニューの外をクリック、または Esc キーで閉じる - 開くときは、上から 4px 下がりながら 0.15秒でフェードインする ## アクセシビリティ - 開くボタンは button 要素で、aria-haspopup="menu"・aria-expanded・aria-label="アカウントメニュー" を付ける - メニューは role="menu"、項目は role="menuitem" - 開いたら最初の項目にフォーカスを移す。上下の矢印キーで移動できる - 閉じたら、フォーカスを開くボタンに戻す - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力 - 項目を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。