パンくず
ナビ ／ パターン集トップ
現在位置を示す。最後の項目はリンクにしない
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<nav class="breadcrumb" aria-label="パンくず">
<ol class="breadcrumb__list">
<li><a href="/">トップ</a></li>
<li><a href="/layout/">レイアウト</a></li>
<li><a href="/layout/grid/">グリッド</a></li>
<li><span aria-current="page">サブグリッド</span></li>
</ol>
</nav>.breadcrumb__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
column-gap: var(--space-2);
row-gap: var(--space-6); /* 折り返したとき、44px の当たり判定どうしを8px以上あける */
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.breadcrumb__list li {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
/* 区切りは目印であって、読み上げる語ではない。
2行目の「/ ""」が生成内容の代替テキスト。対応する環境では読み上げから外れ、
対応しない環境では1行目がそのまま残るので、見た目は必ず出る */
.breadcrumb__list li:not(:last-child)::after {
content: "/";
content: "/" / "";
color: var(--color-border);
}
/* 文字の行は25pxしかない。パンくずを高くすると本文が下へ逃げるので、
擬似要素だけを44pxに伸ばす。見た目は動かさず、当たり判定だけが広がる */
.breadcrumb__list a {
position: relative;
color: var(--color-accent-text);
text-decoration: none;
}
.breadcrumb__list a::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-start: 50%;
block-size: 2.75rem;
translate: 0 -50%;
}
.breadcrumb__list [aria-current="page"] {
color: var(--color-text);
}確認する#
- olでマークアップしている
- 現在ページに aria-current="page" がある
- 区切りの「/」が読み上げに混ざらない（生成内容の代替テキストを空にする）
- 375pxで折り返しても区切りが読める
- リンクの当たり判定が縦44pxあり、折り返しても隣と8px以上あく