閉じるボタン付き通知を作る方法【HTML/CSS/JavaScript・サンプルコード付き】

通知

閉じるボタン付き通知を作る方法

閉じるボタン付き通知を作る方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、通知メッセージ内に閉じるボタンを配置し、利用者が任意のタイミングで通知を閉じられるUIを作成します。自動で消える通知ではなく、重要なお知らせを確認してから閉じてもらいたい場合に便利です。

このサンプルコードでは、ボタンをクリックすると通知が表示され、通知内の閉じるボタンを押すと非表示になります。JavaScriptで表示・非表示を切り替えるだけのシンプルな構成なので、ライブラリやサーバー処理は不要です。既存サイトにも導入しやすく、通知UIの基本として使いやすい実装です。

閉じるボタン付き通知は、入力エラー、確認メッセージ、注意喚起、保存完了のお知らせ、重要なお知らせなどに活用できます。利用者が内容を確認してから閉じられるため、メッセージを見逃しにくくなります。通知を手動で閉じるUIを作りたい方や、実用的な通知デザインを学びたい方におすすめです。

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

デモ

閉じるボタン付き通知

通知を表示し、×ボタンで閉じることができます。

保存しました

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

<!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="close-button-notification_wrap">

    <!-- タイトル -->
    <div class="close-button-notification_title">
      閉じるボタン付き通知
    </div>

    <!-- 説明文 -->
    <p class="close-button-notification_text">
      通知を表示し、×ボタンで閉じることができます。
    </p>

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

  </div>

  <!-- 通知本体 -->
  <div
    class="close-button-notification_notice"
    data-notification=""
  >

    <!-- 通知メッセージ -->
    <div class="close-button-notification_message">
      保存しました
    </div>

    <!-- 通知を閉じるボタン -->
    <button
      type="button"
      class="close-button-notification_close"
      data-notification-close=""
    >
      ×
    </button>

  </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 を変更してください。サンプルコード内には右下・左下・右上・左上へ変更する例もコメントで記載しています。

コメント