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

パンくずリスト付きヘッダーを作る方法

パンくずリスト付きヘッダーを作る方法を紹介します。このサンプルでは、サイト名とメインメニューを配置したヘッダーの下にパンくずリストを表示します。「ホーム＞サービス＞ Web制作」のように現在のページまでの階層を順番に表示することで、利用者がサイト内のどの位置にいるのかを確認しやすいヘッダーを作成できます。

ヘッダーには「Sample Site」のサイト名と、「ホーム」「サービス」「会社概要」「お問い合わせ」のメインメニューを配置します。その直下にパンくずリストを設け、上位ページにはリンクを設定し、現在のページはリンクを付けずに表示します。企業サイトやサービスサイト、ECサイトなど、複数の階層を持つWebサイトで現在位置を分かりやすく案内したい場合に利用できます。

サイト名、メニュー項目、パンくずリストの表示内容とリンク先はHTMLから変更できます。CSSではヘッダーの最大横幅、余白、メニューの間隔、パンくずリストの背景色、文字サイズ、区切り記号の色などを調整できます。画面幅768px以下ではヘッダー内を縦方向へ配置し、メニューとパンくずリストを折り返して表示するため、スマートフォン・タブレット・PCで利用できます。JavaScriptを使用せず、HTMLとCSSだけで実装できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

ヘッダー下に「ホーム＞サービス＞ 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="breadcrumb-header_header">

    <div class="breadcrumb-header_inner">

      <!-- サイト名 -->
      <div class="breadcrumb-header_logo">
        Sample Site
      </div>

      <!-- メインメニュー -->
      <nav class="breadcrumb-header_nav" aria-label="メインメニュー">
        <a href="#">ホーム</a>
        <a href="#">サービス</a>
        <a href="#">会社概要</a>
        <a href="#">お問い合わせ</a>
      </nav>

    </div>

  </header>

  <!-- パンくずリスト -->
  <nav class="breadcrumb-header_breadcrumb" aria-label="パンくずリスト">

    <ol class="breadcrumb-header_breadcrumb-list">

      <!-- ホーム -->
      <li class="breadcrumb-header_breadcrumb-item">
        <a href="#">ホーム</a>
      </li>

      <!-- 上位ページ -->
      <li class="breadcrumb-header_breadcrumb-item">
        <a href="#">サービス</a>
      </li>

      <!-- 現在のページ -->
      <li class="breadcrumb-header_breadcrumb-item">
        <span class="breadcrumb-header_current" aria-current="page">
          Web制作
        </span>
      </li>

    </ol>

  </nav>

  <!-- ページ内容 -->
  <main class="breadcrumb-header_content">

    <!-- ページタイトル -->
    <p class="breadcrumb-header_content-title">
      パンくずリスト付きヘッダー
    </p>

    <!-- 説明文 -->
    <p class="breadcrumb-header_content-text">
      ヘッダーの下に現在のページまでの階層を表示します。
    </p>

  </main>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  background:#f3f4f6; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* ページ全体で使用するフォント */
}

