タグ絞り込み（一覧の頭）

記事 ／ パターン集トップ

一覧の頭でタグを選ばせる。選択中の見た目と件数を同じ場所で示す

プレビュー#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<div class="tag-filter">
  <h2 class="tag-filter__title" id="tag-filter-title">タグで絞り込む</h2>
  <ul class="tag-filter__chips" aria-labelledby="tag-filter-title">
    <li><a href="/blog/">すべて</a></li>
    <li><a href="/blog/tag/mame" aria-current="page">豆の話</a></li>
    <li><a href="/blog/tag/irekata">いれかた</a></li>
    <li><a href="/blog/tag/tenpo">店のこと</a></li>
  </ul>
  <!-- 器は作り直さず、内側の2つに textContent を書くだけにする。
       innerHTML で丸ごと入れ替えると、変化として検出されないことがある。
       aria-atomic="true" があるので、数字だけ書き換えても一文まるごと読まれる -->
  <p class="tag-filter__count" role="status" aria-atomic="true">「<span id="tag-filter-tag">豆の話</span>」の記事 <strong id="tag-filter-count">6</strong>件（全24件）</p>
</div>

<script>
// JS で絞り込む版にするときは、この2つだけを書き換える
function showCount(tag, hits) {
  document.getElementById("tag-filter-tag").textContent = tag;
  document.getElementById("tag-filter-count").textContent = String(hits);
}
</script>

.tag-filter {
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-border);
  margin-block-end: var(--space-6);
}
.tag-filter__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: normal;
  color: var(--color-text-muted);
}
.tag-filter__chips {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);   /* チップどうしの最小の距離 8px */
}
/* チップは面そのものが当たり判定になる。縦は 44px、横は
   左右 16px の余白で「すべて」の3文字でも 44px を超える */
.tag-filter__chips a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-sm);
}
.tag-filter__chips a:hover {
  border-color: var(--color-accent-text);
  color: var(--color-accent-text);
}
.tag-filter__chips a[aria-current="page"] {
  background: var(--color-accent-text);
  border-color: var(--color-accent-text);
  color: var(--color-on-accent);
}
.tag-filter__count {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.tag-filter__count strong {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

確認する#

• チップはリンクで、JSが無くても絞り込んだ一覧へ飛べる
• 「すべて」が先頭にあり、絞り込みを外す道が残っている
• 選択中のタグに aria-current="page" が付いている
• 件数は role="status" の内側の要素に textContent で書く（器ごと innerHTML で入れ替えない）

関連#

• 選択
• 情報設計
• ARIA