画面上部のお知らせバーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

通知

画面上部のお知らせバーを作る方法

画面上部のお知らせバーを作る方法を紹介します。本記事では、HTML・CSS・JavaScriptを使用して、ページ上部にお知らせメッセージを表示する通知バーを実装します。キャンペーン情報や重要なお知らせ、新着情報などを利用者へ分かりやすく伝えたい場合に便利なUIです。

このサンプルコードでは、ページ上部にお知らせバーを表示し、閉じるボタンで非表示にできる仕組みを作成します。画面の最上部へ固定表示できるため、ページを開いた利用者へ重要な情報を目立たせたい場合にも活用できます。ライブラリやサーバー処理は不要で、HTML・CSS・JavaScriptのみで動作します。

上部お知らせバーは、セール情報、メンテナンス告知、障害情報、重要なお知らせ、新機能の案内などでよく利用されています。サイト全体へ共通のメッセージを表示したい場合にも便利なため、通知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="top-notice-bar_wrap">

    <!-- タイトル -->
    <div class="top-notice-bar_title">
      画面上部のお知らせバー
    </div>

    <!-- 説明文 -->
    <p class="top-notice-bar_text">
      ボタンをクリックすると、画面上部にお知らせバーが表示されます。
    </p>

    <!-- 表示ボタン -->
    <button
      type="button"
      class="top-notice-bar_button"
      data-notice-open=""
    >
      お知らせを表示
    </button>

  </div>

  <!-- お知らせバー本体 -->
  <div class="top-notice-bar_notice" data-notice-bar="">

    重要なお知らせを表示しています

    <!-- 閉じるボタン -->
    <button
      type="button"
      class="top-notice-bar_close"
      data-notice-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 を開いてください。「お知らせを表示」をクリックすると画面上部にお知らせバーが表示され、「×」ボタンを押すと非表示になります。

コメント