目的

• 横並びのシンプルなパンくずリストを作りたい。
• 次の階層がある場合はアングルブラケット(山括弧)を書いて、視覚的に分かりやすい構造にしたい。
• SEOに最適なパンくずリストにしたい。
• h1の置き場所に困っているのでパンくずリストの最後(ページタイトル)に組み込みたい。

実行結果

解説

• パンくずリストのタグとしてSEOに最適な<nav>を使っています。
• h1にページタイトルを書き、パンくずリストの最後に組み込んでいる構造です。HTMLの書き方に問題はありません。
• 実行結果にある通り、長文になって複数行になってもキレイに改行されます。
• h1の置き場所に困っている場合にお使いください。既にh1の置き場所が決まっているならh1なし版をお使いください。

HTML

<div class="structure_1_2">
	<nav>
		<ol>
			<li><a href="https://note-book.foo/">HOME</a></li>
			<li><a href="https://note-book.foo/structure/">構造</a></li>
			<li><a href="https://note-book.foo/structure/1/">パンくずリスト</a></li>
			<li aria-current="page">このパンくずリストは最後の文言がこのような長文になってもキレイに改行されるようになっているので、安心してお使いいただけます。</li>
		</ol>
	</nav>
	<h1>このパンくずリストは最後の文言がこのような長文になってもキレイに改行されるようになっているので、安心してお使いいただけます。</h1>
</div>

• 順序立てて階層を表すので<ul>～</ul>ではなく<ol>～</ol>を使っています。
• 7行目の<li aria-current="page">〜</li>と10行目の<h1>〜</h1>の2箇所でページタイトルが重複していますが、前者は現在位置を示すパンくずナビゲーションで、後者は最上位見出しです。下記のCSSで後述しますが、前者を非表示および後者を表示させ、h1をパンくずリストに組み込んでいます。あまり見ない書き方かもしれませんが、HTML的に問題はありません。h1をどこへ置けば良いか分からない時に有用です。

CSS

.structure_1_2 {
	font-size: 12px;
	line-height: 1.7;
	background-color: #FFFFFF;
	width: 94%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

.structure_1_2 nav {
	display: inline;
}

.structure_1_2 ol {
	font-size: 0px;
	display: inline;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	list-style: none;
}

.structure_1_2 ol li {
	font-size: 12px;
	line-height: 1.7;
	display: inline;
}

.structure_1_2 ol li:not(:last-child)::after {
	color: #000000;
	content: ">";
	margin-top: 0px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 8px;
}

.structure_1_2 ol li[aria-current="page"] {
	display: none;
}

.structure_1_2 a {
	text-decoration: none;
}

h1 {
	font-size: 12px;
	line-height: 1.7;
	font-weight: normal;
	display: inline;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

• 21行目のfont-size: 0px;を書かないと余白が出てしまいます。
• 順序立てて階層を表すので<ul>～</ul>ではなく<ol>～</ol>を使っていますが、番号を表記するとパンくずリストにならないので31行目で消しています。そして各箇所にあるdisplay: inline;で横並びにしています。
• 2行目と58行目、3行目と59行目は同じ値で統一してください。パンくずリストが長文になり改行された時に、1行目と2行目の余白を決めています。
• パンくずリストの最後に表示するページタイトルはh1として組み込むため<li aria-current="page">〜</li>内の重複している文言は50行目で非表示にしています。あまり見ない書き方かもしれませんが、CSS的に問題はありません。

.structure_1_2 {
	font-size: 9px;
	line-height: 1.7;
	background-color: #FFFFFF;
	width: 96%;
	margin-top: 0%;
	margin-right: auto;
	margin-bottom: 2%;
	margin-left: auto;
}

.structure_1_2 nav {
	display: inline;
}

.structure_1_2 ol {
	font-size: 0px;
	display: inline;
	padding-top: 0%;
	padding-right: 0%;
	padding-bottom: 0%;
	padding-left: 0%;
	margin-top: 0%;
	margin-right: 0%;
	margin-bottom: 0%;
	margin-left: 0%;
	list-style: none;
}

.structure_1_2 ol li {
	font-size: 9px;
	line-height: 1.7;
	display: inline;
}

.structure_1_2 ol li:not(:last-child)::after {
	color: #000000;
	content: ">";
	margin-top: 0px;
	margin-right: 4px;
	margin-bottom: 0px;
	margin-left: 4px;
}

.structure_1_2 ol li[aria-current="page"] {
	display: none;
}

.structure_1_2 a {
	text-decoration: none;
}

h1 {
	font-size: 9px;
	line-height: 1.7;
	font-weight: normal;
	display: inline;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

• 17行目のfont-size: 0px;を書かないと余白が出てしまいます。
• 順序立てて階層を表すので<ul>～</ul>ではなく<ol>～</ol>を使っていますが、番号を表記するとパンくずリストにならないので27行目で消しています。そして各箇所にあるdisplay: inline;で横並びにしています。
• 2行目と31行目、3行目と32行目は同じ値で統一してください。パンくずリストが長文になり改行された時に、1行目と2行目の余白を決めています。
• パンくずリストの最後に表示するページタイトルはh1として組み込むため<li aria-current="page">〜</li>内の重複している文言は46行目で非表示にしています。あまり見ない書き方かもしれませんが、CSS的に問題はありません。