MENU
  1. ホーム
  2. プログラミング言語
  3. HTML
  4. HTMLでパンくずリストを簡単に作る方法

HTMLでパンくずリストを簡単に作る方法

HTML
当ページのリンクには広告が含まれています。
HTMLでパンくずリストを簡単に作る方法
Yume

HTMLでパンくずリストを作ってみたいなぁ！

こんなお悩みにお答えします。

パンくずリストは、ウェブサイトのナビゲーションを簡単にし、ユーザーが今どこにいるのかを理解しやすくする便利なツールです。また、検索エンジン最適化（SEO）にも効果があり、ページの順位向上が期待できます。本記事では、初心者でもすぐに使えるHTMLコードのコピペ例を紹介し、さらにデザインをカスタマイズする方法も丁寧に解説します。

本記事の監修者：Zetto
Zetto

現役ITエンジニア
Java Gold保有
TypeScript(Vue.js)
Java(SpringBoot)
Programming Dream編集長


目次

パンくずリストって何？どんな効果があるの？

パンくずリストの基本的な役割

パンくずリストとは、ウェブページに訪れたユーザーが現在の位置を理解し、スムーズに移動できるようにするためのリンクの集まりです。サイト内でユーザーがどのページにいるかをわかりやすく表示するため、ナビゲーションがしやすくなります。このパンくずリストは、いくつかの階層に分けて表示され、ユーザーが前の階層に戻りたいときにワンクリックで簡単に戻ることができるように設計されています。

たとえば、次のような形で表示されるのが一般的です。

ホーム > 商品一覧 > スマホアクセサリー > ケース

これにより、ユーザーはどのカテゴリーにいるか、どのページに来ているかを理解しやすくなります。

パンくずリストは、特に大規模なウェブサイトや多くの商品を扱うECサイトにとって、ユーザーの利便性を高める非常に重要な機能です。ページの階層が深くなるほど、その位置を明示することはユーザーにとって安心感を提供し、離脱率を減らすことにもつながります。

パンくずリストの種類

パンくずリストにはいくつかの種類があります。

  • 位置ベースパンくずリスト：ユーザーが現在いるページの位置を階層的に示します。特にサイトの構造が複雑な場合、このタイプのパンくずリストは訪問者にとって非常に役立ちます。
  • 属性ベースパンくずリスト：ユーザーが選んだ属性（例：商品フィルター）の情報を示します。たとえば、「色: 青」や「サイズ: L」といった情報を表示することで、現在の検索条件がすぐに分かるようにするものです。
  • 履歴ベースパンくずリスト：ユーザーが訪問したページの履歴を示します。これはユーザーの行動を反映するもので、再度同じページに戻る際に便利です。

パンくずリストの具体例

以下は、それぞれのタイプのパンくずリストの具体例です。

  • 位置ベースのパンくずリスト：
<nav aria-label="パンくずリスト">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/category">カテゴリ</a></li>
      <li><a href="/category/item">商品</a></li>
    </ul>
  </nav>
  • 属性ベースのパンくずリスト：
<nav aria-label="パンくずリスト">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/products">商品一覧</a></li>
      <li>サイズ: L</li>
      <li>色: 青</li>
    </ul>
  </nav>
  • 履歴ベースのパンくずリスト：
<nav aria-label="パンくずリスト">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/search-results">検索結果</a></li>
      <li><a href="/product-details">商品詳細</a></li>
    </ul>
  </nav>

SEOにおけるパンくずリストの効果

パンくずリストはSEO（検索エンジン最適化）にも良い影響を与えます。検索エンジンはパンくずリストを使ってウェブサイトの構造を理解しやすくなり、それによりページの評価が上がることがあります。また、ユーザーがサイト内をスムーズに移動できることで、サイト内の滞在時間が延びることも期待できます。滞在時間が長くなることで、Googleの評価も上がりやすくなり、検索結果で上位に表示される可能性が高まります。

さらに、検索結果の表示にも効果的です。Googleはパンくずリストの情報を取り入れて、検索結果に表示することがあります。これにより、ユーザーにとってはどのページがどの階層にあるかが一目でわかり、クリックしてもらいやすくなります。

ユーザー体験の向上

パンくずリストは、ユーザーが迷子にならずにサイトを利用することをサポートします。特に、商品ページが多いECサイトなどでは、ユーザーが求めている情報にスムーズにアクセスできるようになり、サイト全体のユーザー体験が向上します。

また、パンくずリストを使用することで、サイトの直帰率を下げることが期待できます。ユーザーはパンくずリストを使って簡単に前の階層に戻ることができるため、「戻る」ボタンを使わずにより多くのページを閲覧する傾向にあります。このことは、サイトのページビュー数や滞在時間の増加につながり、結果としてビジネスの成功にも寄与します。

