閉じることができるバナー

CoddyのHTMLジャーニー「JavaScript in Action」セクションの一部 — レッスン 9/27。

閉じることができるバナー（dismissible banner）は、ページの上部（または下部）に表示され、ユーザーが閉じることができる通知またはメッセージバーです。これらは、クッキーポリシー、お知らせ、警告などの重要な情報を表示するために頻繁に使用されます。主な特徴は、ページをリフレッシュすることなくユーザーがバナーを非表示にできる閉じる（×）ボタンです。

まず、HTML構造を追加しましょう：

<div class="banner" id="banner">
  <p>This is an important announcement!</p>
  <button id="closeBanner">X</button>
</div>

次に、バナーをスタイリングするための基本的なCSSを追加しましょう：

.banner {
  background-color: #1e90ff;
  color: white;
  padding: 15px 20px;
  text-align: center;
  position: relative;

}

.banner button {
  position: absolute;
  right: 10px;
  top: 10px;
  border: none;

  cursor: pointer;
}

最後に、JavaScriptを追加してバナーを閉じられるようにします：

const banner = document.getElementById('banner');
const closeBtn = document.getElementById('closeBanner');

closeBtn.addEventListener('click', function() {
  banner.style.display = 'none';
});

閉じるボタンがクリックされると、バナーが消えます。

チャレンジ

簡単

ユーザーが閉じるボタンをクリックしたときに、バナーが消えるようにします。

閉じるボタンがクリックされたときに関数が実行されるように、イベントリスナーを追加します。
この関数内で、バナー要素の display プロパティを none に設定して非表示にします。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>Dismissible Banner Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Banner -->
  <div class="banner" id="banner">
    <p>Big News! Our new course is live. Enroll today and get 30% off!</p>
    <button id="closeBanner">&times;</button>
  </div>

  <!-- Page Content -->
  <header class="hero">
    <h1>Welcome to CodeLearn</h1>
    <p>Practical lessons to sharpen your web development skills 🚀</p>
  </header>

  <main class="content">
    <section>
      <h2>Learn by Doing</h2>
      <p>Each lesson comes with tasks and challenges so you can practice immediately.</p>
    </section>

    <section>
      <h2>Topics We Cover</h2>
      <ul>
        <li>HTML & CSS basics</li>
        <li>JavaScript essentials</li>
        <li>Frontend projects</li>
        <li>Interactive UI components</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 CodeLearn. All rights reserved.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>