ナビ・リスト操作
セグメンテッドコントロール
選択中の背景ピルがスッと横移動するiOS風の切替。可変幅ラベルにも追従し、内容も切り替わる。矢印キー操作にも対応。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="sg-wrap">
<div class="sg" role="tablist" aria-label="表示切替">
<span class="sg-thumb" id="sg-thumb"></span>
<button class="sg-opt is-active" role="tab" aria-selected="true" data-i="0">今日</button>
<button class="sg-opt" role="tab" aria-selected="false" data-i="1">今週</button>
<button class="sg-opt" role="tab" aria-selected="false" data-i="2">今月</button>
<button class="sg-opt" role="tab" aria-selected="false" data-i="3">全期間</button>
</div>
<p class="sg-view" id="sg-view">今日の集計を表示しています</p>
</div>