スライドしながら表示される通知を作る方法【HTML/CSS/JavaScript・サンプルコード付き】

通知

スライドしながら表示される通知を作る方法

スライドしながら表示される通知を作る方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、通知メッセージが画面外からスライドして表示されるUIを作成します。保存完了や送信完了などの通知を、動きのある見せ方で分かりやすく伝えたい場合に便利です。

このサンプルコードでは、ボタンをクリックすると通知が表示され、CSSの transform と transition を使ってスライドアニメーションを付けます。JavaScriptでは表示用クラスを付け外しするだけなので、シンプルな構成で導入できます。

スライド通知は、トースト通知、完了メッセージ、エラー表示、操作結果の案内などに活用できます。静的に表示される通知よりも目に入りやすく、利用者へ操作結果を自然に伝えられます。通知UIにアニメーションを追加したい方や、CSSアニメーションの基本を学びたい方にもおすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

スライド通知

ボタンをクリックすると、通知が右側からスライドして表示されます。

保存しました

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>スライドしながら表示される通知を作る方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- デモエリア -->
  <div class="slide-in-notification_wrap">

    <!-- タイトル -->
    <div class="slide-in-notification_title">
      スライド通知
    </div>

    <!-- 説明文 -->
    <p class="slide-in-notification_text">
      ボタンをクリックすると、通知が右側からスライドして表示されます。
    </p>

    <!-- 通知表示ボタン -->
    <button
      type="button"
      class="slide-in-notification_button"
      data-slide-notice-open=""
    >
      通知を表示
    </button>

  </div>

  <!-- 通知本体 -->
  <div
    class="slide-in-notification_notice"
    data-slide-notice=""
  >
    保存しました
  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTML・CSS・JavaScriptを別ファイルで管理します。HTMLに通知表示ボタンと通知本体を配置し、CSSでスライドアニメーションを設定し、JavaScriptで通知の表示・非表示を切り替えます。 

sample/
├── index.html
├── style.css
└── script.js

3つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。「通知を表示」をクリックすると、通知が右側からスライドしながら表示され、3秒後に自動で非表示になります。スライド方向を変更したい場合は、CSS内の transform の値を調整してください。

コメント