実績ポートフォリオ フィルターグリッド

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

このパーツは、上部のタブで表示する実績を絞り込めるポートフォリオグリッドです。各カードには data-cat 属性でカテゴリが付き、タブをクリックするとJSが該当カテゴリだけを表示し、それ以外をフェードで隠します。タブは role="tablist" を持ち、選択中のタブは色が反転して現在地が分かるようになっています。

向いている場面

制作実績や事例が多く、種類別に見せたいサイトに向きます。たとえばWeb制作会社、デザイン事務所、施工事例を持つ建築・リフォーム業、商品ジャンルが多いECの導入事例ページなどで力を発揮します。

カスタマイズと注意点

タブを増やすときは、ボタンに data-filter を、対応するカードに同じ値の data-cat を付けます。実績画像は img の src を差し替え、必ず内容を表す alt を書いてください。

• 画像には width と height、遅延読み込みを指定すると表示が安定します
• 絞り込みでカードが減ると高さが急に変わるので、件数が極端に偏らないよう配慮しましょう

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。