# アイコンだけのボタンのCSS実装

> お気に入り・共有・メニューなどのアイコンボタン。44pxのタップ領域とaria-labelで、小さく見えても押しやすく意味が伝わるボタンにします。

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

## HTML

```html
<div class="toolbar">
  <button type="button" class="icon-btn" aria-label="お気に入りに追加">♡</button>
  <button type="button" class="icon-btn" aria-label="共有する">↗</button>
  <button type="button" class="icon-btn" aria-label="その他のメニュー">⋯</button>
</div>
```

## CSS

```css
.toolbar {
  display: flex;
  gap: 8px;
}

.icon-btn {
  width: 44px;  /* タップターゲットの推奨サイズ */
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #e2d8c2;
  border-radius: 8px;
  background: #fff;
  font-size: 18px;
  color: #5c5445;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.icon-btn:hover {
  border-color: #b0413e;
  color: #b0413e;
}

.icon-btn:focus-visible {
  outline: 2px solid #b0413e;
  outline-offset: 2px;
}
```

## 仕組みの解説

アイコンだけのボタンで最も大事なのはCSSではなくaria-labelです。視覚的なラベルがない分、ボタンの意味はここでしか伝わりません。サイズはWCAGのターゲットサイズ推奨に合わせて44px四方を確保し、アイコンは display: grid + place-items: center で正確に中央へ置きます。

## 実装のポイント

絵文字ではなくSVGアイコンを使う場合は、svg側にaria-hidden="true"を付けてボタンのaria-labelに一本化します。

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

アイコンのみのボタンを3つ並べたツールバーを作ってください。各ボタンは44px四方、aria-labelで意味を伝え、display: gridで中央配置、hoverとfocus-visibleのスタイルも付けてください。

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

- [display-grid](https://www.css-dictionary.com/property/display-grid.md)
- [place-items](https://www.css-dictionary.com/property/place-items.md)
- [width](https://www.css-dictionary.com/property/width.md)
- [height](https://www.css-dictionary.com/property/height.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)