上下2段に分かれたヘッダーを作る方法【HTML/CSS・サンプルコード付き】

ヘッダー

上下2段に分かれたヘッダーを作る方法

上下2段に分かれたヘッダーを作る方法を紹介します。ヘッダーを上下2段に分けることで、サイト名や補助リンクと、メインのナビゲーションメニューを整理して配置できます。情報量が多いWebサイトでも見やすいレイアウトを作りやすく、企業サイトやサービスサイト、ECサイトなどでよく利用される構成です。

このサンプルでは、HTMLとCSSだけを使って、上段にサイト名と補助リンク、下段にナビゲーションメニューを配置したヘッダーを作成します。JavaScriptは使用していないため、シンプルな構成で導入でき、デザインのベースとしても利用しやすい内容になっています。

上段・下段の高さ、背景色、文字色、余白、メニュー項目などは自由に変更できます。ヘッダー内の情報を整理して表示したい場合や、一般的な1段構成よりも情報量を増やしたいWebサイトのレイアウトとして活用できます。

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

デモ

ログイン お問い合わせ
上段にロゴと補助リンク、下段にナビゲーションメニューを配置した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">

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

      <!-- 補助リンク -->
      <div class="two-row-header_links">
        <a href="#">ログイン</a>
        <a href="#">お問い合わせ</a>
      </div>

    </div>

    <!-- 下段 -->
    <div class="two-row-header_bottom">

      <!-- ナビメニュー -->
      <nav class="two-row-header_nav" aria-label="メニュー">
        <a href="#">ホーム</a>
        <a href="#">サービス</a>
        <a href="#">料金</a>
        <a href="#">ブログ</a>
        <a href="#">会社情報</a>
      </nav>

    </div>

  </header>

</body>
</html>

ファイル構成と設置方法

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

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

ファイルを配置したらindex.htmlをブラウザで開いて動作を確認します。上段のサイト名や補助リンク、下段のナビゲーションメニューはHTMLから自由に変更できます。上段・下段の高さ、背景色、文字色、余白、メニュー間隔などのデザインはstyle.cssから調整できます。

コメント