【コピペ】超絶シンプル！なパンくずリストの作り方

2020/04/23

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

パンくずリストって英語で何て言うの？
HTML、CSSでパンくずリストを作りたいけどどう書いたらいいか分からなくて困っている
「コピペですぐ使える」パンくずリストのサンプルコードが見たい
超シンプルなパンくずリストのデモが見たい

という方のお悩みを解決します！

今回作るパンくずリスト

パンくずリストを英語で言うと？
パンくずリストをコーディングする

パンくずリストを英語で言うと？

「パンくずリスト」。

日本語表記ではなんとも可愛らしい印象を受けるこの単語。

英語ではなんと表現するのでしょう？

答えは、Breadcrumbsです！

英訳すると急に洗練された印象に変わりました笑

覚えておいて損はないのでこの機会に覚えましょ〜

パンくずリストをコーディングする

Webサイト制作をする際、避けては通れないパンくずリストのコーディング。

ぼくはこれまで10件以上コーディング案件をやってきましたが、正直そこまでデザインに凝ったパンくずリストに出会ったことはありません。

つまり、超絶シンプルなパンくずリストの作り方さえ知っておけば怖いものなしということです！

ということで以下、HTML・CSSで作る最も簡単なパンくずリストのサンプルコード＆CodePenのデモとなります。

パンくずリストのHTML

HTML

<ul class="List" itemscope itemtype="http://schema.org/BreadcrumbList">
  <li class="List-Item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="" itemprop="item" class="List-Item-Link">
      <span itemprop="name">HOME</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  <li class="List-Item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="" itemprop="item" class="List-Item-Link">
      <span itemprop="name">NEWS</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>
</ul>

パンくずリストのCSS

CSS

.List-Item {
  display: inline;
  font-size: 14px;
}
.List-Item::after {
  content: '＞';
  padding: 0 16px;
}
.List-Item:last-child::after {
  content: '';
}
.List-Item-Link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

パンくずリストのデモ

See the Pen
シンプルなパンくずリスト by 石森裕也 (@yuyaphotograph)
on CodePen.