CSS・HTML・JavaScriptで作るシンプルでおしゃれなトースト通知の実装方法

Webアプリやサイトでよく見かける「〇〇が完了しました」や「エラーが発生しました」といった小さな通知。これらは「トースト通知（Toast Notification）」と呼ばれ、ユーザーに一時的なフィードバックを伝えるために便利なUI要素です。

この記事では、CSS・HTML・JavaScriptだけでシンプルかつ見栄えの良いトースト通知を作る方法を、コピペで使えるコード付きでわかりやすく解説します。
プラグイン不要、初心者にも優しい実装です。

トースト通知とは何か？

トースト通知とは、ユーザーの操作に対して画面に一時的に表示されるメッセージのことです。たとえば、ボタンをクリックしたときに「保存しました」と表示されるようなものです。

スマホアプリやWebアプリでよく使われており、ユーザーの操作結果を即時に視覚的に伝えることで、UXを向上させる重要な要素の一つとされています。

HTMLでトーストの基本構造を作る

まずは、トースト通知を表示するためのHTML構造を作ります。以下のコードを<body>内に追加してください。

<div id="toast-container"></div>
<button onclick="showToast('保存しました')">保存する</button>

ここでは「トースト通知を表示する場所」と「通知を表示するボタン」を用意しています。

CSSでトースト通知のスタイルを整える

次に、トーストの見た目を整えるためにCSSを記述します。シンプルで洗練された見た目に仕上げるため、以下のようにします。

#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

.toast {
  background-color: #333;
  color: #fff;
  padding: 12px 20px;
  margin-top: 10px;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInOut 3s ease-in-out forwards;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

このスタイルで、トーストは右上に表示されて、スッと現れて消えるようなアニメーションになります。

JavaScriptでトースト通知を制御する

トースト通知を表示・非表示にするためのJavaScriptを追加します。以下のコードを<script>タグ内に記述します。

function showToast(message) {
  const container = document.getElementById('toast-container');
  const toast = document.createElement('div');
  toast.className = 'toast';
  toast.innerText = message;

  container.appendChild(toast);

  setTimeout(() => {
    toast.remove();
  }, 3000);
}

この関数を呼び出すと、新しいトーストが作成され、3秒後に自動的に削除されます。

トースト通知を複数同時に表示させるには？

複数のトーストを同時に表示したい場合、特別な設定は必要ありません。すでに紹介したコードでは、複数のトーストが順番に積み重なって表示されるようになっています。

showToast('ファイルをアップロードしました');
showToast('メールを送信しました');

上記のように連続して呼び出せば、順番に表示されていきます。

応用：通知タイプごとに色分けする

成功・失敗など、通知のタイプに応じて色分けしたい場合は、CSSにクラスを追加し、JavaScriptで切り替えられるようにします。

.toast.success { background-color: #4CAF50; }
.toast.error { background-color: #F44336; }
.toast.info { background-color: #2196F3; }
function showToast(message, type = 'success') {
  const container = document.getElementById('toast-container');
  const toast = document.createElement('div');
  toast.className = `toast ${type}`;
  toast.innerText = message;

  container.appendChild(toast);

  setTimeout(() => {
    toast.remove();
  }, 3000);
}

使い方の例：

showToast('データを保存しました', 'success');
showToast('保存に失敗しました', 'error');
showToast('読み込み中...', 'info');

スマホ対応やアクセシビリティ対応は？

スマホでも動作しますが、念のためメディアクエリでサイズ調整するのもおすすめです。また、アクセシビリティを意識するなら、role="alert"属性を付けると良いでしょう。

htmlコピーする編集する<div class="toast" role="alert">保存しました</div>

まとめ

トースト通知は、ユーザーにやさしいフィードバックを与えるための重要なパーツです。今回紹介した方法を使えば、ライブラリ不要で軽量な実装が可能です。特に、フォーム送信やボタン操作後の確認メッセージに適しています。

シンプルに始めて、アニメーションや通知の種類ごとにカスタマイズすれば、サイトの完成度もぐっと高まります。ぜひ、自分のWebサイトに取り入れてみてください！

タイトルとURLをコピーしました