# フローティングアクションボタンのCSS実装

> 画面右下に追従する円形のアクションボタン（FAB）。position: fixedとinsetの1行で配置し、ホバーで浮き上がります。

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

## HTML

```html
<p>ページをスクロールしても、右下のボタンは画面に追従します。</p>
<p style="height: 400px">（スクロール用の余白）</p>
<p>ページの末尾です。</p>

<button type="button" class="fab" aria-label="新規作成">＋</button>
```

## CSS

```css
.fab {
  position: fixed;
  inset: auto 16px 16px auto; /* 上 右 下 左 → 右下に固定 */
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: #b0413e;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
  transition: box-shadow 0.2s, transform 0.2s;
}

.fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.3);
}

.fab:focus-visible {
  outline: 3px solid #1a1712;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fab { transition: none; }
}
```

## 仕組みの解説

position: fixed でビューポート基準に固定し、inset: auto 16px 16px auto の1行で「右下から16px」を表現します（top/right/bottom/leftを個別に書くより短い）。テキストは「＋」だけなので、ボタンの意味は aria-label で伝えます。ホバー時は transform と影の強調で浮き上がりを演出します。

## 実装のポイント

モバイル実機では下端のブラウザUIと重なることがあります。env(safe-area-inset-bottom)を足すと安全です。

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

画面右下に固定表示される円形のフローティングアクションボタン（FAB）を作ってください。insetで配置し、aria-labelでボタンの意味を伝え、ホバーで浮き上がるエフェクトとフォーカスリングを付けてください。

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

- [position](https://www.css-dictionary.com/property/position.md)
- [inset](https://www.css-dictionary.com/property/inset.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [box-shadow](https://www.css-dictionary.com/property/box-shadow.md)
- [transition](https://www.css-dictionary.com/property/transition.md)