追従バナーにバツボタンを追加して消えるようにする方法

Posted on by

ウェブサイトにおいて、追従バナー（固定バナー）は重要な情報や広告を表示するためによく使用されます。
ただし、ユーザー体験を向上させるために、バナーを手動で閉じるオプションを提供することも重要です。
本記事では、バツボタンを押すと追従バナーが消えるシンプルな実装方法を紹介します。

追従バナーとは？

追従バナーとは、ユーザーがスクロールしても常に画面の一部に表示され続けるバナーのことです。
通常、画面の上部または下部に配置され、特定の情報を強調表示したり、広告として機能します。
今回は、画面下部に固定された追従バナーを作成し、バツボタンを押すと消える機能を追加します。

HTMLの構造

まず、バナーとバツボタンの基本的なHTML構造を作成します。
<div>タグでバナーを囲み、その中に<button>要素としてバツボタンを配置します。

<div id="banner" class="follow-banner">
  <p>ここにバナーの内容が入ります。</p>
  <button id="close-btn" class="close-btn">×</button>
</div>

このコードでは、<div id="banner"> がバナー全体を表し、
その中に表示される内容として<p>タグでテキストを追加しています。
また、バツボタンは<button>タグで実装しています。

CSSでバナーをスタイリング

次に、CSSを使用してバナーとバツボタンをスタイリングします。
バナーは画面下部に固定し、全幅に広げて表示します。

.follow-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}

.follow-banner クラスはバナー全体のスタイルを定義しています。
position: fixed を使って画面の下に固定し、背景色やテキストの色、パディングなどを設定しています。

.close-btn クラスはバツボタンのスタイルを定義しており、
position: absolute を使ってバナーの右上にボタンを配置しています。
cursor: pointer でボタンにホバースタイルを適用し、クリック可能であることを視覚的に示しています。

JavaScriptでバツボタンの機能を追加

バツボタンをクリックするとバナーが消えるように、JavaScriptを追加します。
バツボタンにclickイベントリスナーを設定し、
クリックされたらバナーのdisplayプロパティをnoneに変更して非表示にします。

document.getElementById('close-btn').addEventListener('click', function() {
  document.getElementById('banner').style.display = 'none';
});

このスクリプトは以下のように動作します。

document.getElementById('close-btn') でバツボタンを取得し、clickイベントをリッスンします。

バツボタンがクリックされると、バナーのdisplayスタイルをnoneに変更して非表示にします。

完成したコード

ここまで紹介した内容をまとめると、以下のようにシンプルな追従バナーが実装できます。

HTML

<div id="banner" class="follow-banner">
  <p>ここにバナーの内容が入ります。</p>
  <button id="close-btn" class="close-btn">×</button>
</div>

CSS

.follow-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}

JavaScript

document.getElementById('close-btn').addEventListener('click', function() {
  document.getElementById('banner').style.display = 'none';
});

まとめ

今回紹介した方法では、シンプルな追従バナーを作成し、
ユーザーがクリックしてバナーを閉じることができるバツボタンを追加しました。
このような機能は、ユーザー体験を向上させるために非常に有用です。
バナーのデザインや挙動は、用途に合わせてカスタマイズすることができますので、
ぜひ活用してみてください。

バナーを閉じた後に一定時間で再表示するなど、さらなる機能を追加することも可能です。
今後、より複雑なバナー機能を追加したい場合にも、
この記事を参考にしてカスタマイズを試してみてください。