Web BENTO JS
カテゴリ一覧
トースト通知

05 / TOAST 12 パーツ

JSトースト通知実装 12選

Q: コピーしたトースト通知はそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけで動きます。デモはカード内に表示していますが、画面の隅に出したい場合はCSSの .box を position:fixed に変えるだけです。

Q: トーストの表示時間はどのくらいが適切ですか？

目安は3〜5秒です。短い確認メッセージなら3秒前後、文章を読ませたい場合は5秒程度にし、data-duration属性（ミリ秒）で変更できます。じっくり読ませたい内容にはプログレスバー付きや閉じるボタン付きが向いています。

Q: 同じページに複数設置しても大丈夫ですか？

大丈夫です。初期化スクリプトは data 属性で対象を自動検出し、初期化済みの要素はスキップするため、複数設置してもコードを2回貼っても壊れません。

Q: アクセシビリティには対応していますか？

トーストの表示先に aria-live="polite" を指定しているので、追加されたメッセージがスクリーンリーダーに読み上げられます。エラー通知には role="alert" を付けて即時に伝え、閉じる・元に戻すなどの操作は button 要素で実装しています。

Q: このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「4色出し分け（状態別）」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

コピペで動くトースト通知（自動で消えるお知らせ）のサンプル集です。プレビューは「表示する」ボタンで実際に動作します。HTML / CSS / JS タブでコードを確認し、全部コピーを押せば1回の貼り付けで完成します。すべて依存ライブラリなしのバニラJSで、data-bnto-* 属性による自動初期化式です。デモはカード内に表示していますが、CSSを1行変えるだけで画面の隅に固定表示できます。

該当するパーツが見つかりませんでした。

ベーシック

<!-- data-duration＝表示時間（ミリ秒） -->
<div class="bnto-toast" data-bnto-toast data-duration="3000">
  <button type="button" class="tg">表示する</button>
  <div class="box" aria-live="polite"></div>
</div>

.bnto-toast {
  --c1: hsl(202 73% 50%);  /* アクセント色 */
  position: relative; min-height: 150px; text-align: center;
}
.bnto-toast .tg {
  background: var(--c1); color: #fff;
  border: none; border-radius: 999px; padding: 9px 20px;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* デモはカード内に表示。ページ全体に出すなら
   position:fixed; left:auto; right:16px; bottom:16px; に */
.bnto-toast .box {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none;
}
.bnto-toast .it {
  display: flex; align-items: center; gap: 9px;
  background: #1D2A36; color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 10px 16px; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  /* フェード＋スライドイン */
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s, transform .3s;
  pointer-events: auto;
}
.bnto-toast .it.show { opacity: 1; transform: none; }
.bnto-toast .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c1); }

// data-bnto-toast を自動検出して初期化（複数設置OK・二重実行OK）
(function () {
  document.querySelectorAll('[data-bnto-toast]').forEach(function (host) {
    if (host.dataset.bntoInit) return;
    host.dataset.bntoInit = '1';
    var box = host.querySelector('.box');
    host.querySelector('.tg').addEventListener('click', function () {
      var old = box.querySelector('.it');    // このデモでは1つだけ表示
      if (old) old.remove();
      var it = document.createElement('div');
      it.className = 'it';
      it.innerHTML = '<span class="dot"></span>保存しました';
      box.appendChild(it);
      void it.offsetWidth;                   // 一度レイアウトさせてから .show
      it.classList.add('show');
      setTimeout(function () {
        it.classList.remove('show');
        setTimeout(function () { it.remove(); }, 350);
      }, parseInt(host.dataset.duration, 10) || 3000);
    });
  });
})();

使い方のコツ

表示時間は data-duration（ミリ秒）で変更できます。画面右下に出したいときは .box を position:fixed; right:16px; bottom:16px; left:auto; に変えるだけです。メッセージ文はJSの innerHTML の部分を書き換えてください。

4色出し分け（状態別）

<div class="bnto-toast2" data-bnto-toast-type data-duration="3000">
  <div class="btns">
    <button type="button" class="tg" data-type="success">成功</button>
    <button type="button" class="tg" data-type="error">エラー</button>
    <button type="button" class="tg" data-type="warn">警告</button>
    <button type="button" class="tg" data-type="info">情報</button>
  </div>
  <div class="box" aria-live="polite"></div>
</div>

