ボタンコード生成用
数量を増減するステッパー
−と＋のボタンで、個数や人数を1つずつ変える。
用途・説明
数字の左右に「−」「＋」のボタンを置いた、数量のステッパーを作ります。ECサイトのカートの個数、予約の人数、チケットの枚数など、小さな数を選ぶ場面に向いています。下限・上限に達したらボタンが押せなくなる動きまで含めています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[項目名]- 例：数量、人数
[最小値]- 例：1
[最大値]- 例：10
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはUIデザインに詳しいフロントエンドエンジニアです。 以下の条件で「数量を増減するステッパー」を実装してください。 ## 表示内容 - 項目名：[項目名] - 左から「−」ボタン、現在の数、「＋」ボタン - 範囲：[最小値]〜[最大値] ## デザイン - 全体：枠線 1px solid #DCE4F0、角丸 10px、背景 #FFFFFF、内側の区切りに縦線 1px - 各ボタン：44×44px、記号の色 #1463F0、hover で背景 #F1F5FC - 数字：幅 56px、中央揃え、16px・font-weight 700・色 #1B2A44、font-variant-numeric: tabular-nums - 押せないボタン：記号の色 #CBD5E1、カーソル not-allowed ## 動作 - 「＋」で1増え、「−」で1減る - 最小値のときは「−」、最大値のときは「＋」が押せなくなる - 数字の部分は直接入力もできる。範囲外の値や数字以外が入ったら、範囲内の値に直す - 値が変わったらコールバックで受け取れるようにする ## アクセシビリティ - 数字は input type="number"（または role="spinbutton"）にし、項目名を label で関連付ける - 各ボタンには aria-label="数量を1つ減らす"「数量を1つ増やす」を付ける - 上下の矢印キーでも増減できる - 値が変わったことを aria-live="polite" で伝える ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。