カテゴリフィルタ実績グリッド

このパーツの使いどころと実装ポイント

このパーツは、JavaScript を使わずに実績やポートフォリオをカテゴリで絞り込めるフィルタ付きギャラリーです。仕組みの中心は input type="radio" とラベルの組み合わせで、ラジオの選択状態を :checked 疑似クラスで受け取り、隣接セレクタでカードの表示・非表示を切り替えています。各カードに data-k 属性を持たせ、選んだタブと一致しないものを display:none で隠す設計なので、スクリプトの読み込みや実行を待たずに動くのが特長です。

向いている場面

制作会社の制作実績、工務店の施工事例、写真スタジオの作例など、件数が多くジャンルで見せ分けたいページに合います。ページ表示直後から軽快に動くため、回線が遅い環境でも待たされません。

カスタマイズの勘所

• タブを増やすときは input と label を 1 組ずつ追加し、対応する data-k の値とフィルタ用 CSS を合わせて書き足します
• カードはグラデーション背景なので、実案件では background を実写画像に差し替えます
• カードは aspect-ratio:1.6/1 で縦横比を固定しているため、画像の比率がそろわなくても崩れません

注意点として、CSS だけのフィルタは絞り込み結果が URL に残らず、検索エンジンには全件が見えます。多数の項目を本格的に扱う場合はページネーションや JavaScript 併用も検討してください。