セグメンテッドコントロール Segmented Control
複数の選択肢をグループ化したトグルコントロール。ビュー切り替えに使用。
ライブデモ
選択中: 日
ソースコード
<div class="demo-segmented" role="radiogroup" aria-label="表示期間">
<button class="demo-seg-btn active" role="radio" aria-checked="true" data-value="day">日</button>
<button class="demo-seg-btn" role="radio" aria-checked="false" data-value="week">週</button>
<button class="demo-seg-btn" role="radio" aria-checked="false" data-value="month">月</button>
<button class="demo-seg-btn" role="radio" aria-checked="false" data-value="year">年</button>
<div class="demo-seg-indicator"></div>
</div>
<p class="demo-seg-output" id="demoSegOutput">選択中: <strong>日</strong></p>.demo-segmented {
display: inline-flex; position: relative;
background: #f3f4f6; border-radius: 10px; padding: 3px;
gap: 2px;
}
.demo-seg-btn {
position: relative; z-index: 1; padding: 8px 22px;
border: none; background: transparent; cursor: pointer;
font-size: 14px; font-weight: 600; color: #777;
border-radius: 8px; transition: color 0.25s;
}
.demo-seg-btn.active { color: #fff; }
.demo-seg-indicator {
position: absolute; top: 3px; left: 3px;
height: calc(100% - 6px); border-radius: 8px;
background: var(--ui-primary);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.demo-seg-output {
font-size: 13px; color: #666; margin: 12px 0 0;
}
.demo-seg-output strong { color: var(--ui-primary); }(function() {
const group = document.querySelector('.demo-segmented');
const btns = group.querySelectorAll('.demo-seg-btn');
const indicator = group.querySelector('.demo-seg-indicator');
const output = document.getElementById('demoSegOutput');
function moveIndicator(btn) {
indicator.style.width = btn.offsetWidth + 'px';
indicator.style.transform = 'translateX(' + (btn.offsetLeft - 3) + 'px)';
}
moveIndicator(group.querySelector('.demo-seg-btn.active'));
btns.forEach(btn => {
btn.addEventListener('click', function() {
btns.forEach(b => { b.classList.remove('active'); b.setAttribute('aria-checked', 'false'); });
this.classList.add('active');
this.setAttribute('aria-checked', 'true');
moveIndicator(this);
output.innerHTML = '選択中: <strong>' + this.textContent + '</strong>';
});
});
window.addEventListener('resize', () => {
moveIndicator(group.querySelector('.demo-seg-btn.active'));
});
})();AIプロンプト
Basic
セグメンテッドコントロールをHTML/CSSで作ってください。複数の選択肢をグループ化し、クリックで切り替わるトグルボタンです。
Custom
以下の仕様でセグメンテッドコントロールを実装してください。 - スライドするインジケーター（アニメーション付き） - 3～5個の選択肢に対応 - プライマリカラー: #2563eb - 選択中はインジケーターの背景色が変化 - コンパクトサイズとデフォルトサイズの2バリエーション - アイコン + テキスト対応
Advanced
アクセシビリティ対応のセグメンテッドコントロールを実装してください。 - role="radiogroup" + role="radio" パターン - aria-checked で選択状態を通知 - 矢印キーで選択を移動（WAI-ARIA Radio Group パターン） - Tab / Shift+Tab でグループ単位のフォーカス移動 - prefers-reduced-motion でスライドアニメーション無効化 - レスポンシブ対応（幅が狭い場合はドロップダウンにフォールバック） - 動的に選択肢を追加/削除可能なAPI