/* ヘッダー */
.breadcrumb-header_header{
  width:100%; /* 画面幅いっぱいに表示 */
  padding:28px 40px; /* 上下28px・左右40px。値を大きくするとヘッダーの余白が広がる */
  border-bottom:1px solid #e5e7eb; /* ヘッダー下の1pxの境界線 */
  background:#ffffff; /* ヘッダーの背景色 */
  box-shadow:0 4px 18px rgba(15,23,42,.05); /* 4pxは影の縦位置、18pxはぼかし。値を大きくすると影が広がる */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* ヘッダー内部 */
.breadcrumb-header_inner{
  display:flex; /* サイト名とメニューを横並びにする */
  align-items:center; /* 上下中央へ揃える */
  justify-content:space-between; /* サイト名を左、メニューを右へ配置 */
  gap:40px; /* サイト名とメニューの間隔。値を大きくすると間隔が広がる */
  width:100%; /* 利用できる横幅いっぱいに表示 */
  max-width:1200px; /* 最大横幅。値を大きくするとヘッダー内容が横に広がる */
  margin:0 auto; /* 左右中央へ配置 */
}

/* サイト名 */
.breadcrumb-header_logo{
  flex:0 0 auto; /* サイト名の横幅を内容に合わせる */
  color:#111827; /* サイト名の文字色 */
  font-size:20px; /* 文字サイズ。値を大きくするとサイト名が大きくなる */
  font-weight:700; /* サイト名を太字にする */
  line-height:1.4; /* 行間。値を大きくすると行間が広がる */
}

/* メインメニュー */
.breadcrumb-header_nav{
  display:flex; /* メニューを横並びにする */
  align-items:center; /* 上下中央へ揃える */
  gap:8px 24px; /* 縦8px・横24pxの間隔。値を大きくするとリンク同士の間隔が広がる */
  margin-left:auto; /* メニューを右側へ配置 */
}

/* メインメニューの通常時・訪問済み */
.breadcrumb-header_nav a:link,
.breadcrumb-header_nav a:visited{
  color:#374151; /* メニューの文字色 */
  background:transparent; /* 背景を透明にする */
  font-size:14px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:600; /* メニューの文字の太さ */
  line-height:1.5; /* 行間。値を大きくすると行間が広がる */
  text-decoration:none; /* 下線を非表示にする */
}

/* メインメニューの操作時 */
.breadcrumb-header_nav a:hover,
.breadcrumb-header_nav a:focus,
.breadcrumb-header_nav a:active{
  color:#2563eb; /* 操作時の文字色 */
  background:transparent; /* 操作時も背景を透明にする */
  text-decoration:none; /* 操作時も下線を非表示にする */
}

/* パンくずリスト全体 */
.breadcrumb-header_breadcrumb{
  width:100%; /* 画面幅いっぱいに表示 */
  padding:14px 40px; /* 上下14px・左右40px。値を大きくするとパンくずリストの余白が広がる */
  background:#ffffff; /* パンくずリストの背景色 */
  border-bottom:1px solid #e5e7eb; /* 下側の1pxの境界線 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* パンくずリスト */
.breadcrumb-header_breadcrumb-list{
  display:flex; /* パンくず項目を横並びにする */
  align-items:center; /* 上下中央へ揃える */
  flex-wrap:wrap; /* 横幅が足りない場合は次の行へ折り返す */
  gap:8px; /* 項目同士の間隔。値を大きくすると間隔が広がる */
  max-width:1200px; /* 最大横幅。値を大きくすると表示範囲が横に広がる */
  margin:0 auto; /* 左右中央へ配置 */
  padding:0; /* ol要素の標準内側余白を削除 */
  list-style:none; /* 番号を非表示にする */
}

/* パンくず項目 */
.breadcrumb-header_breadcrumb-item{
  display:flex; /* リンクと区切り記号を横並びにする */
  align-items:center; /* 上下中央へ揃える */
  gap:8px; /* リンクと区切り記号の間隔。値を大きくすると間隔が広がる */
  color:#6b7280; /* パンくず項目の基本文字色 */
  font-size:13px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.5; /* 行間。値を大きくすると行間が広がる */
}

/* 最後以外の項目へ区切り記号を追加 */
.breadcrumb-header_breadcrumb-item:not(:last-child)::after{
  content:"›"; /* パンくずリストの区切り記号 */
  color:#9ca3af; /* 区切り記号の色 */
}

/* パンくずリンクの通常時・訪問済み */
.breadcrumb-header_breadcrumb-item a:link,
.breadcrumb-header_breadcrumb-item a:visited{
  color:#4b5563; /* パンくずリンクの文字色 */
  background:transparent; /* 背景を透明にする */
  text-decoration:none; /* 下線を非表示にする */
}

/* パンくずリンクの操作時 */
.breadcrumb-header_breadcrumb-item a:hover,
.breadcrumb-header_breadcrumb-item a:focus,
.breadcrumb-header_breadcrumb-item a:active{
  color:#2563eb; /* 操作時の文字色 */
  background:transparent; /* 操作時も背景を透明にする */
  text-decoration:none; /* 操作時も下線を非表示にする */
}

/* 現在のページ */
.breadcrumb-header_current{
  color:#2563eb; /* 現在のページを青色で表示 */
  font-weight:600; /* 現在のページを少し太く表示 */
}

/* ページ内容 */
.breadcrumb-header_content{
  padding:80px 24px; /* 上下80px・左右24px。値を大きくするとページ内容の余白が広がる */
  text-align:center; /* ページ内容を中央揃えにする */
}

/* ページタイトル */
.breadcrumb-header_content-title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  color:#111827; /* ページタイトルの文字色 */
  font-size:28px; /* 文字サイズ。値を大きくするとタイトルが大きくなる */
  font-weight:700; /* ページタイトルを太字にする */
  line-height:1.4; /* 行間。値を大きくすると行間が広がる */
}

/* 説明文 */
.breadcrumb-header_content-text{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#6b7280; /* 説明文の文字色 */
  font-size:15px; /* 文字サイズ。値を大きくすると文字が大きくなる */
  line-height:1.8; /* 行間。値を大きくすると行間が広がる */
}

/* 画面幅768px以下 */
@media (max-width:768px){

  /* ヘッダー */
  .breadcrumb-header_header{
    padding:24px 20px; /* 上下24px・左右20pxへ変更して画面端との余白を小さくする */
  }

  /* ヘッダー内部 */
  .breadcrumb-header_inner{
    flex-direction:column; /* サイト名とメニューを縦方向へ配置 */
    align-items:flex-start; /* 左揃えにする */
    gap:24px; /* サイト名とメニューの間隔。値を大きくすると間隔が広がる */
  }

  /* メインメニュー */
  .breadcrumb-header_nav{
    flex-wrap:wrap; /* 横幅が足りない場合は次の行へ折り返す */
    gap:12px 20px; /* 縦12px・横20pxの間隔。値を大きくするとリンク同士の間隔が広がる */
    margin-left:0; /* 右寄せを解除 */
  }

  /* パンくずリスト全体 */
  .breadcrumb-header_breadcrumb{
    padding:14px 20px; /* 上下14px・左右20pxへ変更して画面端との余白を小さくする */
  }

}

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLではサイト名とメインメニューを持つヘッダー、その下に現在のページまでの階層を示すパンくずリストを作成します。CSSではヘッダーとパンくずリストの横幅、余白、文字サイズ、色、境界線、メニューの配置、画面幅に応じた折り返しなどを設定します。JavaScriptは使用しません。

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

各ファイルの役割
index.htmlはヘッダーとパンくずリストを構成するファイルです。「Sample Site」のサイト名、メインメニュー、「ホーム」「サービス」「Web制作」のパンくず項目を変更できます。上位ページはa要素のhref属性へリンク先を設定し、現在のページはaria-current="page"を付けた要素として表示します。

style.cssはヘッダーとパンくずリストのデザインを設定するファイルです。ヘッダーの余白や最大横幅、メニューの間隔、パンくずリストの背景色、文字サイズ、項目間隔、区切り記号の色、現在のページの文字色などを変更できます。768px以下でヘッダー内の配置を変更し、メニューとパンくず項目を折り返すレスポンシブ表示も設定しています。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。2つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ヘッダーの下に「ホーム＞サービス＞ Web制作」の順でパンくずリストが表示されます。実際のサイトで使用する場合は、index.htmlのパンくず項目をページの階層に合わせて変更し、上位ページのa要素のhref属性へそれぞれの移動先を設定してください。

カスタマイズできる内容
index.htmlではサイト名、メインメニューの項目名とリンク先、パンくずリストの階層、各項目の表示文字とリンク先を変更できます。表示するページに合わせてパンくず項目を追加・削除し、最後の項目を現在のページとして表示できます。

style.cssではヘッダーの背景色、余白、最大横幅、メニューの文字サイズや間隔、パンくずリストの背景色、上下左右の余白、項目間隔、文字サイズ、区切り記号の色、現在のページの文字色などを変更できます。

数値調整
style.css
padding:28px 40px;
ヘッダーの内側余白です。上下の28pxを大きくするとヘッダーが高くなり、左右の40pxを大きくすると画面端との間隔が広がります。

max-width:1200px;
ヘッダー内部とパンくずリストの最大横幅です。値を大きくすると内容を配置できる範囲が横に広がり、小さくすると中央へまとまった表示になります。

gap:40px;
サイト名とメインメニューの間隔です。値を大きくすると両者の間隔が広がり、小さくすると近くなります。

gap:8px 24px;
メインメニューのリンク同士の間隔です。8pxは折り返した場合の縦方向、24pxは横方向の間隔です。値を大きくするとメニュー同士の間隔が広がります。

padding:14px 40px;
パンくずリスト全体の内側余白です。上下の14pxを大きくすると表示部分が高くなり、左右の40pxを大きくすると画面端との間隔が広がります。

gap:8px;
パンくず項目と区切り記号の間隔です。値を大きくすると各要素の間隔が広がり、小さくすると近くなります。

font-size:13px;
パンくずリストの文字サイズです。値を大きくすると文字が大きくなり、小さくするとコンパクトになります。

padding:80px 24px;
ページ内容の内側余白です。上下の80pxを大きくするとパンくずリストとページ内容の間隔が広がり、左右の24pxを大きくすると画面端との間隔が広がります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:1200pxにより、ヘッダーとパンくずリストが画面幅に合わせて調整されます。また、@media (max-width:768px)ではサイト名とメインメニューを縦方向へ配置し、メインメニューとパンくずリストには折り返しを設定しています。左右の余白も20pxへ縮小するため、スマートフォン・タブレット・PCで利用できます。