ピル型カテゴリタブナビ

解説

カテゴリの切り替えを丸みの強い「ピル」型ボタンで横並びにしたタブ風の選択 UIです。現在選択中のボタンだけアクセントカラーで塗りつぶし、どれを選んでいるかを一目で分かるようにしています。EC の絞り込みやブログのカテゴリフィルタに向きます。

切り替えの仕組みはシンプルです。クリックされたとき、いったん全ボタンから is-active クラスを外し、押されたボタンにだけ付け直します。これで常にひとつだけが選択状態になります。角を完全に丸めているのは border-radius:999px の指定で、ボタン自体も外枠のコンテナも同じ値を使うことで内側にぴったり収まる見た目を作っています。色の変化は transition でなめらかにつないでいます。

使う場面とカスタマイズ

• 商品一覧の「すべて／新着／セール」など少数カテゴリの絞り込み
• 記事一覧のジャンル切り替えや、ダッシュボードの表示期間切り替え
• is-active の背景色とコンテナの背景・枠線色を変えてブランドに合わせる

実際にコンテンツを差し替えるには、各ボタンに対応する一覧の表示・非表示を結びつける処理を足します。flex-wrap が効いているので、項目が多くてもスマホで自然に折り返します。アクセシビリティを高めるなら button を保ったまま選択状態を aria-selected でも伝えると親切です。

使用例・適したシーン

• コーポレートサイトのグローバルナビ
• EC サイトのヘッダー
• SaaS の管理画面
• モバイル向け Web アプリ