フォーム・お問い合わせコード生成用
タグを追加していく入力欄
入力してEnterを押すと、言葉がタグになって並ぶ。
用途・説明
キーワードを入力して Enter を押すと、タグ（チップ）になって入力欄のなかに並んでいく入力パーツを作ります。記事のタグ付け、スキルや興味のある分野の登録、メールの宛先入力などに向いています。タグは「×」で1つずつ取り消せます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[項目名]- 例：興味のあるテーマ
[最大数]- 例：5
[入力例]- プレースホルダーに出す文言。例：入力して Enter
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUIに詳しいフロントエンドエンジニアです。 以下の条件で「タグを追加していく入力欄」を実装してください。 ## 表示内容 - 項目名：[項目名] - 追加できる数：最大 [最大数] 個（「3 / 5」のように残りを表示） - プレースホルダー：[入力例] ## デザイン - 外枠：最小の高さ 48px、padding 8px、枠線 1px solid #CBD5E1、角丸 8px、背景 #FFFFFF。なかでタグと入力欄が折り返して並ぶ - タグ：高さ 28px、左padding 10px、右padding 4px、角丸 999px、背景は #1463F0 の9%の淡い色、文字 #1463F0・13px・font-weight 700 - タグの「×」ボタン：20×20px の円、hover で背景を一段濃く - 入力欄：枠なし、文字 16px、残りの幅いっぱい（最小 120px） - 外枠のどこを押しても入力欄にフォーカスし、外枠全体にフォーカスのリングを表示する ## 動作 - Enter またはカンマでタグを追加する。前後の空白は取り除く - 同じ言葉は追加しない（すでにあるタグを一瞬ゆらして知らせる） - 入力欄が空のとき Backspace を押すと、最後のタグを削除する - 最大数に達したら入力欄を無効にし、「これ以上追加できません」と表示する - 日本語入力の変換確定の Enter ではタグを追加しない（isComposing を確認する） ## アクセシビリティ - タグの一覧は ul / li。「×」ボタンの aria-label は「デザイン を削除」のようにタグ名を含める - 追加・削除の結果を aria-live="polite" で伝える - 削除したあとは、フォーカスを入力欄に戻す ## 出力形式 - [使用技術]のコードを1つ出力 - フォーム送信時は、タグをカンマ区切りの文字列として隠し入力欄に入れる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。