JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptでスナックバー／トーストを実装する方法【サンプルコード付き】

スナックバー（トースト）は、画面の端に一時的に表示される小さな通知メッセージのことです。「保存が完了しました」などの操作結果をユーザーへ伝える際によく使われ、数秒後に自動的に消えるのが特徴です。CSSとJavaScriptを組み合わせれば、特別なライブラリを使わずとも簡単に実装できます。

以下に、ボタンをクリックすると画面下部にスナックバーが表示され、数秒後にフェードアウトするサンプルコードを示します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .snackText {
        visibility: hidden;
        min-width: 250px;
        margin-left: -125px;
        background-color: rgb(110, 26, 106);
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        font-size: 17px;
    }
    .snackBtn {
        border: none;
        padding: 10px;
        font-size: 18px;
        background-color: rgb(92, 0, 128);
        color: white;
    }
    .snackText.show {
        visibility: visible;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }
    @keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }
        to {
            bottom: 30px;
            opacity: 1;
        }
    }
    @keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }
        to {
            bottom: 0;
            opacity: 0;
        }
    }
</style>
</head>
<body>
<h1>Snackbar / Toast デモ</h1>
<button class="snackBtn">スナックバーを表示</button>
<h2>上のボタンをクリックするとスナックバーが表示されます</h2>
<div class="snackText">ここにメッセージが入ります..</div>
<script>
    document.querySelector(".snackBtn").addEventListener("click", showSnackBar);
    function showSnackBar() {
        var x = document.querySelector(".snackText");
        x.className += " show";
        setTimeout(function() {
            x.className = x.className.replace("show", "");
        }, 3000);
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、まず次のような画面が表示されます。

CSSとJavaScriptでスナックバー／トーストを実装する方法【サンプルコード付き】

「スナックバーを表示」ボタンをクリックすると、画面下部からメッセージがフェードインで現れます。

CSSとJavaScriptでスナックバー／トーストを実装する方法【サンプルコード付き】

仕組みの解説

この実装のポイントは以下の通りです。

  • 非表示の初期状態：.snackText クラスに visibility: hidden; を指定し、通常時はスナックバーを隠しています。position: fixed; と bottom: 30px; により画面下部中央に固定配置されます。
  • 表示処理：ボタンのクリックイベントで JavaScript の showSnackBar() 関数が呼ばれ、要素に show クラスを追加します。
  • アニメーション：@keyframes で定義した fadein（0.5秒）と fadeout（2.5秒後から0.5秒間）により、下から滑らかに浮かび上がり、その後自然に消えていく動きを実現しています。
  • 自動的に消える処理：setTimeout() を使い3秒後に show クラスを削除することで、スナックバーを再び非表示に戻しています。

表示時間や位置、色は各プロパティの値を変更するだけで自由にカスタマイズできるため、Webアプリケーションの通知機能としてぜひ活用してみてください。

  1. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini

  2. CSSとJavaScriptで作る！レスポンシブスライドショーの実装方法を徹底解説

    CSSとJavaScriptを組み合わせることで、画像を切り替えて表示できるレスポンシブなスライドショーを簡単に実装できます。本記事では、「前へ・次へ」のナビゲーションボタンとドットインジケーター付きのスライドショーを、実際のコード例とともにわかりやすく解説します。 実装例：完全なコード 以下は、CSSとJavaScriptを使用してレスポンシブスライドショーを作成するサンプルコードです。そのままHTMLファイルに保存すれば、すぐに動作を確認できます。 <!DOCTYPE html> <html> <head> <meta name="v