ヘッダー上にお知らせバーを配置する方法【HTML/CSS・サンプルコード付き】

ヘッダー

ヘッダー上にお知らせバーを配置する方法

ヘッダー上にお知らせバーを配置する方法を紹介します。Webサイトの最上部に短いお知らせを表示することで、キャンペーン情報、更新案内、重要なお知らせなどをユーザーへ分かりやすく伝えられます。通常のヘッダーとは別に告知エリアを用意するため、ナビゲーションを邪魔せずに情報を目立たせることができます。

このサンプルでは、HTMLとCSSだけを使って、お知らせバーとヘッダーを上下に配置します。上部のお知らせバーには短い告知文を表示し、その下にサイト名とナビゲーションメニューを並べたヘッダーを作成します。JavaScriptは使用しないため、シンプルに導入できる構成です。

お知らせ文、背景色、文字色、余白、ヘッダーの高さ、メニュー項目などはCSSやHTMLから変更できます。期間限定のお知らせ、メンテナンス案内、新サービスの告知などをサイト上部で目立たせたい場合に活用しやすいレイアウトです。

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

デモ

お知らせ：新しいサービスを公開しました
ヘッダーの上にお知らせバーを配置したデモです。キャンペーン、更新情報、重要なお知らせなどを目立たせたい場合に使えます。

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

<!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="notice-bar-header_notice">
    お知らせ：新しいサービスを公開しました
  </div>

  <!-- ヘッダー -->
  <header class="notice-bar-header_header">

    <!-- サイト名 -->
    <a class="notice-bar-header_logo" href="#">
      Sample Site
    </a>

    <!-- ナビメニュー -->
    <nav class="notice-bar-header_nav" aria-label="メニュー">
      <a href="#">ホーム</a>
      <a href="#">サービス</a>
      <a href="#">料金</a>
      <a href="#">ブログ</a>
      <a href="#">お問い合わせ</a>
    </nav>

  </header>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイルとCSSファイルの2つで構成されています。HTMLファイルにお知らせバーとヘッダーの構造を記述し、CSSファイルでレイアウトや文字サイズ、背景色、余白などのデザインを設定します。JavaScriptは使用していないため、シンプルな構成で手軽に導入できます。 

sample/
├── index.html
└── style.css

ファイルを配置したらindex.htmlをブラウザで開いて動作を確認します。お知らせバーの文章はHTMLから自由に変更でき、キャンペーン情報やメンテナンス案内、更新情報などを表示できます。お知らせバーやヘッダーの背景色、文字色、高さ、余白、メニュー項目などのデザインはstyle.cssから調整できます。

コメント