プラス / マイナス カウンター
これは数量を増減するための、マイナス・数値・プラスが横並びになったステッパー（カウンター）です。両端のボタンに data-d 属性で増減量（-1 と 1）を持たせ、クリックすると現在値に加算します。値が 0 から 99 の範囲に収まる場合だけ表示を更新するので、マイナスや過大な数量を防げます。
解説
これは数量を増減するための、マイナス・数値・プラスが横並びになったステッパー（カウンター）です。両端のボタンに data-d 属性で増減量（-1 と 1）を持たせ、クリックすると現在値に加算します。値が 0 から 99 の範囲に収まる場合だけ表示を更新するので、マイナスや過大な数量を防げます。JavaScript はごく短く、parseInt で文字列を数値化して計算するシンプルな構造です。
向いている用途
- EC サイトのカートでの購入数の調整
- 予約フォームでの人数・席数の選択
- 在庫管理画面など、細かい数を手早く変えたい場面
上限値は n<=99 の 99 を変えれば自由に設定できます。ボタンのホバー色は .cnt button:hover でブランドカラーに合わせて調整できます。アクセシビリティの観点では、現在値を表示する span に aria-live を付けると、増減した数値がスクリーンリーダーで読み上げられます。実際のフォーム送信では、表示用の数値を input にも反映させる処理を足すと安全です。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
数量の上限・下限を変えられますか？
はい。JavaScript の下限・上限の条件式（0 以上 99 以下）を書き換えるだけで変更できます。たとえば最小を 1 個にしたいなら、下限の判定を 1 以上に直します。
送信フォームでそのまま使えますか？
そのままだと数値は span に表示されるだけなので、フォーム送信用には hidden の input などに値を同期させる処理を追加すると確実です。