
HTML・CSSでつくるパンくずリストのデザイン5選
ユーザビリティ・SEO両方の面で重要な「パンくずリスト」。大規模なサイトになるほど設置の恩恵も高くなってきます。本ページではそんなパンくずリストをコピペだけで取り入れられるスニペットをまとめました。
シンプルなパンくずリスト
矢印アイコン
step1
デザインを調整する
step2
HTMLをコピペする
HTML
<ol class="breadcrumb-001">
<li><a href="#">ホーム</a></li>
<li><a href="#">カテゴリー</a></li>
<li><a href="#">タイトル</a></li>
</ol>
step3
CSSをコピペする
CSS
.breadcrumb-001 {
display: flex;
gap: 0 22px;
list-style: none;
padding: 0;
font-size: .9em;
}
.breadcrumb-001 li {
display: flex;
align-items: center;
}
.breadcrumb-001 li:first-child::before {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 4px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.7%207.5%204%2013.8v6.8c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-4c0-.4.3-.7.7-.7h2.7c.4%200%20.7.3.7.7v4c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-6.8l-7.7-6.3h-.9zm12.1%204.4L20.3%209V3.2c0-.3-.2-.5-.5-.5h-2.3c-.3%200-.5.2-.5.5v2.9L13.3%203c-.7-.6-1.8-.6-2.5%200L.2%2011.8c-.2.2-.3.5-.1.7l1.1%201.3c.2.2.5.2.7.1l9.8-8.1h.6l9.8%208.1c.2.2.5.1.7-.1l1.1-1.3c.2-.2.1-.5-.1-.6z%22%20style%3D%22fill%3A%23333333%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
content: '';
}
.breadcrumb-001 li:not(:last-child)::after {
display: inline-block;
transform: rotate(45deg);
width: .3em;
height: .3em;
margin-left: 10px;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
content: '';
}
.breadcrumb-001 a {
color: #333333;
text-decoration: none;
}
矢印(塗りつぶし)アイコン
step1
デザインを調整する
矢印を塗りつぶしてみました。よりコンパクトに見せたい場合におすすめです。
step2
HTMLをコピペする
HTML
<ol class="breadcrumb-005">
<li><a href="#">ホーム</a></li>
<li><a href="#">カテゴリー</a></li>
<li><a href="#">タイトル</a></li>
</ol>
step3
CSSをコピペする
CSS
.breadcrumb-005 {
display: flex;
gap: 0 20px;
list-style: none;
padding: 0;
font-size: .9em;
}
.breadcrumb-005 li {
display: flex;
align-items: center;
}
.breadcrumb-005 li:first-child::before {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 4px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.7%207.5%204%2013.8v6.8c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-4c0-.4.3-.7.7-.7h2.7c.4%200%20.7.3.7.7v4c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-6.8l-7.7-6.3h-.9zm12.1%204.4L20.3%209V3.2c0-.3-.2-.5-.5-.5h-2.3c-.3%200-.5.2-.5.5v2.9L13.3%203c-.7-.6-1.8-.6-2.5%200L.2%2011.8c-.2.2-.3.5-.1.7l1.1%201.3c.2.2.5.2.7.1l9.8-8.1h.6l9.8%208.1c.2.2.5.1.7-.1l1.1-1.3c.2-.2.1-.5-.1-.6z%22%20style%3D%22fill%3A%23333333%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
content: '';
}
.breadcrumb-005 li:not(:last-child)::after {
display: inline-block;
width: .3em;
height: .6em;
margin-left: 12px;
background-color: #333333;
clip-path: polygon(0 0, 100% 50%, 0 100%);
content: '';
}
.breadcrumb-005 a {
color: #333333;
text-decoration: none;
}
スラッシュ
step1
デザインを調整する
区切りをスラッシュにしてみました。「/」という文字をそのまま指定しているので、矢印と比べて若干実装がシンプルになっています。
step2
HTMLをコピペする
HTML
<ol class="breadcrumb-002">
<li><a href="#">ホーム</a></li>
<li><a href="#">カテゴリー</a></li>
<li><a href="#">タイトル</a></li>
</ol>
step3
CSSをコピペする
CSS
.breadcrumb-002 {
display: flex;
gap: 0 15px;
list-style: none;
padding: 0;
font-size: .9em;
}
.breadcrumb-002 li {
display: flex;
align-items: center;
}
.breadcrumb-002 li:first-child::before {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 4px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.7%207.5%204%2013.8v6.8c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-4c0-.4.3-.7.7-.7h2.7c.4%200%20.7.3.7.7v4c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-6.8l-7.7-6.3h-.9zm12.1%204.4L20.3%209V3.2c0-.3-.2-.5-.5-.5h-2.3c-.3%200-.5.2-.5.5v2.9L13.3%203c-.7-.6-1.8-.6-2.5%200L.2%2011.8c-.2.2-.3.5-.1.7l1.1%201.3c.2.2.5.2.7.1l9.8-8.1h.6l9.8%208.1c.2.2.5.1.7-.1l1.1-1.3c.2-.2.1-.5-.1-.6z%22%20style%3D%22fill%3A%23333333%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
content: '';
}
.breadcrumb-002 li:not(:last-child)::after {
display: inline-block;
margin-left: 15px;
color: #333333;
content: '/';
}
.breadcrumb-002 a {
color: #333333;
text-decoration: none;
}
矢印大きめなパンくずリスト
灰色背景
step1
デザインを調整する
ダッシュボードのような矢印付きのパンくずリスト。白・黒をテーマカラーとしたサイトにおすすめです。
step2
HTMLをコピペする
HTML
<ol class="breadcrumb-003">
<li><a href="#">ホーム</a></li>
<li><a href="#">カテゴリー</a></li>
<li><a href="#">タイトル</a></li>
</ol>
step3
CSSをコピペする
CSS
.breadcrumb-003 {
display: flex;
gap: 0 20px;
list-style: none;
padding: 6px 0 6px 18px;
border-radius: 3px;
overflow: hidden;
background-color: #edf2f6;
font-size: .9em;
}
.breadcrumb-003 li {
display: flex;
align-items: center;
position: relative;
padding-right: 20px;
}
.breadcrumb-003 li:first-child a::before {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 4px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.7%207.5%204%2013.8v6.8c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-4c0-.4.3-.7.7-.7h2.7c.4%200%20.7.3.7.7v4c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-6.8l-7.7-6.3h-.9zm12.1%204.4L20.3%209V3.2c0-.3-.2-.5-.5-.5h-2.3c-.3%200-.5.2-.5.5v2.9L13.3%203c-.7-.6-1.8-.6-2.5%200L.2%2011.8c-.2.2-.3.5-.1.7l1.1%201.3c.2.2.5.2.7.1l9.8-8.1h.6l9.8%208.1c.2.2.5.1.7-.1l1.1-1.3c.2-.2.1-.5-.1-.6z%22%20style%3D%22fill%3A%23555%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
vertical-align: text-bottom;
content: '';
}
.breadcrumb-003 li:not(:last-child)::before,
.breadcrumb-003 li:not(:last-child)::after{
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
content:'';
}
.breadcrumb-003 li:not(:last-child)::before{
right: 0;
border-left: 10px solid #c6cdd3;
}
.breadcrumb-003 li:not(:last-child)::after{
right: 1px;
border-left: 10px solid #edf2f6;
}
.breadcrumb-003 a {
color: #555;
text-decoration: none;
}
カラフルな背景
step1
デザインを調整する
背景を単色にすることでより矢印が目立つようにしたパンくずリスト。文字色が白のため、背景はコントラスト強めの色にするのがおすすめです。
step2
HTMLをコピペする
HTML
<ol class="breadcrumb-004">
<li><a href="#">ホーム</a></li>
<li><a href="#">カテゴリー</a></li>
<li><a href="#">タイトル</a></li>
</ol>
step3
CSSをコピペする
CSS
.breadcrumb-004 {
display: flex;
gap: 0 20px;
list-style: none;
padding: 6px 0 6px 18px;
border-radius: 3px;
overflow: hidden;
background-color: #2589d0;
font-size: .9em;
}
.breadcrumb-004 li {
display: flex;
align-items: center;
position: relative;
padding-right: 20px;
}
.breadcrumb-004 li:first-child a::before {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 4px;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.7%207.5%204%2013.8v6.8c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-4c0-.4.3-.7.7-.7h2.7c.4%200%20.7.3.7.7v4c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-6.8l-7.7-6.3h-.9zm12.1%204.4L20.3%209V3.2c0-.3-.2-.5-.5-.5h-2.3c-.3%200-.5.2-.5.5v2.9L13.3%203c-.7-.6-1.8-.6-2.5%200L.2%2011.8c-.2.2-.3.5-.1.7l1.1%201.3c.2.2.5.2.7.1l9.8-8.1h.6l9.8%208.1c.2.2.5.1.7-.1l1.1-1.3c.2-.2.1-.5-.1-.6z%22%20style%3D%22fill%3A%23fff%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
vertical-align: text-bottom;
content: '';
}
.breadcrumb-004 li:not(:last-child)::before,
.breadcrumb-004 li:not(:last-child)::after{
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
content:'';
}
.breadcrumb-004 li:not(:last-child)::before{
right: 0;
border-left: 10px solid #fff;
}
.breadcrumb-004 li:not(:last-child)::after{
right: 2px;
border-left: 10px solid #2589d0;
}
.breadcrumb-004 a {
color: #fff;
text-decoration: none;
}
シンプルなパンくずリスト。「ホーム」アイコンの有無は任意で選択することが可能です。リンクと分かりやすくするために、ホバーアニメーションを加えるのも良いですね。