# セグメンテッドコントロールのCSS実装

> iOS風の切り替えスイッチをradioボタンで実装。見た目はCSSだけで作り、キーボード操作とフォーム送信はブラウザ標準のまま使えます。

- カテゴリ: ボタン・操作
- URL: https://www.css-dictionary.com/recipes/segmented-control/

## HTML

```html
<fieldset class="segmented">
  <legend class="sr-only">表示の切り替え</legend>
  <label>
    <input type="radio" name="view" value="list" checked>
    <span>一覧</span>
  </label>
  <label>
    <input type="radio" name="view" value="grid">
    <span>グリッド</span>
  </label>
  <label>
    <input type="radio" name="view" value="map">
    <span>地図</span>
  </label>
</fieldset>
```

## CSS

```css
.segmented {
  display: inline-flex;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border: 1px solid #cbbfa5;
  border-radius: 8px;
  background: #f3ecd9;
}

.segmented input {
  appearance: none;
  position: absolute;
  margin: 0;
}

.segmented span {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 14px;
  color: #5c5445;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.segmented input:checked + span {
  background: #fff;
  color: #1a1712;
  font-weight: 600;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.15);
}

.segmented input:focus-visible + span {
  outline: 2px solid #b0413e;
  outline-offset: 1px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
```

## 仕組みの解説

実体はただのradioボタンです。input自体は appearance: none と absolute 配置で見えなくし、隣接する span を「:checked + span」で選択中の見た目に切り替えます。radioなのでTabでグループに入り矢印キーで選択でき、name属性ごとフォーム送信にも使えます。フォーカスリングは input:focus-visible + span で span 側に描きます。

## 実装のポイント

divとJSで自作するとキーボード操作・aria属性をすべて自前で書くことになります。radioで作れば無料でついてきます。

## AIに依頼するときの文例

radioボタンを使ったセグメンテッドコントロール（iOS風の切り替えUI）を作ってください。inputはappearance: noneで隠し、:checked + spanで選択状態を表現、フォーカスリングも表示してください。JSは使わないでください。

## 使っているプロパティ

- [appearance](https://www.css-dictionary.com/property/appearance.md)
- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [box-shadow](https://www.css-dictionary.com/property/box-shadow.md)
- [pseudo-focus-visible](https://www.css-dictionary.com/property/pseudo-focus-visible.md)