通知を複数並べて表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

通知

通知を複数並べて表示する方法

通知を複数並べて表示する方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、通知を複数同時に表示するサンプルを作成します。通常の通知は新しい通知が表示されると前の通知が消えてしまうことがありますが、複数表示に対応することで、利用者が過去の通知内容も確認しやすくなります。

このサンプルコードでは、ボタンをクリックするたびに新しい通知を追加し、通知エリアへ順番に並べて表示します。通知同士が重ならないようにレイアウトしているため、保存完了や送信完了、コピー完了などのメッセージを連続して表示したい場合にも便利です。JavaScriptで通知要素を動的に生成するため、実用的な通知UIの作り方も学べます。

通知を複数表示する仕組みは、管理画面、チャットアプリ、ファイル管理画面、各種Webサービスなどで広く利用されています。1件ずつ通知を置き換える方法よりも情報を確認しやすくなるため、通知機能を強化したい方や、より実践的なJavaScriptサンプルを探している方にもおすすめです。

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

デモ

通知を複数並べて表示

別々の操作を行うと、それぞれの通知が順番に追加されます。

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

<!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="stacked-notifications_wrap">

    <!-- タイトル -->
    <div class="stacked-notifications_title">
      通知を複数表示
    </div>

    <!-- 説明文 -->
    <p class="stacked-notifications_text">
      別々の操作を行うと、それぞれの通知が順番に追加されます。
    </p>

    <!-- 操作ボタン群 -->
    <div class="stacked-notifications_buttons">

      <!-- 保存通知 -->
      <button
        type="button"
        class="stacked-notifications_button"
        data-notification-text="保存しました"
      >
        保存
      </button>

      <!-- コピー通知 -->
      <button
        type="button"
        class="stacked-notifications_button"
        data-notification-text="コピーしました"
      >
        コピー
      </button>

      <!-- 送信通知 -->
      <button
        type="button"
        class="stacked-notifications_button"
        data-notification-text="送信しました"
      >
        送信
      </button>

    </div>

  </div>

  <!-- 通知表示エリア -->
  <div
    class="stacked-notifications_area"
    data-notification-area=""
  ></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 を開いてください。「保存」「コピー」「送信」ボタンを押すと、それぞれの通知が画面右下へ追加されます。通知の表示位置を変更したい場合は、CSS内の right、left、top、bottom を変更してください。

コメント