2段構成のヘッダーを作る方法
2段構成のヘッダーを作る方法を紹介します。このサンプルでは、ヘッダーを上段と下段に分け、上段へサイト名と補助メニュー、下段へメインナビゲーションを配置します。1つの段へすべてのリンクを並べるのではなく、役割ごとに表示位置を分けることで、サイト内の情報を整理しながら分かりやすく案内できるヘッダーを作成できます。
上段には「Sample Site」のサイト名と「お知らせ」「会社情報」の補助メニューを配置し、下段には「ホーム」「サービス」「製品情報」「お問い合わせ」のメインメニューを横並びで表示します。企業サイトやサービスサイトなど、主要ページへのリンクとは別に補助的なリンクもヘッダーへ配置したい場合に利用しやすい構成です。JavaScriptを使用せず、HTMLとCSSだけで実装できます。
サイト名、上段の補助メニュー、下段のメインメニュー、各リンク先はHTMLから変更できます。CSSではヘッダーの最大横幅、上下左右の余白、メニュー同士の間隔、文字サイズ、背景色、境界線などを調整できます。画面幅768px以下では上段の内容を縦方向へ並べ、各メニューを折り返して表示するレスポンシブ対応も行っているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
2段構成のヘッダー
上段と下段で役割の異なるメニューを分けて表示します。
上段にはサイト名と補助メニュー、下段にはメインメニューを配置しています。2つの段に分けたヘッダーのレイアウトを確認してください。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>2段構成のヘッダー</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 2段構成のヘッダー -->
<header class="two-row-header_header">
<!-- 上段 -->
<div class="two-row-header_top">
<div class="two-row-header_top-inner">
<!-- サイト名 -->
<div class="two-row-header_logo">
Sample Site
</div>
<!-- 補助メニュー -->
<nav class="two-row-header_sub-nav" aria-label="補助メニュー">
<a href="#">お知らせ</a>
<a href="#">会社情報</a>
</nav>
</div>
</div>
<!-- 下段 -->
<div class="two-row-header_bottom">
<!-- メインメニュー -->
<nav class="two-row-header_main-nav" aria-label="メインメニュー">
<a href="#">ホーム</a>
<a href="#">サービス</a>
<a href="#">製品情報</a>
<a href="#">お問い合わせ</a>
</nav>
</div>
</header>
<!-- ページ内容 -->
<main class="two-row-header_content">
<!-- ページタイトル -->
<p class="two-row-header_content-title">
2段構成のヘッダー
</p>
<!-- 説明文 -->
<p class="two-row-header_content-text">
上段と下段で役割の異なるメニューを分けて表示します。
</p>
</main>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではヘッダーを上段と下段に分け、上段へサイト名と補助メニュー、下段へメインメニューを配置します。CSSでは2段の配置、横幅、余白、文字サイズ、背景色、境界線、影、画面幅に応じた折り返しなどを設定します。JavaScriptは使用しません。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは2段構成のヘッダーとページ内容を構成するファイルです。上段の「Sample Site」のサイト名と「お知らせ」「会社情報」の補助メニュー、下段の「ホーム」「サービス」「製品情報」「お問い合わせ」のメインメニューを変更できます。各a要素のhref属性を変更すると、実際のページへのリンクを設定できます。
style.cssはヘッダー全体のデザインと2段のレイアウトを設定するファイルです。上段と下段の余白、最大横幅、メニュー同士の間隔、文字サイズ、背景色、境界線、影などを変更できます。768px以下で上段を縦方向へ切り替え、補助メニューとメインメニューを折り返すレスポンシブ表示も設定しています。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。上段にはサイト名と補助メニュー、下段にはメインメニューが表示されます。実際のサイトで使用する場合は、index.htmlの各リンクのhref属性を移動先のURLへ変更してください。
カスタマイズできる内容
index.htmlではサイト名、補助メニュー、メインメニューの表示内容と各リンク先を変更できます。上段には案内や会社情報などの補助的なリンク、下段にはサイト内の主要ページへのリンクを配置するなど、サイト構成に合わせて内容を編集できます。
style.cssではヘッダー上段・下段の余白、最大横幅、メニュー同士の間隔、サイト名やリンクの文字サイズ、文字色、背景色、上段と下段を区切る境界線、ヘッダー下の影などを変更できます。
数値調整
style.css
padding:22px 40px;
ヘッダー上段の内側余白です。上下の22pxを大きくすると上段が高くなり、左右の40pxを大きくすると画面端との間隔が広がります。
max-width:1200px;
上段とメインメニューの最大横幅です。値を大きくすると内容を配置できる範囲が横に広がり、小さくすると中央へまとまった表示になります。
gap:32px;
上段のサイト名と補助メニューの間隔です。値を大きくすると離れ、小さくすると近くなります。
font-size:20px;
サイト名の文字サイズです。値を大きくするとサイト名が大きく表示され、小さくすると控えめになります。
gap:8px 24px;
補助メニューのリンク同士の間隔です。8pxは折り返した場合の縦方向、24pxは横方向の間隔です。値を大きくするとリンク同士の間隔が広がります。
padding:16px 40px;
ヘッダー下段の内側余白です。上下の16pxを大きくすると下段が高くなり、左右の40pxを大きくすると画面端との間隔が広がります。
gap:12px 32px;
メインメニューのリンク同士の間隔です。12pxは折り返した場合の縦方向、32pxは横方向の間隔です。値を大きくするとメニュー同士の間隔が広がります。
font-size:14px;
メインメニューの文字サイズです。値を大きくするとリンク文字が大きくなり、小さくするとコンパクトになります。
padding:80px 24px;
ページ内容の内側余白です。上下の80pxを大きくするとヘッダーとページ内容の間隔が広がり、左右の24pxを大きくすると画面端との間隔が広がります。
font-size:28px;
ページタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:1200pxにより、ヘッダー内部が画面幅に合わせて縮小されます。また、@media (max-width:768px)では上段のサイト名と補助メニューを縦方向へ配置し、補助メニューとメインメニューにflex-wrap:wrap;を指定して、横幅が足りない場合にリンクを次の行へ折り返します。スマートフォン・タブレット・PCで利用できます。
コメント