# バッジ・通知ドットのCSS実装

> アイコン右上の未読数バッジと、NEW・SALEなどのラベルバッジ。数はaria-labelで伝え、2桁でも崩れないmin-width設計にします。

- カテゴリ: 表示・フィードバック
- URL: https://www.css-dictionary.com/recipes/badge-notification/

## HTML

```html
<div class="badge-row">
  <button type="button" class="bell" aria-label="通知を開く（未読3件）">
    <span aria-hidden="true">🔔</span>
    <span class="bell-count" aria-hidden="true">3</span>
  </button>
  <span class="tag">NEW</span>
  <span class="tag tag-sale">SALE</span>
  <span class="tag tag-soldout">SOLD OUT</span>
</div>
```

## CSS

```css
.badge-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bell {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #e2d8c2;
  border-radius: 8px;
  background: #fff;
  font-size: 18px;
  cursor: pointer;
}

.bell:focus-visible {
  outline: 2px solid #b0413e;
  outline-offset: 2px;
}

.bell-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px; /* 2桁になっても丸→カプセルに伸びる */
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #b0413e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.tag {
  padding: 3px 12px;
  border-radius: 999px;
  background: #b0413e;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.tag-sale {
  background: #d9a441;
  color: #1a1712;
}

.tag-soldout {
  background: #f3ecd9;
  color: #8a7d63;
}
```

## 仕組みの解説

未読数のドットは position: absolute でアイコンの右上角に重ねます。幅を固定せず min-width + padding にしておくと、1桁では真円、2桁以上ではカプセル形に自然に伸びます。見た目の数字は aria-hidden にし、実際の情報はボタンの aria-label（「未読3件」）で伝えるのがアクセシビリティの要点です。

## 実装のポイント

未読数が変動する場合はJSでaria-labelも同時に更新します。99を超えたら「99+」に丸めるのが定番です。

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

通知ベルの未読数バッジとNEW/SALEのラベルバッジを作ってください。未読数はposition: absoluteで右上に重ね、min-widthで2桁対応、数の情報はボタンのaria-labelで伝えてください。

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

- [position](https://www.css-dictionary.com/property/position.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [place-items](https://www.css-dictionary.com/property/place-items.md)
- [letter-spacing](https://www.css-dictionary.com/property/letter-spacing.md)
- [min-width](https://www.css-dictionary.com/property/min-width.md)