トースト通知（スタック対応）

解説

これは、操作の結果を画面の隅に小さなカードで知らせるトースト通知です。成功・エラーなど種類ごとにアイコンと色を変え、関数を呼ぶと新しいトーストが生成されて重なって（スタックして）表示され、一定時間後に自動で消えます。アイコンはインライン SVG で描かれ、外部フォントに依存しません。複数同時に出しても縦に積み上がるため、連続した操作でも通知が潰れません。表示と退場には transition による滑り込み・フェードが付き、唐突さがありません。

使いどころ

• 保存・送信・削除など、操作の成否をその場で伝えたいとき
• フォーム送信後の「送信しました」といった軽い確認
• 非同期処理の完了やエラーをページ遷移なしで知らせたい場面

表示位置や表示時間、色は CSS と関数の引数で調整できます。重要な警告は自動で消えると見落とされるため、消える時間を延ばすか手動で閉じる手段を併用すると安全です。スクリーンリーダーに確実に届けたい場合は、コンテナに role="status" や aria-live を付けると 読み上げされます。多用しすぎると通知疲れを招くので、本当に伝えたい結果に絞るのがコツです。