中・大規模Webサイトで重要な役割を持つトピックパス、通称パンくずリスト。Webサイトの訪問者が「今サイト内のどの位置にいるか」を視覚的にわかりやすく示したテキストリンクのことで、名前の由来はグリム童話の「ヘンゼルとグレーテル」で、主人公の兄妹が森で迷子にならないよう通り道に「パンくず」を落として目印にしたエピソードからこの名が付けられました。

こういうやつです。

PCでは見やすくていいのですが、スマホだとページ上部で複数行に分断するなどで読みづらくなるので1行表示かつスクロールバーを出して収めたいと思います。

実装イメージ。

まずはパンくずリストのHTMLです。番号付きリストで実装しています。

<div class="topic-path">
 <ol>
  <li><a href="#">ホーム</a></li>
  <li><a href="#">会社情報</a></li>
  <li><a href="#">当社での取り組み</a></li>
  <li><em>サステナビリティ</em></li>
 </ol>
</div>

続いてCSSです。見た目の実装は割愛しています。

.topic-path ol{
 display: flex;
 flex-wrap: nowrap;
 overflow-x: auto;
 white-space: nowrap;
 list-style: none;
 gap: 5px;
}
.topic-path ol li{
 flex-shrink: 0;
 white-space: nowrap;
}

flex-boxで横並びを実現しつつ、子要素のliに対し flex-shrink: 0 を付けて縮めないようにしています。これで文字数やサイズが可変しても元サイズを保持したまま、overflow-x: auto によってスクロールできるようになります。

おしまい♥