マソングリッド制作実績セクション
大小サイズが混在するマソング（敷石）風グリッドで制作実績を見せる、カテゴリフィルター付きのワークスセクションです。 grid-template-columns:repeat(3,1fr) と grid-auto-rows:200px を土台に、一部のアイテムへ grid-column:span 2 （横長）や gr…
このパーツの使いどころと実装ポイント
大小サイズが混在するマソング（敷石）風グリッドで制作実績を見せる、カテゴリフィルター付きのワークスセクションです。grid-template-columns:repeat(3,1fr) と grid-auto-rows:200px を土台に、一部のアイテムへ grid-column:span 2（横長）や grid-row:span 2（縦長）を与えてリズムのある敷き詰めを作ります。各カードはホバーで画像が拡大し、下から黒のグラデーションが現れて作品名とカテゴリが浮かび上がります。上部のフィルターボタンには data-filter 属性が付き、JavaScript と組み合わせて絞り込みを実装する想定です。
向いている場面
制作会社・デザイン事務所・フォトグラファー・建築など、ビジュアルで実績を魅せたいポートフォリオに向きます。コーポレート・EC・LPのように案件種別が分かれる事業では、見たいカテゴリだけを抽出してもらえます。
カスタマイズと注意
- 各アイテムには
data-catが付いており、フィルターのdata-filterと一致させる前提です。絞り込みのJavaScriptはこのパーツ単体には含まれないため、is-hiddenクラスを付け外しする処理を別途用意してください。 - 横長・縦長は
--wide・--tallクラスの付与で決まります。強調したい数点に絞ると敷き詰めに隙間が出にくく整います。600px以下では2列になります。 - フィルターボタンは
button要素なのでキーボード操作にも対応します。各imgには実態に合ったaltを入れてください。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
カテゴリフィルターはこのパーツだけで動きますか。
ボタンには絞り込み用のdata-filter属性、各カードにはdata-cat属性が付いていますが、実際にクリックで表示を切り替えるJavaScriptはこのパーツ単体には含まれていません。フィルター名と一致しないカードにis-hiddenクラスを付けて隠す、という短い処理を別途書くことで動作します。is-hiddenは非表示用のスタイルとして用意されています。
横長・縦長のカードはどう決めていますか。
横長は2列分を占めるクラス、縦長は2行分を占めるクラスをアイテムに付けることで作っています。強調したい代表作だけに付けると敷石模様にメリハリが出ますが、付けすぎるとグリッドに隙間ができやすくなります。まずは1〜2点だけ大きくし、残りは標準サイズにすると整った見た目になります。