スライドするサムのセグメント
「日／週／月／年」の4区分。選ぶと白いサムが選択位置へ滑り、下の集計値が切り替わる。矢印キーでも移動でき、iOS 型の見た目をボタンだけで作る。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- サムは選択中の区分の上に「乗っている」1枚だけ。動く要素を1つに絞ると、どこへ移ったかが一目で追える
- 区分は 2〜5 個まで。ラベルは 1〜3 文字の同じ長さに揃え、等幅の枠に収める
- 選択は role=radiogroup ＋ aria-checked で伝え、←→ キーで移動できるようにする
- 切り替えたら下の数値が変わることを、同じ画面で見せる。何が変わるか分からないセグメントは押されない
コード（コピーして使えます）
<div class="sst-card">
<p class="sst-label">売上の集計期間</p>
<div class="sst-seg" role="radiogroup" aria-label="集計期間" id="sst-seg">
<span class="sst-thumb" aria-hidden="true"></span>
<button class="sst-opt" type="button" role="radio" aria-checked="true" tabindex="0" data-value="¥48,200" data-diff="前日比 +6%">日</button>
<button class="sst-opt" type="button" role="radio" aria-checked="false" tabindex="-1" data-value="¥312,900" data-diff="前週比 +2%">週</button>
<button class="sst-opt" type="button" role="radio" aria-checked="false" tabindex="-1" data-value="¥1,284,000" data-diff="前月比 −4%">月</button>
<button class="sst-opt" type="button" role="radio" aria-checked="false" tabindex="-1" data-value="¥14,950,000" data-diff="前年比 +18%">年</button>
</div>
<p class="sst-value" id="sst-value" aria-live="polite">¥48,200</p>
<p class="sst-diff" id="sst-diff">前日比 +6%</p>
</div>