# トースト通知のCSS実装

> 画面右下にスライドインする通知トースト。role="status"で支援技術にも伝え、prefers-reduced-motionでは動きなしで表示します。

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

## HTML

```html
<div class="toast" role="status">
  <span class="toast-icon" aria-hidden="true">✓</span>
  変更を保存しました
</div>

<p class="note">画面右下に通知が表示されています（プレビューを再読込すると再生されます）</p>
```

## CSS

```css
.toast {
  position: fixed;
  inset: auto 16px 16px auto; /* 右下に固定 */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 8px;
  background: #1a1712;
  color: #fdfaf3;
  font-size: 14px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
  animation: toast-in 0.3s ease-out;
}

.toast-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4a7c59;
  font-size: 12px;
}

@keyframes toast-in {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

.note {
  font-size: 12px;
  color: #8a7d63;
}
```

## 仕組みの解説

position: fixed と inset で右下に固定し、出現は @keyframes で「少し下＋透明」から現在位置へ戻すスライドインにしています。toが省略されているのは「要素本来の状態へ戻る」というCSSアニメーションの仕様を利用した書き方です。role="status" を付けると、表示された時点でスクリーンリーダーが内容を読み上げます（割り込みの強いrole="alert"はエラー用に取っておきます）。

## 実装のポイント

実運用では「JSで要素を追加→数秒後に削除」の管理が必要です。複数同時に出す場合は縦に積むコンテナを用意します。

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

右下にスライドインするトースト通知を作ってください。position: fixedとinsetで配置、@keyframesで下からのフェードイン、role="status"の付与、prefers-reduced-motionでのアニメーション無効化も含めてください。

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

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