Flexboxレイアウト – パンくずリスト

HTML

<ol>
  <li><a href="">Top</a></li>
  <li><a href="">サービス</a></li>
  <li>Web制作</li>
</ol>

CSS

ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
}

li:not(:last-child) {
  margin-right: 30px;
}

li:not(:last-child):after {
  content: '';
  display: inline-block;
  margin-left: 30px;
  width: 12px;
  height: 12px;
  background-color: #5b8f8f;
  border-radius: 50%;
}

アクセシビリティ対応

HTML

<nav aria-label="パンくずリスト">
  <ol>
    <li><a href="">Top</a></li>
    <li><a href="">サービス</a></li>
    <li aria-current="page">Web制作</li>
  </ol>
</nav>

上記HTMLの他、構造化データもあわせて記述しておきましょう。

Chapter7 Google検索結果ページへの対策 パンくずリスト >>