セグメンテッドコントロール
選択中の背景ピルがスッと横移動するiOS風の切替。可変幅ラベルにも追従し、内容も切り替わる。矢印キー操作にも対応。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 今日／今週／今月など2〜5個の表示切替
- iOS風の集計期間・表示モード切替
- 選択の移動を目で追わせたい小さな切替
- 避ける場面
- 別ページへ遷移するナビ
- ラベルが長く均等幅で潰れる
- 選択肢が6個超
- 構成要素
- トラック
- 選択ピル
- オプション
- 表示内容
- 持っている状態
- 通常
- フォーカス
- 押下中
- キーボード
Tab でコントロールへ（選択中だけ tabindex=0）・←→ で隣へ移動と同時に選択（末尾で循環）・Home／End で両端・Enter／Space でも選択
- 支援技術
APG Tabs: role=tablist／tab／tabpanel、aria-selected とローミング tabindex を同期、aria-controls／aria-labelledby で表示内容と結ぶ。ピルは aria-hidden、focus-visible の輪郭あり
- 動き
ピルの transform／width 0.28s cubic-bezier で横滑り・文字色 0.2s。選択がどこへ移ったかを伝える。reduced-motion では即時
目的選ばせる
デザインの要点
- ピルは選択中ボタンの offsetLeft／offsetWidth に合わせて transform と width を動かす。等幅前提だと「全期間」のような長いラベルでずれる
- ←→ で移動した瞬間に選択も切り替える（自動アクティベーション）。表示内容が軽いときは Enter を待たせないほうが速い
- コントロール全体を Tab 1回で通り抜ける。4つ全部に止まると、次の項目へ行くのに Tab を4回押させる
- ピルは z-index を文字の下に置き、文字色だけ変える。文字をピルの上に置かないと、移動中に文字が隠れる
コード（コピーして使えます）
<div class="sg-wrap">
<div class="sg" role="tablist" aria-label="表示切替">
<span class="sg-thumb" id="sg-thumb" aria-hidden="true"></span>
<button class="sg-opt is-active" id="sg-tab-0" role="tab" aria-selected="true" aria-controls="sg-view" tabindex="0" data-i="0">今日</button>
<button class="sg-opt" id="sg-tab-1" role="tab" aria-selected="false" aria-controls="sg-view" tabindex="-1" data-i="1">今週</button>
<button class="sg-opt" id="sg-tab-2" role="tab" aria-selected="false" aria-controls="sg-view" tabindex="-1" data-i="2">今月</button>
<button class="sg-opt" id="sg-tab-3" role="tab" aria-selected="false" aria-controls="sg-view" tabindex="-1" data-i="3">全期間</button>
</div>
<p class="sg-view" id="sg-view" role="tabpanel" aria-labelledby="sg-tab-0" tabindex="0">今日の集計を表示しています</p>
</div>