画面下部のお知らせバーを作る方法【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="bottom-notice-bar_wrap">

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

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

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

  </div>

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

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

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

コメント