ヘッダー下にパンくずリストを表示する方法【HTML/CSS・サンプルコード付き】

ヘッダー

ヘッダー下にパンくずリストを表示する方法

ヘッダー下にパンくずリストを表示する方法を紹介します。パンくずリストは、現在のページがサイト内のどこにあるのかを分かりやすく示すためのナビゲーションです。ヘッダーのすぐ下に配置することで、ユーザーが現在位置を把握しやすくなり、上位ページへ戻る導線も作れます。

このサンプルでは、HTMLとCSSだけを使って、通常のヘッダーの下にパンくずリストを配置します。サイト名とナビゲーションメニューを持つヘッダーの下へ、ホーム、カテゴリー、現在のページという順番でパンくずリストを表示する構成です。JavaScriptは使用しないため、静的なHTMLページにも導入しやすいサンプルです。

パンくずリストの項目名、区切り記号、文字色、背景色、余白、ヘッダーのメニュー項目などは自由に変更できます。ブログ、コーポレートサイト、サービスサイト、記事ページなど、ページ階層を分かりやすく見せたいWebサイトで活用できます。

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

デモ

ヘッダーの下にパンくずリストを配置したデモです。現在のページ位置を分かりやすく表示できます。

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

<!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>

  <!-- ヘッダー -->
  <header class="header-breadcrumb_header">

    <!-- サイト名 -->
    <a class="header-breadcrumb_logo" href="#">
      Sample Site
    </a>

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

  </header>

  <!-- パンくずリスト -->
  <nav class="header-breadcrumb_trail" aria-label="パンくずリスト">
    <a href="#">ホーム</a>
    <span>›</span>
    <a href="#">ブログ</a>
    <span>›</span>
    <span class="header-breadcrumb_current">記事タイトル</span>
  </nav>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイルとCSSファイルの2つで構成されています。HTMLファイルにヘッダーとパンくずリストの構造を記述し、CSSファイルでレイアウトや文字サイズ、背景色、余白などのデザインを設定します。JavaScriptは使用していないため、静的なWebページにもそのまま導入できます。 

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

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

コメント