お知らせバー付きヘッダーを作る方法
お知らせバー付きヘッダーを作る方法を紹介します。このサンプルでは、通常のヘッダーの上部に目立つお知らせバーを配置し、サイトを訪れた利用者へ重要な案内を表示します。お知らせバーとヘッダーを一体の構成にすることで、キャンペーンや営業時間の変更、新サービスの案内などを、メインナビゲーションとは分けて分かりやすく掲載できます。
お知らせバーには「新サービスを公開しました」のメッセージと「詳しく見る」のリンクを表示します。その下には「Sample Site」のサイト名と、「ホーム」「サービス」「会社概要」「お問い合わせ」のメインメニューを配置します。企業サイト、サービスサイト、ECサイトなどで、通常のナビゲーションを維持しながら利用者へ優先して伝えたい情報がある場合に利用しやすい構成です。
お知らせの文章、リンク文字、リンク先、サイト名、メニュー内容はHTMLから変更できます。CSSではお知らせバーの背景色、文字色、余白、文字サイズ、ヘッダーの最大横幅、メニューの間隔などを調整できます。画面幅768px以下ではヘッダー内を縦方向へ配置し、メニューを折り返して表示するため、スマートフォン・タブレット・PCで利用できます。JavaScriptを使用せず、HTMLとCSSだけで実装できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ヘッダー上部のお知らせバーと、その下に配置したサイト名・メインメニューの表示を確認してください。
コードをコピーして使おう！
<!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-header_notice" role="status">
<!-- お知らせ文章 -->
<p class="notice-header_notice-text">
新サービスを公開しました
</p>
<!-- お知らせリンク -->
<a class="notice-header_notice-link" href="#">
詳しく見る
</a>
</div>
<!-- ヘッダー -->
<header class="notice-header_header">
<div class="notice-header_inner">
<!-- サイト名 -->
<div class="notice-header_logo">
Sample Site
</div>
<!-- メインメニュー -->
<nav class="notice-header_nav" aria-label="メインメニュー">
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">会社概要</a>
<a href="#">お問い合わせ</a>
</nav>
</div>
</header>
<!-- ページ内容 -->
<main class="notice-header_content">
<!-- ページタイトル -->
<p class="notice-header_content-title">
お知らせバー付きヘッダー
</p>
<!-- 説明文 -->
<p class="notice-header_content-text">
ヘッダー上部に重要なお知らせを表示できます。
</p>
</main>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではヘッダー上部のお知らせバーと、その下に表示するサイト名・メインメニューを構成します。CSSではお知らせバーの色や余白、ヘッダーの横幅、メニューの配置、文字サイズ、境界線、影、画面幅に応じたレイアウト変更などを設定します。JavaScriptは使用しません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはお知らせバーとヘッダー全体を構成するファイルです。「新サービスを公開しました」のお知らせ文章、「詳しく見る」のリンク、サイト名、メインメニューの表示内容を変更できます。各a要素のhref属性を変更すると、お知らせやメニューから移動するページを設定できます。
style.cssはお知らせバーとヘッダーのデザインを設定するファイルです。お知らせバーの背景色、文字色、余白、文字サイズ、ヘッダーの最大横幅、メニュー同士の間隔、境界線、影などを変更できます。768px以下でヘッダー内を縦方向へ切り替え、メニューを折り返すレスポンシブ表示も設定しています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページ上部にお知らせバーが表示され、その下にサイト名とメインメニューを配置したヘッダーが表示されます。実際のサイトで使用する場合は、index.htmlのお知らせ文章やリンク文字を変更し、各a要素のhref属性へ移動先のURLを設定してください。
カスタマイズできる内容
index.htmlではお知らせ文章、「詳しく見る」の表示文字とリンク先、サイト名、メインメニューの項目名とリンク先を変更できます。新サービス、キャンペーン、営業時間の変更など、利用者へ優先して伝えたい内容に合わせてお知らせを書き換えられます。
style.cssではお知らせバーの背景色、文字色、余白、文字サイズ、ヘッダーの背景色、最大横幅、サイト名とメニューの間隔、メニューの文字色、境界線、影などを変更できます。
数値調整
style.css
padding:12px 20px;
お知らせバーの内側余白です。上下の12pxを大きくするとバーが高くなり、左右の20pxを大きくすると画面端との間隔が広がります。
gap:8px 16px;
お知らせ文章とリンクの間隔です。8pxは折り返した場合の縦方向、16pxは横方向の間隔です。値を大きくすると文章とリンクの間隔が広がります。
font-size:14px;
お知らせ文章とリンクの文字サイズです。値を大きくすると文字が大きくなり、小さくするとコンパクトになります。
padding:28px 40px;
ヘッダーの内側余白です。上下の28pxを大きくするとヘッダーが高くなり、左右の40pxを大きくすると画面端との間隔が広がります。
max-width:1200px;
ヘッダー内部の最大横幅です。値を大きくするとサイト名とメニューを配置できる範囲が広がり、小さくすると中央へまとまった表示になります。
gap:40px;
サイト名とメインメニューの間隔です。値を大きくすると両者の間隔が広がり、小さくすると近くなります。
gap:8px 24px;
メインメニューのリンク同士の間隔です。8pxは折り返した場合の縦方向、24pxは横方向の間隔です。値を大きくするとメニュー同士の間隔が広がります。
font-size:20px;
サイト名の文字サイズです。値を大きくするとサイト名が大きく表示され、小さくすると控えめになります。
padding:80px 24px;
ページ内容の内側余白です。上下の80pxを大きくするとヘッダーとページ内容の間隔が広がり、左右の24pxを大きくすると画面端との間隔が広がります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:1200pxにより、ヘッダーが画面幅に合わせて調整されます。また、@media (max-width:768px)ではお知らせバーを折り返せるようにし、サイト名とメインメニューを縦方向へ配置します。メインメニューにもflex-wrap:wrap;を指定しているため、横幅が足りない場合はリンクが次の行へ折り返され、スマートフォン・タブレット・PCで利用できます。
コメント