プログラミング備忘録 foo

シンプル横並び(h1なし)

目的

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

実行結果

解説

  • パンくずリストのタグとしてSEOに最適な<nav>を使っています。
  • 実行結果にある通り、長文になって複数行になってもキレイに改行されます。
  • 既にh1の置き場所が決まっている場合にお使いください。h1の置き場所が決まっていない場合はh1あり版が有用です。

HTML

<nav class="structure_1_1">
	<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>このパンくずリストは最後の文言がこのような長文になってもキレイに改行されるようになっているので、安心してお使いいただけます。</li>
	</ol>
</nav>
  • 順序立てて階層を表すので<ul>～</ul>ではなく<ol>～</ol>を使っています。

CSS

.structure_1_1 {
	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_1 ol {
	font-size: 0px;
	display: block;
	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_1 ol li {
	font-size: 12px;
	line-height: 1.7;
	display: inline;
}

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

.structure_1_1 a {
	text-decoration: none;
}
  • 17行目のfont-size: 0px;を書かないと余白が出てしまいます。
  • 順序立てて階層を表すので<ul>～</ul>ではなく<ol>～</ol>を使っていますが、番号を表記するとパンくずリストにならないので27行目で消しています。そして33行目のdisplay: inline;で横並びにしています。
.structure_1_1 {
	font-size: 9px;
	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_1 ol {
	font-size: 0px;
	display: block;
	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_1 ol li {
	font-size: 9px;
	line-height: 1.7;
	display: inline;
}

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

.structure_1_1 a {
	text-decoration: none;
}
  • スマホ版の解説内容はPC版と同じなので、PC版をご覧ください。