HTMLでパンくずリストを作る前に準備するもの

HTMLとCSSの基礎知識について

パンくずリストを作成する前に、HTMLとCSSの基本的な知識を持っていると役立ちます。まず、HTMLはウェブページの構造を作るための言語であり、パンくずリストのリンクの一つひとつを記述するのに使います。一方、CSSはデザインや見た目を調整するための言語で、パンくずリストをより見やすく、ユーザーにとって魅力的にするために使います。

HTMLでは、ulタグやliタグを使ってリストを作成し、各ページをリンクとして並べていきます。CSSを使えば、文字の色や背景色、リンクの間のスペースなどを簡単に調整できます。これにより、パンくずリストが単に機能するだけでなく、見た目もきれいに仕上がります。

HTMLとCSSの基本的な用語

  • ulタグ：リスト全体を作るためのタグ。リスト全体を囲み、ナビゲーションのグループとして表示するのに使用します。
  • liタグ：各リストアイテムを表すタグ。リストの一つひとつの項目を示し、パンくずリスト内でページ間のリンクとして使われます。
  • aタグ：リンクを設定するためのタグ。ユーザーがクリックすることで他のページに移動するための要素です。
  • navタグ：ナビゲーションリンクを表すタグ。パンくずリスト全体を意味付けるために使用されます。

CSSは、パンくずリストがデザインとして視覚的に魅力的になるように調整するために不可欠です。特に、色や配置、テキストのスタイルを調整することで、ユーザーにとってよりわかりやすくなります。

パンくずリストに使うツール

パンくずリストを作る際には、テキストエディタが必要です。テキストエディタとは、プログラムを書くためのツールで、無料で利用できるものも多くあります。たとえば、次のようなテキストエディタがあります。

  • VSCode（ビジュアルスタジオコード）：多くのプラグインが使えて、初心者にもわかりやすいインターフェースです。コードの補完機能やデバッグツールが豊富で、効率よく開発を進めることができます。
  • Sublime Text（サブライムテキスト）：動作が軽く、シンプルな画面が特徴です。起動が速く、プログラムのコーディングに集中しやすい環境を提供します。
  • Atom：オープンソースであり、カスタマイズ性が高く、多くのテーマやプラグインを使って自分好みに設定できます。

これらのエディタを使えば、HTMLやCSSを記述しやすくなります。また、ブラウザの「検証ツール」を使うことで、自分が作成したパンくずリストの見た目や動きを確認することができます。このツールを使えば、実際のウェブページでどう表示されるかをリアルタイムで確認しながら調整できます。

実際にパンくずリストをHTMLで作成しよう

シンプルなパンくずリストのHTMLコード（コピペOK）

では、実際にパンくずリストを作成してみましょう。まずはシンプルなパンくずリストをHTMLで書いてみます。以下のコードをコピペして使うことで、簡単にパンくずリストを設置できます。

<nav aria-label="パンくずリスト">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/products">商品一覧</a></li>
    <li><a href="/products/smartphone">スマホアクセサリー</a></li>
    <li>ケース</li>
  </ul>
</nav>

このコードは、ulタグでリスト全体を囲み、各リストアイテムをliタグで表示しています。また、aタグを使ってリンクを設置しているので、ユーザーがクリックすることで他のページに移動できます。

パンくずリストに役立つ属性

  • aria-label属性：スクリーンリーダーを使うユーザーにもパンくずリストの役割を伝えるために使います。
  • href属性：リンク先を指定します。
  • target属性：リンク先を新しいタブで開く場合などに使用します（例：target="_blank"）。

パンくずリストを使用することで、ユーザーはウェブサイト内で今自分がどこにいるのかを簡単に理解することができます。また、リストに「現在のページ」の表示を含めることにより、視覚的なヒントを与え、ユーザーの混乱を防ぎます。

CSSを使ってパンくずリストをスタイリングする

次に、パンくずリストを見やすくするために、CSSを使ってデザインを整えてみましょう。以下のようなCSSを追加すると、パンくずリストがより美しく、使いやすくなります。

nav ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

nav ul li {
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #007BFF;
}

nav ul li a:hover {
  text-decoration: underline;
}

このCSSコードでは、ulタグのリストマーカー（黒丸）を消し、リストアイテムを横に並べるためにdisplay: flex;を使っています。また、リンクには青色を指定し、マウスを乗せたときに下線が引かれるようにしています。こうすることで、ユーザーにとって直感的にわかりやすく、クリックしやすいデザインになります。