.bnto-toast2 { position: relative; min-height: 170px; text-align: center; }
.bnto-toast2 .btns { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.bnto-toast2 .tg {
  border: none; border-radius: 999px; padding: 8px 14px;
  font: inherit; font-weight: 800; font-size: 12px;
  color: #fff; cursor: pointer;
}
/* 状態色（意味が固定なのでシャッフル対象外） */
.bnto-toast2 .tg[data-type="success"] { background: #2E9E5B; }
.bnto-toast2 .tg[data-type="error"] { background: #E0405A; }
.bnto-toast2 .tg[data-type="warn"] { background: #E8A020; }
.bnto-toast2 .tg[data-type="info"] { background: #3DA9E0; }
/* ページ全体に出すなら position:fixed に */
.bnto-toast2 .box {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none;
}
.bnto-toast2 .it {
  --tc: #2E9E5B;
  display: flex; align-items: center; gap: 9px;
  background: #fff; color: #1D2A36;
  border: 2px solid var(--tc);
  font-size: 12.5px; font-weight: 700;
  padding: 9px 14px; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s, transform .3s;
  pointer-events: auto;
}
.bnto-toast2 .it.show { opacity: 1; transform: none; }
.bnto-toast2 .it.error { --tc: #E0405A; }
.bnto-toast2 .it.warn { --tc: #E8A020; }
.bnto-toast2 .it.info { --tc: #3DA9E0; }
.bnto-toast2 .ic {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tc); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
}

// 成功 / エラー / 警告 / 情報 の4色出し分け
(function () {
  var MSG = {
    success: ['✓', '保存に成功しました'],
    error:   ['✕', 'エラーが発生しました'],
    warn:    ['!', '入力内容をご確認ください'],
    info:    ['i', '新しいお知らせがあります']
  };
  document.querySelectorAll('[data-bnto-toast-type]').forEach(function (host) {
    if (host.dataset.bntoInit) return;
    host.dataset.bntoInit = '1';
    var box = host.querySelector('.box');
    host.querySelectorAll('.tg').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var type = btn.dataset.type;
        var it = document.createElement('div');
        it.className = 'it ' + type;
        // エラーは即時に読み上げてもらう
        if (type === 'error') it.setAttribute('role', 'alert');
        it.innerHTML = '<span class="ic">' + MSG[type][0] + '</span>' + MSG[type][1];
        box.appendChild(it);
        void it.offsetWidth;
        it.classList.add('show');
        setTimeout(function () {
          it.classList.remove('show');
          setTimeout(function () { it.remove(); }, 350);
        }, parseInt(host.dataset.duration, 10) || 3000);
      });
    });
  });
})();

使い方のコツ

成功＝緑、エラー＝赤のような状態色は意味が固定なので、サイトのテーマ色に合わせて無理に変えないのがおすすめです。メッセージ文はJSの MSG オブジェクトを書き換えるだけで変更できます。エラーには role="alert" が自動で付きます。

プログレスバー付き

<!-- data-duration＝バーが尽きるまでの時間（ミリ秒） -->
<div class="bnto-toast3" data-bnto-toast-bar data-duration="4500">
  <button type="button" class="tg">表示する</button>
  <div class="box" aria-live="polite"></div>
</div>

.bnto-toast3 {
  --c1: hsl(280 55% 55%);
  position: relative; min-height: 150px; text-align: center;
}
.bnto-toast3 .tg {
  background: var(--c1); color: #fff;
  border: none; border-radius: 999px; padding: 9px 20px;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* ページ全体に出すなら position:fixed に */
.bnto-toast3 .box {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none;
}
.bnto-toast3 .it {
  position: relative; overflow: hidden;
  background: #1D2A36; color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 11px 16px 14px; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s, transform .3s;
  pointer-events: auto;
}
.bnto-toast3 .it.show { opacity: 1; transform: none; }
/* 残り時間バー：幅100%→0のCSSアニメ */
.bnto-toast3 .bar {
  position: absolute; left: 0; bottom: 0;
  height: 4px; width: 100%; background: var(--c1);
  animation: bnto-t3bar linear forwards;
}
@keyframes bnto-t3bar { from { width: 100%; } to { width: 0; } }
/* ホバー中はバーもタイマーも一時停止 */
.bnto-toast3 .it:hover .bar { animation-play-state: paused; }

// バーの animationend で消すので、ホバー一時停止も自動で効く
(function () {
  document.querySelectorAll('[data-bnto-toast-bar]').forEach(function (host) {
    if (host.dataset.bntoInit) return;
    host.dataset.bntoInit = '1';
    var box = host.querySelector('.box');
    host.querySelector('.tg').addEventListener('click', function () {
      var old = box.querySelector('.it');
      if (old) old.remove();
      var it = document.createElement('div');
      it.className = 'it';
      it.innerHTML = 'メッセージを送信しました<span class="bar"></span>';
      var bar = it.querySelector('.bar');
      bar.style.animationDuration = (parseInt(host.dataset.duration, 10) || 4500) + 'ms';
      bar.addEventListener('animationend', function () {
        it.classList.remove('show');
        setTimeout(function () { it.remove(); }, 350);
      });
      box.appendChild(it);
      void it.offsetWidth;
      it.classList.add('show');
    });
  });
})();

使い方のコツ

「あと何秒で消えるか」が見えるので安心感があります。一時停止はJSのタイマー管理ではなく animation-play-state: paused と animationend の組み合わせだけで実現しているのがポイントです。文章が長めの通知に向いています。

スタック式（連打OK）

<div class="bnto-toast4" data-bnto-toast-stack data-duration="3000">
  <button type="button" class="tg">表示する（連打OK）</button>
  <div class="box" aria-live="polite"></div>
</div>

.bnto-toast4 {
  --c1: hsl(26 90% 55%);
  position: relative; min-height: 200px; text-align: center;
}
.bnto-toast4 .tg {
  background: var(--c1); color: #fff;
  border: none; border-radius: 999px; padding: 9px 20px;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* flexの縦並びが「スタック」の正体。ページ全体なら position:fixed に */
.bnto-toast4 .box {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 7px; pointer-events: none;
}
.bnto-toast4 .it {
  display: flex; align-items: center; gap: 9px;
  background: #1D2A36; color: #fff;
  font-size: 12.5px; font-weight: 700;
  padding: 8px 14px; border-radius: 11px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s, transform .3s;
  pointer-events: auto;
}
.bnto-toast4 .it.show { opacity: 1; transform: none; }
.bnto-toast4 .no {
  min-width: 20px; height: 20px; border-radius: 7px;
  background: var(--c1); padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
}

// スタック式：連打すると下に積まれ、古い順に消える
(function () {
  document.querySelectorAll('[data-bnto-toast-stack]').forEach(function (host) {
    if (host.dataset.bntoInit) return;
    host.dataset.bntoInit = '1';
    var box = host.querySelector('.box');
    var n = 0;
    host.querySelector('.tg').addEventListener('click', function () {
      n++;
      var it = document.createElement('div');
      it.className = 'it';
      it.innerHTML = '<span class="no">' + n + '</span>通知が届きました';
      box.appendChild(it);
      // あふれたら最も古いものを即削除（最大4件）
      if (box.children.length > 4) box.firstElementChild.remove();
      void it.offsetWidth;
      it.classList.add('show');
      setTimeout(function () {
        it.classList.remove('show');
        setTimeout(function () { it.remove(); }, 350);
      }, parseInt(host.dataset.duration, 10) || 3000);
    });
  });
})();

使い方のコツ

イベントが連続して起きるアプリ的なUIに向いています。各トーストが自分のタイマーを持つので、発生した順に自然に消えていきます。同時表示の上限はJSの > 4 の数字を変えるだけです。積む方向を逆にしたいときは .box に flex-direction: column-reverse を指定してください。

閉じるボタン付き

<!-- 自動では消えず、×ボタンで閉じる -->
<div class="bnto-toast5" data-bnto-toast-close>
  <button type="button" class="tg">表示する</button>
  <div class="box" aria-live="polite"></div>
</div>

.bnto-toast5 {
  --c1: hsl(187 63% 42%);
  position: relative; min-height: 150px; text-align: center;
}
.bnto-toast5 .tg {
  background: var(--c1); color: #fff;
  border: none; border-radius: 999px; padding: 9px 20px;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* ページ全体に出すなら position:fixed に */
.bnto-toast5 .box {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none;
}
.bnto-toast5 .it {
  display: flex; align-items: center; gap: 10px;
  background: #1D2A36; color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 9px 10px 9px 16px; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s, transform .3s;
  pointer-events: auto;
}
.bnto-toast5 .it.show { opacity: 1; transform: none; }
.bnto-toast5 .x {
  width: 22px; height: 22px;
  border: none; border-radius: 7px;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 13px; font-weight: 900; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.bnto-toast5 .x:hover { background: var(--c1); }

// 自動消滅なし。ユーザーが×を押すまで表示し続ける
(function () {
  document.querySelectorAll('[data-bnto-toast-close]').forEach(function (host) {
    if (host.dataset.bntoInit) return;
    host.dataset.bntoInit = '1';
    var box = host.querySelector('.box');
    host.querySelector('.tg').addEventListener('click', function () {
      if (box.querySelector('.it')) return;  // このデモでは1つだけ
      var it = document.createElement('div');
      it.className = 'it';
      it.innerHTML = '手動で閉じるお知らせです' +
        '<button type="button" class="x" aria-label="閉じる">×</button>';
      it.querySelector('.x').addEventListener('click', function () {
        it.classList.remove('show');
        setTimeout(function () { it.remove(); }, 350);
      });
      box.appendChild(it);
      void it.offsetWidth;
      it.classList.add('show');
    });
  });
})();

使い方のコツ

メンテナンス告知や重要なお願いなど、読み逃されると困る通知は自動で消さないのが親切です。閉じるボタンには必ず aria-label="閉じる" を（「×」だけでは読み上げで意味が伝わりません）。自動消滅も併用したい場合はベーシック版の setTimeout を足してください。

アンドゥ付き（元に戻す）

<!-- data-duration＝取り消せる猶予時間（ミリ秒） -->
<div class="bnto-toast6" data-bnto-toast-undo data-duration="4000">
  <button type="button" class="tg">削除する</button>
  <div class="box" aria-live="polite"></div>
</div>

.bnto-toast6 {
  --c1: hsl(345 85% 66%);  /* 「元に戻す」の色 */
  position: relative; min-height: 150px; text-align: center;
}
.bnto-toast6 .tg {
  background: #1D2A36; color: #fff;
  border: none; border-radius: 999px; padding: 9px 20px;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* ページ全体に出すなら position:fixed に */
.bnto-toast6 .box {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none;
}
.bnto-toast6 .it {
  display: flex; align-items: center; gap: 12px;
  background: #1D2A36; color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 10px 16px; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s, transform .3s;
  pointer-events: auto;
}
.bnto-toast6 .it.show { opacity: 1; transform: none; }
.bnto-toast6 .undo {
  background: none; border: none; padding: 0;
  color: var(--c1); font: inherit;
  font-weight: 800; font-size: 12.5px;
  text-decoration: underline; cursor: pointer;
}

// アンドゥ付き：猶予時間内なら取り消せる
(function () {
  document.querySelectorAll('[data-bnto-toast-undo]').forEach(function (host) {
    if (host.dataset.bntoInit) return;
    host.dataset.bntoInit = '1';
    var box = host.querySelector('.box');
    function show(html, dur) {
      var it = document.createElement('div');
      it.className = 'it';
      it.innerHTML = html;
      box.appendChild(it);
      void it.offsetWidth;
      it.classList.add('show');
      it._t = setTimeout(function () { hide(it); }, dur);
      return it;
    }
    function hide(it) {
      clearTimeout(it._t);
      it.classList.remove('show');
      setTimeout(function () { it.remove(); }, 350);
    }
    host.querySelector('.tg').addEventListener('click', function () {
      var old = box.querySelector('.it');
      if (old) hide(old);
      // ここで実際の削除処理（見た目だけ先に消すのがコツ）
      var it = show('アイテムを削除しました' +
        '<button type="button" class="undo">元に戻す</button>',
        parseInt(host.dataset.duration, 10) || 4000);
      it.querySelector('.undo').addEventListener('click', function () {
        hide(it);
        // ここで実際の復元処理
        show('元に戻しました', 2000);
      });
    });
  });
})();

使い方のコツ

削除の確認ダイアログを出す代わりに「先に消して、少しの間だけ戻せるようにする」Gmail方式です。操作を止めないので体験が軽くなります。本当の削除はトーストが消えたタイミングで確定させるのが安全です（猶予は data-duration で調整）。

上部バー通知

<!-- 枠（点線）はデモ用の擬似画面。実ページでは外してOK -->
<div class="bnto-toast7" data-bnto-toast-top data-duration="3000">
  <button type="button" class="tg">表示する</button>
  <div class="box" aria-live="polite"></div>
</div>

.bnto-toast7 {
  --c1: hsl(150 58% 42%);  /* 成功色 */
  position: relative; min-height: 150px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;  /* バーの引っ込み先を隠す */
  border: 2px dashed #DFE9F1; border-radius: 12px;  /* デモ用の枠 */
}
.bnto-toast7 .tg {
  background: var(--c1); color: #fff;
  border: none; border-radius: 999px; padding: 9px 20px;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* 画面上部フルワイドに出すなら
   position:fixed; top:0; left:0; right:0; z-index:9999; に */
.bnto-toast7 .box {
  position: absolute; top: 0; left: 0; right: 0;
  pointer-events: none;
}
.bnto-toast7 .it {
  background: var(--c1); color: #fff;
  font-size: 12.5px; font-weight: 800; text-align: center;
  padding: 10px 12px;
  /* 上からスライドイン */
  transform: translateY(-110%);
  transition: transform .35s ease;
  pointer-events: auto;
}
.bnto-toast7 .it.show { transform: none; }

// 上部バー通知：画面上部からスライドイン
(function () {
  document.querySelectorAll('[data-bnto-toast-top]').forEach(function (host) {
    if (host.dataset.bntoInit) return;
    host.dataset.bntoInit = '1';
    var box = host.querySelector('.box');
    host.querySelector('.tg').addEventListener('click', function () {
      if (box.querySelector('.it')) return;
      var it = document.createElement('div');
      it.className = 'it';
      it.textContent = '設定を保存しました ✓';
      box.appendChild(it);
      void it.offsetWidth;
      it.classList.add('show');
      setTimeout(function () {
        it.classList.remove('show');
        setTimeout(function () { it.remove(); }, 400);
      }, parseInt(host.dataset.duration, 10) || 3000);
    });
  });
})();

使い方のコツ

フォーム送信後の完了メッセージなど、ページ全体に関わる結果を伝えるのに向いた形です。実ページではCSSコメントの通り .box を position:fixed; top:0; にして、固定ヘッダーがある場合は z-index をヘッダーより大きくしてください。

アクション付き（2ボタン）

<!-- 自動では消えず、ボタン操作で閉じる -->
<div class="bnto-toast8" data-bnto-toast-act>
  <button type="button" class="tg">表示する</button>
  <div class="box" aria-live="polite"></div>
</div>

.bnto-toast8 {
  --c1: hsl(230 60% 58%);
  position: relative; min-height: 170px; text-align: center;
}
.bnto-toast8 .tg {
  background: var(--c1); color: #fff;
  border: none; border-radius: 999px; padding: 9px 20px;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* ページ全体に出すなら position:fixed に */
.bnto-toast8 .box {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none;
}
.bnto-toast8 .it {
  display: flex; flex-direction: column; gap: 9px;
  width: 100%; max-width: 250px;
  background: #1D2A36; color: #fff; text-align: left;
  padding: 12px 14px; border-radius: 13px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s, transform .3s;
  pointer-events: auto;
}
.bnto-toast8 .it.show { opacity: 1; transform: none; }
.bnto-toast8 .tt { font-size: 13px; font-weight: 800; }
.bnto-toast8 .tx { font-size: 12px; color: rgba(255,255,255,.75); line-height: 1.6; }
.bnto-toast8 .acts { display: flex; gap: 8px; justify-content: flex-end; }
.bnto-toast8 .ac {
  border: none; border-radius: 8px; padding: 6px 12px;
  font: inherit; font-weight: 800; font-size: 12px; cursor: pointer;
}
.bnto-toast8 .ac.pri { background: var(--c1); color: #fff; }
.bnto-toast8 .ac.sub { background: rgba(255,255,255,.14); color: #fff; }

// アクション付き：本文＋「表示」「閉じる」の2ボタン
(function () {
  document.querySelectorAll('[data-bnto-toast-act]').forEach(function (host) {
    if (host.dataset.bntoInit) return;
    host.dataset.bntoInit = '1';
    var box = host.querySelector('.box');
    function hide(it) {
      it.classList.remove('show');
      setTimeout(function () { it.remove(); }, 350);
    }
    host.querySelector('.tg').addEventListener('click', function () {
      if (box.querySelector('.it')) return;
      var it = document.createElement('div');
      it.className = 'it';
      it.innerHTML =
        '<span class="tt">新着メッセージ</span>' +
        '<span class="tx">田中さんからメッセージが届いています。</span>' +
        '<span class="acts">' +
          '<button type="button" class="ac sub">閉じる</button>' +
          '<button type="button" class="ac pri">表示</button>' +
        '</span>';
      it.querySelector('.pri').addEventListener('click', function () {
        hide(it);
        // ここに「表示」を押したときの処理を書く
      });
      it.querySelector('.sub').addEventListener('click', function () { hide(it); });
      box.appendChild(it);
      void it.offsetWidth;
      it.classList.add('show');
    });
  });
})();

使い方のコツ

新着通知や「下書きを復元しますか？」など、次の行動を促したい場面に向いています。ボタンは主・副の2つまでにすると迷わせません。操作を伴う通知なので自動では消さず、放置対策が必要なら長め（8秒〜）の setTimeout を足してください。

Cookie同意バナー

<!-- 枠（点線）と「リセット」はデモ用。実ページでは .bn の部分だけでOK -->
<div class="bnto-toast9" data-bnto-toast-consent>
  <button type="button" class="rs">リセット</button>
  <div class="bn" role="region" aria-label="クッキーの利用について" hidden>
    <p class="tx">当サイトでは体験向上のためクッキーを使用します。<a href="#" class="lk">詳細を見る</a></p>
    <button type="button" class="ok">同意する</button>
  </div>
</div>
<!-- 「詳細を見る」の href はプライバシーポリシーページに変更してください -->

.bnto-toast9 {
  --c1: hsl(214 72% 50%);  /* 同意ボタンの色 */
  position: relative; min-height: 170px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;  /* バナーの引っ込み先を隠す */
  border: 2px dashed #DFE9F1; border-radius: 12px;  /* デモ用の枠 */
}
/* リセットボタン（デモ用） */
.bnto-toast9 .rs {
  background: none; border: 1.5px solid #DFE9F1;
  border-radius: 999px; padding: 6px 14px;
  font: inherit; font-weight: 800; font-size: 11.5px;
  color: #7A8CA0; cursor: pointer;
}
/* ページ全体（画面下部）に出すなら
   position:fixed; left:0; right:0; bottom:0; z-index:9999; に */
.bnto-toast9 .bn {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 10px;
  background: #1D2A36; color: #fff; text-align: left;
  padding: 12px 14px;
  /* 下からスライドイン */
  transform: translateY(110%);
  transition: transform .35s ease;
}
.bnto-toast9 .bn[hidden] { display: none; }
.bnto-toast9 .bn.show { transform: none; }
.bnto-toast9 .tx { margin: 0; flex: 1; font-size: 11.5px; line-height: 1.6; }
.bnto-toast9 .lk { color: #fff; font-weight: 800; }
.bnto-toast9 .ok {
  flex: none; background: var(--c1); color: #fff;
  border: none; border-radius: 8px; padding: 7px 14px;
  font: inherit; font-weight: 800; font-size: 12px; cursor: pointer;
}
/* 動きが苦手な人にはスライドなしで表示 */
@media (prefers-reduced-motion: reduce) { .bnto-toast9 .bn { transition: none; } }

// 「同意する」を localStorage に記憶し、以後は表示しない
(function () {
  var KEY = 'bnto-cookie-ok';  // 記憶用キー（サイト内で重複しない名前に）
  document.querySelectorAll('[data-bnto-toast-consent]').forEach(function (host) {
    if (host.dataset.bntoInit) return;
    host.dataset.bntoInit = '1';
    var bn = host.querySelector('.bn');
    function show() {
      bn.hidden = false;
      void bn.offsetWidth;  // 一度レイアウトさせてから .show
      bn.classList.add('show');
    }
    function hide() {
      bn.classList.remove('show');
      setTimeout(function () { bn.hidden = true; }, 400);
    }
    // 同意済みかどうか（プライベートモード等で使えない環境は毎回表示）
    var agreed = false;
    try { agreed = localStorage.getItem(KEY) === '1'; } catch (e) {}
    if (!agreed) show();
    bn.querySelector('.ok').addEventListener('click', function () {
      try { localStorage.setItem(KEY, '1'); } catch (e) {}
      hide();
    });
    // リセット（デモ用）：記憶を消して再表示。実ページでは削除OK
    var rs = host.querySelector('.rs');
    if (rs) rs.addEventListener('click', function () {
      try { localStorage.removeItem(KEY); } catch (e) {}
      show();
    });
  });
})();

使い方のコツ

同意の記憶は localStorage のキー bnto-cookie-ok に保存します（キー名は自由に変更OK）。実ページではCSSコメントの通り .bn を position:fixed; bottom:0; にし、「詳細を見る」のリンク先をプライバシーポリシーに差し替えてください。GDPRなどカテゴリ別の同意管理が法的に必要なサイトでは、専用の同意管理ツール（CMP）の利用をご検討ください。

オンライン/オフライン検知

<!-- ボタンはデモ用。実ページでは window の online/offline を自動検知するのでボタンは不要 -->
<div class="bnto-toast10" data-bnto-nettoast data-duration="3000">
  <div class="btns">
    <button type="button" class="tg off" data-net="offline">オフラインをシミュレート</button>
    <button type="button" class="tg on" data-net="online">オンラインをシミュレート</button>
  </div>
  <div class="box" aria-live="polite"></div>
</div>

.bnto-toast10 { position: relative; min-height: 170px; text-align: center; }
.bnto-toast10 .btns { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.bnto-toast10 .tg {
  border: none; border-radius: 999px; padding: 8px 14px;
  font: inherit; font-weight: 800; font-size: 12px;
  color: #fff; cursor: pointer;
}
/* 警告色＝オフライン、成功色＝オンライン復帰（意味が固定なのでシャッフル対象外） */
.bnto-toast10 .tg.off { background: #E8A020; }
.bnto-toast10 .tg.on { background: #2E9E5B; }
/* ページ全体に出すなら position:fixed に */
.bnto-toast10 .box {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none;
}
.bnto-toast10 .it {
  --tc: #2E9E5B;
  display: flex; align-items: center; gap: 9px;
  background: #fff; color: #1D2A36;
  border: 2px solid var(--tc);
  font-size: 12.5px; font-weight: 700;
  padding: 9px 14px; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s, transform .3s;
  pointer-events: auto;
}
.bnto-toast10 .it.show { opacity: 1; transform: none; }
.bnto-toast10 .it.off { --tc: #E8A020; }
.bnto-toast10 .ic {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tc); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
}

// window の online / offline イベントを自動検知して通知（ボタンはデモ用）
(function () {
  document.querySelectorAll('[data-bnto-nettoast]').forEach(function (host) {
    if (host.dataset.bntoInit) return;
    host.dataset.bntoInit = '1';
    var box = host.querySelector('.box');
    function show(state) {
      var old = box.querySelector('.it');
      if (old) old.remove();
      var it = document.createElement('div');
      it.className = 'it ' + (state === 'offline' ? 'off' : '');
      // 復帰は控えめ、オフラインは重要度が高いので即時に伝える
      if (state === 'offline') it.setAttribute('role', 'alert');
      it.innerHTML = state === 'offline'
        ? '<span class="ic">!</span>オフラインになりました'
        : '<span class="ic">✓</span>オンラインに戻りました';
      box.appendChild(it);
      void it.offsetWidth;
      it.classList.add('show');
      setTimeout(function () {
        it.classList.remove('show');
        setTimeout(function () { it.remove(); }, 350);
      }, parseInt(host.dataset.duration, 10) || 3000);
    }
    // 実際の通信状態を検知（このデモのメイン処理）
    window.addEventListener('offline', function () { show('offline'); });
    window.addEventListener('online', function () { show('online'); });
    // ここから下はデモ用の手動シミュレートボタン（実ページでは削除OK）
    host.querySelectorAll('[data-net]').forEach(function (btn) {
      btn.addEventListener('click', function () { show(btn.dataset.net); });
    });
  });
})();

使い方のコツ

実際の通信状態は window の online / offline イベントで自動検知しているので、ページに置くだけでボタン操作なしに動きます（ステージ内の2つのボタンは動作確認用のシミュレートです）。フォーム送信中にオフラインへ切り替わった場合の案内など、通信を伴う操作の前後に組み合わせると親切です。

リッチ通知風

<!-- data-duration＝表示時間（ミリ秒） -->
<div class="bnto-toast11" data-bnto-richtoast data-duration="3500">
  <button type="button" class="tg">表示する</button>
  <div class="box" aria-live="polite"></div>
</div>

.bnto-toast11 {
  --c1: hsl(210 70% 52%);  /* アイコンの背景色 */
  position: relative; min-height: 170px; text-align: center;
  overflow: hidden;  /* スライドイン元を隠す */
}
.bnto-toast11 .tg {
  background: var(--c1); color: #fff;
  border: none; border-radius: 999px; padding: 9px 20px;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* 右寄せで積む。ページ全体に出すなら position:fixed に */
.bnto-toast11 .box {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 8px; pointer-events: none;
}
.bnto-toast11 .it {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 250px;
  background: #fff; color: #1D2A36; text-align: left;
  padding: 11px 12px; border-radius: 13px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  /* 右からスライドイン */
  opacity: 0; transform: translateX(120%);
  transition: opacity .35s, transform .35s ease;
  pointer-events: auto;
}
.bnto-toast11 .it.show { opacity: 1; transform: none; }
.bnto-toast11 .ic {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c1); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.bnto-toast11 .bd { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bnto-toast11 .tt { font-size: 12.5px; font-weight: 800; }
.bnto-toast11 .tx { font-size: 11.5px; color: #5E7186; line-height: 1.5; font-weight: 600; }
/* 動きが苦手な人にはスライドなしで表示 */
@media (prefers-reduced-motion: reduce) {
  .bnto-toast11 .it { transform: none; transition: opacity .35s; }
}

// アイコン＋タイトル＋本文の2行構成。右からスライドインして自動消滅
(function () {
  var ICON = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 0 1-8.9 8.4 9.3 9.3 0 0 1-4-.9L3 20l1.1-4.9A8.3 8.3 0 0 1 3 11.5 8.4 8.4 0 0 1 11.9 3a8.5 8.5 0 0 1 9 8.5Z"/></svg>';
  document.querySelectorAll('[data-bnto-richtoast]').forEach(function (host) {
    if (host.dataset.bntoInit) return;
    host.dataset.bntoInit = '1';
    var box = host.querySelector('.box');
    host.querySelector('.tg').addEventListener('click', function () {
      var old = box.querySelector('.it');
      if (old) old.remove();
      var it = document.createElement('div');
      it.className = 'it';
      it.innerHTML =
        '<span class="ic">' + ICON + '</span>' +
        '<span class="bd">' +
          '<span class="tt">山田さんからメッセージ</span>' +
          '<span class="tx">明日の打ち合わせ、10時からでお願いします。</span>' +
        '</span>';
      box.appendChild(it);
      void it.offsetWidth;
      it.classList.add('show');
      setTimeout(function () {
        it.classList.remove('show');
        setTimeout(function () { it.remove(); }, 350);
      }, parseInt(host.dataset.duration, 10) || 3500);
    });
  });
})();

使い方のコツ

OSの通知センターのような見た目にすることで、メッセージ受信やコメント通知など「誰から・何が届いたか」を一目で伝えられます。アイコンはJSの ICON 変数を差し替えれば別の絵柄にできます。タイトルと本文は1行ずつに収まる長さを目安にしてください。

実績解除トースト

<!-- data-duration＝表示時間（ミリ秒） -->
<div class="bnto-toast12" data-bnto-achievetoast data-duration="4000">
  <button type="button" class="tg">表示する</button>
  <div class="box" aria-live="polite"></div>
</div>

.bnto-toast12 {
  --c1: hsl(43 90% 55%);  /* トロフィーの色 */
  position: relative; min-height: 170px; text-align: center;
}
.bnto-toast12 .tg {
  background: var(--c1); color: #fff;
  border: none; border-radius: 999px; padding: 9px 20px;
  font: inherit; font-weight: 800; cursor: pointer;
}
/* ページ全体に出すなら position:fixed に */
.bnto-toast12 .box {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none;
}
.bnto-toast12 .it {
  position: relative; overflow: hidden;  /* 紙吹雪をトースト内に収める */
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 250px;
  background: #1D2A36; color: #fff; text-align: left;
  padding: 12px 14px; border-radius: 13px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  /* フェード＋ふわっと拡大 */
  opacity: 0; transform: translateY(14px) scale(.92);
  transition: opacity .3s, transform .3s;
  pointer-events: auto;
}
.bnto-toast12 .it.show { opacity: 1; transform: none; }
.bnto-toast12 .ic {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c1); color: #1D2A36;
  display: inline-flex; align-items: center; justify-content: center;
}
.bnto-toast12 .bd { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bnto-toast12 .tt { font-size: 13px; font-weight: 800; }
.bnto-toast12 .tx { font-size: 11.5px; color: rgba(255,255,255,.75); font-weight: 600; }
/* 紙吹雪の破片：JSが色と位置と遅延を割り当てて降らせる */
.bnto-toast12 .cf {
  position: absolute; top: -10px;
  width: 6px; height: 9px; border-radius: 2px;
  opacity: 0; pointer-events: none;
}
.bnto-toast12 .it.show .cf { animation: bnto-t12cf 1.1s ease-in forwards; }
@keyframes bnto-t12cf {
  from { opacity: 1; transform: translateY(0) rotate(0); }
  to   { opacity: 0; transform: translateY(72px) rotate(320deg); }
}
/* 動きが苦手な人には紙吹雪なしで表示 */
@media (prefers-reduced-motion: reduce) { .bnto-toast12 .cf { animation: none; } }

// トロフィーSVG＋ミニ紙吹雪演出。破片はJSが動的に生成する
(function () {
  var TROPHY = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 21h8"/><path d="M12 17v4"/><path d="M7 4h10v5a5 5 0 0 1-10 0V4Z"/><path d="M17 5h2.5a1.5 1.5 0 0 1 1.5 1.5c0 2-1.5 3.5-4 3.8"/><path d="M7 5H4.5A1.5 1.5 0 0 0 3 6.5c0 2 1.5 3.5 4 3.8"/></svg>';
  var COLORS = ['#F2C94C', '#EB5757', '#2F80ED', '#27AE60', '#BB6BD9'];
  document.querySelectorAll('[data-bnto-achievetoast]').forEach(function (host) {
    if (host.dataset.bntoInit) return;
    host.dataset.bntoInit = '1';
    var box = host.querySelector('.box');
    host.querySelector('.tg').addEventListener('click', function () {
      var old = box.querySelector('.it');
      if (old) old.remove();
      var it = document.createElement('div');
      it.className = 'it';
      it.innerHTML =
        '<span class="ic">' + TROPHY + '</span>' +
        '<span class="bd">' +
          '<span class="tt">実績を解除しました</span>' +
          '<span class="tx">はじめての投稿を完了</span>' +
        '</span>';
      // 紙吹雪の破片を10個生成（色・横位置・遅延をランダムに）
      for (var i = 0; i < 10; i++) {
        var cf = document.createElement('span');
        cf.className = 'cf';
        cf.style.left = (6 + Math.random() * 88) + '%';
        cf.style.background = COLORS[i % COLORS.length];
        cf.style.animationDelay = (Math.random() * 0.25) + 's';
        it.appendChild(cf);
      }
      box.appendChild(it);
      void it.offsetWidth;
      it.classList.add('show');
      setTimeout(function () {
        it.classList.remove('show');
        setTimeout(function () { it.remove(); }, 350);
      }, parseInt(host.dataset.duration, 10) || 4000);
    });
  });
})();

使い方のコツ

初回投稿やバッジ獲得など、ユーザーを祝福したい場面に使うとゲーミフィケーションの効果が高まります。紙吹雪の数はJSの for ループの回数（既定10個）で調整でき、増やしすぎると賑やかになりすぎるので10〜16個程度がおすすめです。動きを抑えたい環境では自動的に紙吹雪なしで表示されます。

JSトースト通知実装の基礎知識

トースト通知は、保存・送信・削除などの操作結果を画面の隅に一時的に表示するフィードバックUIの定番です。「押したのに何も起きない…？」という不安をなくすだけで、フォームやボタン操作の体感は大きく変わります。パンが焼き上がって飛び出す様子（toast）が名前の由来で、作業を邪魔せず、少しすると自動で消えるのが最大の特徴です。このページのサンプルはすべて依存ライブラリなしのバニラJavaScriptで、トーストのDOMはJSが生成・削除するのでHTML側の準備は最小限です。

使い方は、HTML / CSS / JSの3タブをそれぞれ貼り付けるか、「全部コピー」ボタンでひとまとめになったコードを1回貼り付けるだけです。初期化は data-bnto-* 属性の自動検出式なので、同じページに何個置いても、うっかりコードを2回貼っても壊れません。デモはカード内に表示していますが、CSSの .box を position:fixed に変えるだけで画面全体の隅に固定表示できます。

自動で消える時間の目安は3〜5秒

短すぎると読み終わる前に消え、長すぎると邪魔になります。「保存しました」程度なら3秒前後、文章を読ませるなら5秒程度が目安です（サンプルは data-duration 属性のミリ秒で調整できます）。読む時間に個人差が出る長めの通知には、残り時間が見えるプログレスバー付きや、ホバーで一時停止する仕組みが有効です。エラーや重要なお知らせのように読み逃されると困るものは、自動で消さず閉じるボタン付きを選びましょう。

aria-liveでスクリーンリーダーにも伝える

トーストは視覚的な演出なので、そのままではスクリーンリーダーの利用者に伝わりません。サンプルでは表示先の要素に aria-live="polite" を指定し、追加されたメッセージが自動で読み上げられるようにしています。ポイントは、aria-live領域（.box）をあらかじめHTMLに置いておくことです。エラーのような緊急性の高い通知には role="alert"（= assertive）を付けて即時に伝えます。「元に戻す」「閉じる」などの操作は必ず button 要素で実装してください。

カード内デモからページ全体への切り替え

このページのデモは、コードの動きが見やすいようカード内（position:relativeの箱の中）にトーストを出しています。実際のサイトで画面の隅に出すには、CSSコメントの通り .box を position:fixed; right:16px; bottom:16px;（上部バーなら top:0; left:0; right:0;）に変えるだけです。固定ヘッダーやモーダルと重なる場合は z-index を十分大きく取り、スマホでは左右に 16px 程度の余白を残すと窮屈になりません。

「全部コピー」と「分けて貼る」の使い分け

「全部コピー」を使うと、HTML・CSS・JavaScriptがひとつの自己完結ブロックとしてコピーされるので、1回の貼り付けだけですぐ動きを確認できます。動作のお試しや、1ページ完結のLPに組み込むときはこの方法が手軽です。

一方、本番サイトへ本格的に組み込む場合は、CSSはスタイルシート（.cssファイル）へ、JavaScriptは</body>直前や共通の.jsファイルへ、HTMLは使いたい場所へと分けて貼るのが一般的です。スタイルとスクリプトを1か所に集約できるため、複数ページ・複数パーツで使い回すときの管理がしやすく、ブラウザのキャッシュも効きやすくなります。なお、同じパーツをページ内で何度も使う場合でも、CSSとJSを貼るのは1回だけで大丈夫です（初期化スクリプトが該当要素すべてに自動で効きます）。

よくある質問

コピーしたトースト通知はそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけで動きます。デモはカード内に表示していますが、画面の隅に出したい場合はCSSの .box を position:fixed に変えるだけです。

トーストの表示時間はどのくらいが適切ですか？

目安は3〜5秒です。短い確認メッセージなら3秒前後、文章を読ませたい場合は5秒程度にし、data-duration 属性（ミリ秒）で変更できます。じっくり読ませたい内容にはプログレスバー付きや閉じるボタン付きが向いています。

同じページに複数設置しても大丈夫ですか？

大丈夫です。初期化スクリプトは data 属性で対象を自動検出し、初期化済みの要素はスキップするため、複数設置してもコードを2回貼っても壊れません。

アクセシビリティには対応していますか？

トーストの表示先に aria-live="polite" を指定しているので、追加されたメッセージがスクリーンリーダーに読み上げられます。エラー通知には role="alert" を付けて即時に伝え、閉じる・元に戻すなどの操作は button 要素で実装しています。

このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「4色出し分け（状態別）」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

JSトースト通知実装 12選

ベーシック

4色出し分け（状態別）

プログレスバー付き

スタック式（連打OK）

閉じるボタン付き

アンドゥ付き（元に戻す）

上部バー通知

アクション付き（2ボタン）

Cookie同意バナー

オンライン/オフライン検知

リッチ通知風

実績解除トースト

JSトースト通知実装の基礎知識

自動で消える時間の目安は3〜5秒

aria-liveでスクリーンリーダーにも伝える

カード内デモからページ全体への切り替え

「全部コピー」と「分けて貼る」の使い分け

よくある質問

関連カテゴリ