← 一覧へ

やってみよう+ と − を押して、個数を変えてみてください

ボタン・操作部品マイナー(知る人ぞ知る)

ステッパー

Stepper / Quantity Selector

「− 1 +」のボタンで、個数などの数を1つずつ増やしたり減らしたりする。

別名数量セレクターカウンターインクリメンター数量ボタンプラスマイナスボタン

どこで使われている?

よく見かける場所
ネット通販のカート、ホテル予約の人数、料理アプリの人数分
使うとよい場面
1〜10程度の小さな数を増減させるとき
避けたい場面
大きな数(直接入力にする)

補足Material Design や Flutter で「Stepper」と言うと、「手順1→2→3」の進行表示を指すので注意してください。数を増減するものは「数量セレクター」と伝えると確実です。

似ているものとの違い

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。

HTML / CSS / JavaScript で「ステッパー(Stepper / Quantity Selector)」を実装してください。

動き:数字の左右に「−」と「+」のボタンを置き、押すたびに数を1ずつ増減する。最小値(1)では「−」を、最大値(10)では「+」を押せない見た目にする。数が変わったら合計金額も更新する。

使う部品:<input type="number"> + − / + ボタンを自作
もっと詳しく:プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら<input type="number"> + − / + ボタンを自作
iPhoneアプリならStepper
Androidアプリなら標準部品なし。IconButton 2つと数字で自作
Flutterなら標準部品なし。IconButton 2つと数字で自作(Flutter の Stepper は手順表示なので別物)
React Nativeなら標準部品なし。自作