さらに、カスタマイズ性を高めるために、CSSを使ってレスポンシブデザインを適用することも可能です。例えば、画面のサイズに応じてリストの表示を変えることで、スマートフォンからアクセスするユーザーにも見やすくデザインできます。

@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
  }

  nav ul li {
    margin-bottom: 10px;
  }
}

このメディアクエリを使うことで、画面幅が600px以下の場合にはリストを縦に並べるようにします。これにより、モバイルデバイスでの閲覧も快適になります。

よく使われるパンくずリストのデザインパターン

パンくずリストには、いくつかのデザインパターンがあります。ここでは代表的なデザインをいくつか紹介します。

矢印型のデザインの作り方

矢印で階層を示すパンくずリストは、ユーザーがどの階層にいるかを視覚的にわかりやすくするデザインです。以下のCSSを追加することで、矢印型のデザインにすることができます。

nav ul li {
  margin-right: 10px;
}

nav ul li::after {
  content: ' > ';
  margin-left: 10px;
}

nav ul li:last-child::after {
  content: '';
}

このコードでは、各リストアイテムの後に「>」記号を表示することで、階層を示す矢印をつけています。最後のリストアイテムには矢印を表示しないように工夫しています。

矢印型のデザインは、ユーザーが階層を視覚的に追いやすく、ナビゲーションをよりわかりやすくする効果があります。

ドット型のデザインの作り方

ドットで区切るデザインもよく使われます。以下のCSSを追加することで、ドット型にすることができます。

nav ul li::after {
  content: ' • ';
  margin-left: 10px;
}

nav ul li:last-child::after {
  content: '';
}

このように、ドットを使って階層を区切ることで、よりシンプルで洗練されたデザインに仕上げることができます。

ドット型デザインは、シンプルでありながら視覚的に柔らかな印象を与えるため、様々なサイトに適応可能です。

ボックス型パンくずリストの作り方

ボックス型のパンくずリストは、各項目をボックスで囲んで、区別しやすくするスタイルです。以下のCSSを使うことで、ボックス型にスタイリングすることができます。

nav ul li {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #ddd;
  margin-right: 5px;
}

このCSSでは、各リストアイテムをボックスで囲むことで、視覚的に区別しやすくなり、ユーザーが見やすいデザインにしています。

ボックス型デザインは、特にサイトのコンテンツを区別しやすくしたい場合に効果的です。色を使ってボックスの背景を変えることで、重要な項目を強調することも可能です。

パンくずリストをさらに便利にするポイント

リッチスニペット対応のパンくずリスト

パンくずリストをさらに活用するために、リッチスニペット対応にすることが重要です。リッチスニペットとは、検索エンジンの検索結果にサイトの情報をわかりやすく表示する機能のことです。これにより、パンくずリストが検索結果に表示され、ユーザーにとって魅力的な情報となります。

リッチスニペット対応にするには、構造化データを追加します。以下は、JSON-LDを使ってパンくずリストをリッチスニペット対応にするためのコードです。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "ホーム",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "商品一覧",
      "item": "https://example.com/products"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "スマホアクセサリー",
      "item": "https://example.com/products/smartphone"
    }
  ]
}
</script>

このコードを追加することで、Googleなどの検索エンジンがパンくずリストを正しく認識し、検索結果に表示することができます。

リッチスニペットの確認方法

Googleの「構造化データテストツール」を使うことで、リッチスニペットの設定が正しいかを確認できます。ツールを使って、エラーがないかをチェックし、必要に応じて修正を行いましょう。

リッチスニペットの導入により、検索結果での表示が強化され、クリック率の向上が期待できます。これにより、より多くの訪問者をサイトに引き込むことが可能です。

JavaScriptを使った動的なパンくずリストの作成

パンくずリストを手動で作成するのは面倒だと感じるかもしれません。その場合、JavaScriptを使って自動的に現在のページの情報を取得し、パンくずリストを生成することができます。例えば、次のようなJavaScriptを使うことで動的にパンくずリストを作成することができます。

window.addEventListener('DOMContentLoaded', function() {
  const breadcrumb = document.querySelector('#breadcrumb');
  let path = window.location.pathname.split('/').filter(Boolean);
  let html = '<nav aria-label="パンくずリスト"><ul>';
  let fullPath = '';

  path.forEach((segment, index) => {
    fullPath += '/' + segment;
    if (index < path.length - 1) {
      html += `<li><a href="${fullPath}">${segment}</a></li>`;
    } else {
      html += `<li>${segment}</li>`;
    }
  });

  html += '</ul></nav>';
  breadcrumb.innerHTML = html;
});

