##パンくずリストとは
[メルカリより]https://www.mercari.com/jp/guide/car/transport_guide/
こういうのとか
[Web Design Trendsより]https://webdesign-trends.net/entry/2310
こういうのをパンくずリストという
###名前の由来
童話「ヘンゼルとグレーテル」からきているとのこと。
###パンくずリストを作ろう
bread-crumbs.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>パンくずリスト</title>
<link rel="stylesheet" href="css/bread-crumbs.css">
</head>
<body>
<div class="bread-crumbs">
<ul>
<li>
<a href="#">ホーム</a>
</li>
<li>
<a href="#">カテゴリー1</a>
</li>
<li>
<a href="#">カテゴリー2</a>
</li>
<li>
カテゴリー3
</li>
</ul>
</div>
</body>
</html>
bread-crumbs.css
body {
margin: 0;
}
.bread-crumbs ul {
list-style: none;
text-decoration: none;
padding: 0;
margin: 10px 10px;
}
.bread-crumbs li {
display: inline;
}
.bread-crumbs li:after {
content: '>';
color: #000000;
}
.bread-crumbs li:last-child:after {
content: none;
}
.bread-crumbs li a {
text-decoration: none;
color: #218b21;
}
.bread-crumbs li a:hover {
text-decoration: underline;
}
シンプルなパンくずリストができました
疑似要素を使って＞を表示していますが、下の記述がないと一番右側にも＞が表示されてしまいます。
やっていることは**一番後ろのli要素の疑似要素は無し（非表示）**ということです。
.bread-crumbs li:last-child:after {
content: none;
}
パンくずリストを作るのは別にli要素じゃなくてもいいのでは？と思ったのですが、Googleではli要素を推奨しています。
https://developers.google.com/search/docs/data-types/breadcrumb