パンくずリストとは？
ユーザーが見ているページが、サイトのどの位置なのかを教えてくれるものです。
パンくずリストの作り方（html）
今から、これを作っていくよ！
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">これを<head>内に書いて下さい。
<!-- パンくずリスト -->
<nav class="breadcrumb">
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="index.html">
<span class="home" itemprop="name">Home</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="#">
<span itemprop="name">Menu1</span>
</a>
<meta itemprop="position" content="2" />
</li>
</ol>
</nav>これを<body>内に書いて下さい。
パンくずリストは、検索エンジン（Google、Microsoft、Yahooなど）が認識できる様に、書く必要があります。
いくつか書き方がありますが、ここではオーソドックスな書き方でやっていきます。
itemscopeは、特定の構造化データを持っていることを示します。
itemtypeは、どんな構造化データを持っているかを示します。
Schema.orgは、Google、Microsoft、Yahoo、Yandexが共同で設立した団体で、
https://schema.org/BreadcrumbListを使って構造化します。
itempropは、アイテムにプロパティを追加するために使用します。
パンくずリストの作り方（css）
/* パンくずリスト */
.breadcrumb li {
display: inline-block;
list-style: none;
font-weight: bold;/* 太字 */
}
.breadcrumb li:last-child::after {
content: '';
}
.breadcrumb li a {
text-decoration: none;
color: #999;
}
.breadcrumb li a:hover {
text-decoration: underline;
}
/* 家アイコン */
.home::before {
font-family: 'Font Awesome 5 Free';
content: '\f015';
display: inline-block;
font-weight: 900;
font-size: 0.8em;
color: #999;
vertical-align: middle;
margin-right: 5px;
}
/* ▶を表示 */
.breadcrumb li::after {
font-family: 'Font Awesome 5 Free';
content: '\f0da';
font-weight: 900;
color: silver;
}これは、先日Font Awesomeの使い方でやりましたね。
さいごに
パンくずリストは、ホームには普通記載しません。
今日はありがとうございました。では、また！