このスクリプトを使えば、ページのURLを自動的に読み取ってパンくずリストを生成することができるので、手動でHTMLを修正する手間が省けます。

JavaScriptを使うことで、ユーザーがアクセスするページに応じたパンくずリストを動的に生成し、常に最新のナビゲーションを提供することができます。特に頻繁に構造が変更されるサイトにとっては、メンテナンスの手間を減らすために非常に便利な方法です。

JavaScriptとCSSでカスタムデザインのパンくずリスト

JavaScriptとCSSを組み合わせて、パンくずリストをカスタムデザインにすることも可能です。たとえば、ユーザーが現在いるページの背景色を変えることで、視覚的に強調することができます。

nav ul li.current {
  background-color: #f0f0f0;
  font-weight: bold;
}

JavaScriptを使って、現在のページにcurrentクラスを追加することもできます。

window.addEventListener('DOMContentLoaded', function() {
  const breadcrumb = document.querySelector('#breadcrumb');
  let path = window.location.pathname.split('/').filter(Boolean);
  let html = '<nav aria-label="パンくずリスト"><ul>';
  let fullPath = '';

  path.forEach((segment, index) => {
    fullPath += '/' + segment;
    if (index < path.length - 1) {
      html += `<li><a href="${fullPath}">${segment}</a></li>`;
    } else {
      html += `<li class="current">${segment}</li>`;
    }
  });

  html += '</ul></nav>';
  breadcrumb.innerHTML = html;
});

このようにすることで、ユーザーは現在いるページが強調されるため、ナビゲーションがよりわかりやすくなります。

よくあるエラーとその対処法

パンくずリストが正しく表示されないときの対処法

パンくずリストが正しく表示されない原因は、HTMLタグの書き間違いであることが多いです。たとえば、ulタグやliタグが適切に閉じられていない場合、ブラウザで正常に表示されないことがあります。また、CSSがうまく適用されていない場合も、スタイルが崩れることがあります。このような場合、まずはタグが正しく閉じられているか、CSSに誤りがないかを確認しましょう。

よくあるHTMLの間違い

  • タグの閉じ忘れ：<ul>タグや<li>タグが閉じられていない。
  • 間違った属性の使用：href属性に誤ったリンクを設定している。
  • タグのネストの誤り：ulの中に不適切なタグを使用している場合、意図通りに表示されないことがあります。

これらのエラーは、ブラウザで「検証ツール」を使用することで簡単に見つけることができます。エラーメッセージをよく確認し、正しいタグ構造になるように修正しましょう。

構造化データにエラーが出た場合の解決法

リッチスニペット対応のパンくずリストを作成する際、構造化データにエラーが出ることがあります。Googleの「構造化データテストツール」を使うことで、どの部分にエラーがあるかを確認できます。たとえば、itemのURLが間違っている、positionの番号が重複しているなど、細かい誤りが原因でエラーが出ることがあります。ツールを使ってエラーメッセージを確認し、適切に修正しましょう。

エラーを防ぐポイント

  • URLの正確さ：構造化データのitemで指定するURLが正しいことを確認する。
  • 一貫した番号付け：positionの番号が重複しないようにする。
  • 名前の一致：name属性で指定した名前が、実際のリンクテキストと一致しているか確認する。

これらのポイントを確認することで、構造化データのエラーを減らし、リッチスニペットが正しく表示されるようにすることが可能です。

まとめ：パンくずリストでサイトの使いやすさを向上しよう

作成したパンくずリストを活用する方法

パンくずリストは、サイトの内部リンクを強化し、ユーザーがページを移動しやすくするために非常に効果的です。また、パンくずリストを設置することで、ユーザーはより多くのページを閲覧し、サイト内での滞在時間が増える傾向があります。これにより、検索エンジンからの評価も向上します。

内部リンク強化のメリット

  • ユーザーの移動を助ける：パンくずリストにより、簡単にページ間を移動可能。
  • SEOの向上：内部リンクが増えることで、検索エンジンに対する評価が上がる。
  • ユーザーのエンゲージメント向上：より多くのページを閲覧することで、ユーザーが求めている情報を見つけやすくなり、満足度が上がる。

今すぐパンくずリストを導入してみよう

パンくずリストは、初心者でも簡単に作成できますし、コピペして使うことで簡単に導入することができます。この記事で紹介したHTMLコードやCSSコードをそのまま利用すれば、すぐにでもパンくずリストをサイトに追加することができます。まずは試してみて、自分のサイトに合った形に少しずつカスタマイズしていくことで、サイトの使いやすさを向上させていきましょう。

HTML
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

目次