# 連結ボタングループのCSS実装

> 「日・週・月」のような切り替えに使う連結ボタン。枠線を1px重ねて一体化し、両端だけ:first-child/:last-childで角丸にします。

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

## HTML

```html
<div class="btn-group" role="group" aria-label="期間の切り替え">
  <button type="button" class="is-active" aria-pressed="true">日</button>
  <button type="button" aria-pressed="false">週</button>
  <button type="button" aria-pressed="false">月</button>
</div>
```

## CSS

```css
.btn-group {
  display: inline-flex;
}

.btn-group button {
  padding: 8px 20px;
  border: 1px solid #cbbfa5;
  margin-left: -1px; /* 隣の枠線と重ねて二重線を防ぐ */
  background: #fff;
  color: #5c5445;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.btn-group button:first-child {
  margin-left: 0;
  border-radius: 8px 0 0 8px;
}

.btn-group button:last-child {
  border-radius: 0 8px 8px 0;
}

.btn-group button:hover {
  background: #f3ecd9;
}

.btn-group button:focus-visible {
  outline: 2px solid #b0413e;
  outline-offset: -2px;
  position: relative; /* 重なった隣のボタンにリングが隠れないように */
}

.btn-group .is-active {
  background: #b0413e;
  border-color: #b0413e;
  color: #fff;
}
```

## 仕組みの解説

各ボタンに margin-left: -1px を掛けて枠線を1本に重ね、:first-child と :last-child で両端だけ角丸にすると一体化して見えます。フォーカスリングは隣のボタンの下に潜り込むため、:focus-visible で position: relative にして最前面へ出すのが小さなコツです。選択状態は aria-pressed で支援技術にも伝えます。

## 実装のポイント

選択の切り替えロジックが必要ならJSでis-activeとaria-pressedを同時に更新します。単一選択ならradio方式（セグメンテッドコントロールのレシピ）も検討してください。

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

「日・週・月」を切り替える連結ボタングループを作ってください。margin-left: -1pxで枠線を重ね、:first-child/:last-childで両端のみ角丸、選択状態はaria-pressedで表現してください。

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

- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [pseudo-first-child](https://www.css-dictionary.com/property/pseudo-first-child.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [margin](https://www.css-dictionary.com/property/margin.md)