トースト通知の実装方法｜Toast Notification CSS/JS Guide

2026年4月21日

トースト通知デザイン見本

ユーザーのアクション結果を画面隅に一時表示するトースト通知UIの実装デモ。コピーしてすぐに使えるHTML・CSS・JSのコードを掲載しています。

コピペで使えるソースコード

HTML

<div id="toast-area" aria-live="polite"></div>

<button class="toast-btn" data-msg="保存しました" data-kind="success">保存</button>
<button class="toast-btn" data-msg="エラーが発生しました" data-kind="error">削除</button>
<button class="toast-btn" data-msg="注意が必要です" data-kind="warn">警告</button>
<button class="toast-btn" data-msg="新機能を追加しました" data-kind="info">情報</button>

CSS

#toast-area {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
}

.tn-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    min-width: 200px;
    max-width: 320px;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tn-toast.tn-show {
    opacity: 1;
    transform: translateX(0);
}

.tn-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.tn-success { background: #22c55e; }
.tn-error   { background: #ef4444; }
.tn-warn    { background: #f97316; }
.tn-info    { background: #3b82f6; }

(function () {
    var area = document['getElementById']('toast-area');
    if (!area) return;

    var icons = { success: '✓', error: '✕', warn: '!', info: 'i' };

    function showToast(msg, kind) {
        var toast = document.createElement('div');
        toast.className = 'tn-toast tn-' + (kind || 'info');

        var icon = document.createElement('span');
        icon.className = 'tn-icon';
        icon.textContent = icons[kind] || 'i';
        toast.appendChild(icon);

        var txt = document.createElement('span');
        txt.textContent = msg;
        toast.appendChild(txt);

        area.appendChild(toast);

        setTimeout(function () {
            toast.className = 'tn-toast tn-' + (kind || 'info') + ' tn-show';
        }, 10);

        setTimeout(function () {
            toast.className = 'tn-toast tn-' + (kind || 'info');
            setTimeout(function () {
                if (toast.parentNode) {
                    toast.parentNode.removeChild(toast);
                }
            }, 350);
        }, 3000);
    }

    var btns = document['querySelectorAll']('.toast-btn');
    for (var n = 0; n < btns.length; n++) {
        (function (btn) {
            btn.addEventListener('click', function () {
                showToast(
                    btn.getAttribute('data-msg'),
                    btn.getAttribute('data-kind')
                );
            });
        })(btns[n]);
    }
})();

実装のポイント

position: fixed でコンテナを画面に固定する
トーストをまとめる親要素 #toast-area に position: fixed; top: 20px; right: 20px; を設定します。ページをスクロールしても常に画面右上に表示され、個々のトーストをこのコンテナに追加するだけで縦に積み重なります。
opacity と transform でスライドインを実現する
トーストの初期状態は opacity: 0; transform: translateX(30px)（右にオフセット）。表示時に tn-show クラスを付与して opacity: 1; transform: translateX(0) に変化させます。transition を設定しているので、クラスの切り替えだけで滑らかなアニメーションが自動適用されます。
setTimeout でクラスを付け外しして表示・非表示を制御する
要素をDOMに追加した直後（10ms後）に表示クラスを付与し、一定時間後（3000ms）に取り外します。クラスを取り外すとフェードアウトが始まり、アニメーション完了後（350ms後）に parentNode.removeChild() でDOMから削除します。
document.createElement で動的に要素を生成する
HTMLにトーストのひな形を書いておく必要はありません。createElement → textContent → appendChild の3ステップで要素を組み立て、コンテナに追加します。innerHTML を使わないことでXSSリスクも回避できます。
種別ごとにクラスで背景色を切り替える
.tn-success / .tn-error / .tn-warn / .tn-info のように種別クラスをCSSで定義し、JSでは toast.className = 'tn-toast tn-' + kind と動的に付与するだけで対応します。新しい種別の追加もCSSに1行足すだけで完了します。
aria-live=”polite” でアクセシビリティに対応する
トーストコンテナに aria-live="polite" を付与すると、スクリーンリーダーがトーストの内容を自動的に読み上げます。視覚に頼らないユーザーにも通知内容を届けることができます。

ポップアップとの違い：
モーダルやポップアップはユーザーが明示的に閉じる必要のある「ブロッキング型」のUIです。トースト通知はユーザー操作を遮らず自動で消える「非ブロッキング型」で、「保存しました」「コピーしました」などアクション結果の即時フィードバックに最適です。重要な確認が必要な場合はダイアログを、一時的な通知にはトーストを使い分けてください。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

トースト通知の実装方法｜Toast Notification CSS/JS Guide

トースト通知 デザイン見本

コピペで使えるソースコード

実装のポイント

トースト通知デザイン見本