フォーム・お問い合わせコード生成用
デザインをそろえたセレクトボックス
ブラウザごとの差をなくした、選びやすいプルダウン。
用途・説明
都道府県、お問い合わせの種類、希望の時間帯など、決まった選択肢から1つを選ぶセレクトボックスを作ります。標準の select 要素を使いながら、枠・矢印・フォーカス時の見た目をほかの入力欄とそろえます。スマホでは端末標準の選択画面が開くので、操作に迷いません。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[項目名]- 例：お問い合わせの種類
[選択肢]- 例：サービスについて、お見積り、採用、その他
[未選択時の文言]- 例：選択してください
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはフォームのUIに詳しいフロントエンドエンジニアです。 以下の条件で「デザインをそろえたセレクトボックス」を実装してください。 ## 表示内容 - 項目名：[項目名] - 選択肢：[選択肢] - 未選択時の文言：[未選択時の文言] ## デザイン - 標準の select 要素を使い、appearance: none で見た目を整える - 高さ 48px、左padding 16px、右padding 44px（矢印のぶん）、枠線 1px solid #CBD5E1、角丸 8px、背景 #FFFFFF - 文字 16px（iOSでの自動ズームを防ぐため 16px 以上）、色 #1B2A44。未選択時は #8A96AA - 矢印：右端から 16px の位置に、下向きの山形（12px、色 #5F6D84）。背景画像のSVG、または重ねた要素で描く - focus：枠線 #1463F0、外側に #1463F0 の不透明度 0.18 のリング 3px - 項目名（ラベル）：14px、font-weight 700、入力欄の上 8px ## 動作 - 未選択時の文言は、選べない選択肢（disabled・value は空）として先頭に置く - 必須の場合、未選択のまま送信しようとしたらエラー文を下に表示する ## アクセシビリティ - label 要素と select を for / id で関連付ける - エラー文は aria-describedby で関連付け、aria-invalid を切り替える - 選択肢が15個を超える場合は、検索できる入力欄に変えることをコメントですすめる ## 出力形式 - [使用技術]のコードを1つ出力 - 選択肢を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。