CSS | パンくずリストの横並びデザイン

2023-06-07CSS リスト,CSS

トップページやカテゴリなどを表すパンくずリストの横並びCSSデザインを紹介しています。

パンくずリストの横並びCSSデザイン

パンくずリストを横並びにしたCSSのサンプルコードになります。

See the Pen CSS | Make Table background color transparent by yochans (@yochans) on CodePen.

構造化したパンくずリストを「パンくずリスト」というクラス名を持つdiv要素内に作成しています。

サンプルでは「トップページ」と「カテゴリ名」の2階層としていますが、階層を増やす場合は「meta itemprop="position"」の「content」の値を連番で増やして下さい。

<div class="breadcrumbs">
	<ol itemscope itemtype="http://schema.org/BreadcrumbList">
		<li itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
			<a itemprop="item" href="https://1-notes.com"><span itemprop="name">HOME</span></a><i class="arrow">></i>
			<meta itemprop="position" content="1" />
		</li>
		<li itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
			<a itemprop="item" href="https://1-notes.com/category/css/"><span itemprop="name">CSS</span></a>
			<meta itemprop="position" content="2" />
		</li>
	</ol>
</div>

CSSは、olタグにて「list-style: none」でリストマークの非表示、横並びにするための「display: flex」を指定しています。

それぞれが、くっつかないように「>」を表しているクラス名「arrow」に対してマージンを調節しています。

.breadcrumbs ol {
	display: flex;
	padding-left: 0;
	margin: 10px 0;
	list-style: none;
}

.breadcrumbs ol .arrow {
	margin: 0 10px;
}