ボタン絞り込み実績
「ボタン絞り込み実績」は、上部のタブで実績カードを切り替える簡易フィルタ付きの実績ギャラリーです。注目すべきは、絞り込みの状態管理に JavaScript を使わず、 input type="radio" と label の組み合わせだけで実現している点です。
このパーツの使いどころと実装ポイント
「ボタン絞り込み実績」は、上部のタブで実績カードを切り替える簡易フィルタ付きの実績ギャラリーです。注目すべきは、絞り込みの状態管理に JavaScript を使わず、input type="radio" と label の組み合わせだけで実現している点です。ラジオボタン本体は非表示にし、選択中のラベルだけ下線を付けて見せています。カードは display:grid の 2 列で並びます。
向いている場面
制作会社のポートフォリオ、デザインスタジオの実績一覧、ジャンル別に作品を見せたい個人サイトなどに向きます。Web・EC といったカテゴリで分けて見せると、訪問者が興味のある事例にすぐ到達できます。
カスタマイズと注意点
- 実際にカードを出し分けるには、選択されたタブに応じて
data-k付きのカードを表示・非表示するスタイルやスクリプトを足す必要があります。HTML だけでは見た目の切り替えにとどまります。 - カードは
aspect-ratioで比率を固定しているため、画像を入れても枠崩れしにくいです。 - ラジオとラベルは
idとforを正しく対応させることが必須で、これがアクセシビリティの要にもなります。
よくある質問
なぜJavaScriptなしでタブ切り替えができるのですか？
非表示にしたラジオボタンとラベルをidとforで結び付け、チェックされたラジオに連動してラベルのスタイルを変えるCSSの仕組みを使っているためです。状態の保持をブラウザのフォーム機能に任せています。
選んだカテゴリで実績を実際に絞り込むには？
各カードにdata-kでカテゴリを持たせてあるので、選択中のタブに合わせて該当しないカードを非表示にするCSSやスクリプトを追加します。これで表示が実際に絞り込まれます。