パンくずリストを作成したい
「パンくずリスト」とは、ユーザーがいまWebサイトのどこを見ているのかがわかるように、ホームからリンクを並べて表示したものです。主にパソコン向けのレイアウトで使用します。パンくずリストは、<ol>タグと<li>タグを使ってマークアップするのが基本です。適用するCSSは少し複雑ですがパターン化されています。以下のソースコードで強調されている部分は、パンくずリストを作るために必要な部分です。このポイントを押さえておけばテキスト色の設定や各項目のスペースの取りかたなど自由にカスタマイズできます。
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8"><!-文字コードを指定->
<style>
.breadcrumb{
list-style: none;
border: 1px solid #b3b3b3;
padding: 3px 20px;
border-radius: 5px;
background-color: #ececec;
font-size: 14px;
}
a{
color: #e87a19;
text-decoration:none;
}
.breadcrumb li{
display: inline-block;
}
.breadcrumb li::after{
content: "≫";
padding: 0 5px;
color: #b3b3b3;
}
.breadcrumb li:last-child::after{
content: none;
}
</style>
</head>
<body>
<ol class="breadcrumb">
<li><a href="#">ホーム</a></li>
<li><a href="#">製品情報</a></li>
<li><a href="#">家庭向け</a></li>
<li><a href="#">キッチン</a></li>
<li><a href="#">電子レンジ</a></li>
<li><a href="#">BTO011</a></li>
</ol>
</body>
</html>実行結果
