フォーム・お問い合わせコード生成用
候補が出る入力欄
数文字入れると、当てはまる候補が下に並ぶ。
用途・説明
文字を入力すると、当てはまる候補が下に一覧で表示される入力欄を作ります。駅名、会社名、商品名、学校名など、選択肢が多くてプルダウンでは選びにくい項目に向いています。入力した文字に一致する部分を太字にして、候補の違いを見分けやすくします。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[項目名]- 例：最寄り駅
[候補のデータ]- 例：駅名の一覧（配列、またはAPI）
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUIに詳しいフロントエンドエンジニアです。 以下の条件で「候補が出る入力欄」を実装してください。 ## 表示内容 - 項目名：[項目名] - 候補のもとになるデータ：[候補のデータ] - 入力欄の下に、候補の一覧（最大6件） ## デザイン - 入力欄：高さ 48px、枠線 1px solid #CBD5E1、角丸 8px、文字 16px。左に虫めがねのアイコン - 候補の一覧：入力欄の下 4px、同じ幅。背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 10px、影 0 8px 24px rgba(27, 42, 68, 0.12)、最大の高さ 280px でスクロール - 各候補：高さ 44px、左右padding 16px、文字 15px - 入力した文字に一致する部分：font-weight 700、色 #1463F0 - 選択中（キーボードで移動中・hover）の候補：背景 #F1F5FC - 候補がない場合：「該当する候補がありません」を #5F6D84 で表示する ## 動作 - 1文字以上入力したら候補を表示する。入力のたびに絞り込む（APIを使う場合は 250ms 待ってから問い合わせる） - ひらがな・カタカナ、全角・半角の違いを区別せずに探す - 候補を選ぶと入力欄に入り、一覧を閉じる - 入力欄の外をクリック、または Esc で一覧を閉じる ## アクセシビリティ - 入力欄は role="combobox"、一覧は role="listbox"、候補は role="option" - aria-expanded、aria-controls、aria-activedescendant を正しく切り替える - 上下の矢印キーで候補を移動、Enter で決定 - 候補の件数を aria-live="polite" で「5件の候補があります」と伝える ## 出力形式 - [使用技術]のコードを1つ出力 - 候補を探す処理は関数に分け、配列とAPIのどちらにも差し替えられるようにする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。