【HTML入門】パンくずリストとは？作り方とCSSデザイン例5選

2022 8/23

2022年8月23日

想定読者

パンくずリストを設置したい方『パンくずリストって何？パンくずリストっていらなくない。HTMLやCSSなどを使ってパンくずリストを作成したい』

本記事では、上記の方に向けて『【HTML入門】パンくずリストの作り方とCSSデザイン』について詳しく解説していきます。

本記事の内容

パンくずリストとは
パンくずリストはいらないのか
【HTML入門】パンくずリストの書き方
CSSを使ったパンくずリストの作り方

この記事を執筆している私はフリーランスエンジニアとして1年ほど活動しています。

3分程度で読める内容になっていますので、ぜひ最後までご覧ください。
早速、本文に入っていきます。

記事の内容

パンくずリストとは

パンくずリストとは、Webサイトの構造を分かりやすく視覚的にしたものです。

一言で表すと、Webサイトの地図です。

本記事では下記のようにパンくずリストが表示されています。

このように、本記事はHOME>Programing>の中にあることを視覚的に分かりやすくなっています。

パンくずリストのメリットがいまいち分からない方のために、2つほどメリットを紹介させていただきます。

ユーザビリティ向上
SEOに効果的な結果

ユーザービリティ向上

パンくずリストを設置することで、読者は自分がどの記事にいるのかを視覚的に認知することができます。

パンくずリストを設置するだけでプラスの効果が生まれたので、私は現在も導入したままです。

まずは設置してみて、その後マイナスになるようであれば、パンくずリストを外しましょう。

SEOに効果的

Googleはパンくずリスト設置に対してマイナス発言をしたことがないため、設置は何も影響なしもしくはプラスに働いていることが予想されます。

ウェブサイトはユーザーの便宜のために構築するべきであり、すべての最適化はユーザーエクスペリエンスの向上のために調整する必要があります。
引用元：Googleガイドライン

Google社は、パンくずリストに関して、ユーザーエクスペリエンスの向上になると考えている可能性が高いです。

なぜなら、Googleの自社メディアでパンくずリストの作成方法を載せているからです。

パンくずリストの作り方(外部リンク)
よって、パンくずリストは効果的だと考えるのが妥当な気がします。

【よくある質問】パンくずリストはいらない？

→個人的には必要だと考えています。理由は先程説明した通りです。

Google社の自社メディアにパンくずリスト設置に関する情報を掲載しているからです。

ただ、Googleの記事だとパンくずリストの設置は難しいので、設置を検討している方は本記事を参考にしてみてください。

【HTML入門】パンくずリストの書き方

パンくずリストの書き方は4つほどあります。

JSON-LD
RDFa
HTML
microdata←おすすめ

本記事ではmicrodataを活用したパンくずリストの作成方法について詳しく解説していきます。

WordPressの場合はプラグインを活用しましょう

下記で紹介している2021年おすすめのWordPressテーマは基本的にパンくずリストが自動で設置されています。

パンくずリストの書き方

本記事では、microdata形式を使ってパンくずリストを作成していきます。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="https://onityanzyuku.com" itemprop="item">
      <span itemprop="name">HOME</span>
    </a>
    <meta itemprop="position" content="1">
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="https://onityanzyuku.com/category/blog" itemprop="item">
      <span itemprop="name">BLOG</span>
    </a>
    <meta itemprop="position" content="2">
  </li>
</ol>

用語の理解

BreadcrumbList：パンくずリストの指定、リスト内の全ての要素を保持するコンテナアイテム
ItemLisetItem：各パンくずリストの配列
Item：パンくずを表すウェブページのURL
Name：読者に表示されるタイトル
position：パンくずリストの順番

機能をチェックしよう

パンくずリストは設置した後は、正常に動作するかを確かめる必要があります。

チェックツールとしては構造化データテストツールを活用しましょう。

テストツールの使い方は下記の通りです。

パンくずリストが表示されているページのURLを入力してテストすることも可能ですが、今回は、コードスニペットを活用してコードテストしてみましょう。

先程紹介したコードを参考にご自身でパンくずリストを設置してみてください。

その後【テストを実行】をクリックしましょう。

『エラーなし』『警告なし』『URL』『Title』が正しく表示されていれば問題ありません。

ここまでで、【HTML】基本的なパンくずリストの書き方はおしまいです。

パンくずリストのCSSデザイン【随時追加予定】

ご要望のあるパンくずリストなどがある方はTwitterなどで教えてください。

デザインを作成させていただきます。

<div id="breadcrumb">
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="https://onityanzyuku.com" itemprop="item">
      <span itemprop="name">HOME</span>
    </a>
    <meta itemprop="position" content="1">
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="https://onityanzyuku.com/category/blog" itemprop="item">
      <span itemprop="name">BLOG</span>
    </a>
    <meta itemprop="position" content="2">
  </li>
</ol>
</div>

先程のコードに<div>を加えています

CSSデザイン①：シンプルなデザイン

#breadcrumb {
  display: flex;
  align-items: center;
  background: coral;
  height: 70px;
  width: 90%;
  margin: 0 auto;
  font-size: 15px;
  font-weight: bold;
  border-radius: 5px;
  ol {
    margin: 0px;
    list-style: none;
    li {
      display: inline;
      padding-left: 5px;
      &::after {
        content: '<';
        padding-left: 5px;
        font-weight: bold;
        color: dimgray;
      }
      &:last-child::after {
        content: '';
      }
      a {
        text-decoration: none;
      }
    }
  }

Sassの使い方が分からない方は下記の記事を参考にしてみてください。