トースト通知
操作したときに画面下から短く現れ、数秒で自動的に消える通知（トースト）です。ボタンを押すと show クラスが付き、 transform で下からスライドインしてチェックアイコン付きの「保存しました」を表示します。 setTimeout でおよそ2.2秒後にクラスを外し、ふたたび下へ隠れて消えます。
解説
操作したときに画面下から短く現れ、数秒で自動的に消える通知（トースト）です。ボタンを押すとshowクラスが付き、transformで下からスライドインしてチェックアイコン付きの「保存しました」を表示します。setTimeoutでおよそ2.2秒後にクラスを外し、ふたたび下へ隠れて消えます。画面遷移やアラートを挟まずに完了を伝えられるため、作業の流れを止めません。
こんな通知に向く
- 保存・送信・コピーなど成功を一瞬で知らせたいとき
- カートへの追加やお気に入り登録の控えめなフィードバック
- 邪魔にならない軽い完了メッセージ全般
表示時間はsetTimeoutの2200（ミリ秒）で調整でき、長く見せたいなら数値を増やします。文言やアイコンはHTMLを書き換えるだけで差し替え可能で、背景色を変えればエラーや警告など用途別の色分けもできます。アイコンは絵文字ではなくインラインSVGで描いているため、環境による見た目のばらつきがありません。読み上げ環境に届けたい場合はrole="status"を足すとより親切です。
よくある質問
トーストが消えるまでの時間を長くできますか。
JS内の setTimeout に渡している 2200 を変更します。単位はミリ秒なので、3000 にすればおよそ3秒、5000 にすれば5秒間表示されたあとに自動で消えます。
成功以外にエラー通知としても使えますか。
使えます。表示文言を書き換え、背景色の緑を赤などに変えれば警告やエラーの通知になります。用途ごとに色を分けると意味が伝わりやすくなります。