マソンリー型制作実績グリッド
制作実績やポートフォリオを、高さの違うタイルが組み合わさったマソンリー（石積み）風に見せるグリッドです。実装は JavaScript を使わず、CSS Grid の grid-row:span 2 を一部のアイテムに付けるだけで縦長タイルを作り、リズムのある配置を生んでいます。
このパーツの使いどころと実装ポイント
制作実績やポートフォリオを、高さの違うタイルが組み合わさったマソンリー（石積み）風に見せるグリッドです。実装は JavaScript を使わず、CSS Grid の grid-row:span 2 を一部のアイテムに付けるだけで縦長タイルを作り、リズムのある配置を生んでいます。画像は aspect-ratio（縦長は 4/6、通常は 4/3）で比率が固定されるため、写真の元サイズがばらついても整列します。
ホバー演出と構造
各タイルは <a> でリンク化され、ホバーすると写真が transform:scale でわずかに拡大し、下から黒いグラデーションのオーバーレイがフェードインしてカテゴリと案件名が現れます。普段は画像だけを見せ、興味を持った瞬間に情報を出す、写真主役の見せ方です。
向く場面とカスタマイズ
- Web 制作会社・デザイン事務所の実績
- 写真館・建築・インテリアの施工例
- 飲食店のメニューや内装ギャラリー
wm__item--tall を付ける位置を変えるだけで全体の表情が変わります。各画像の alt には案件名など中身が伝わる説明を入れてください。ホバーでしか出ない案件名は SEO 上もテキストとして DOM に存在するので有効ですが、タッチ端末では出ないため、重要な情報は画像下にも添えると親切です。
よくある質問
マソンリーなのにJavaScriptは不要ですか。
不要です。CSS Gridのgrid-row:spanで一部タイルを縦長にして段差を作っているため、ライブラリなしで動きます。読み込みが軽く、表示も安定します。
縦長タイルを増やしたり減らしたりできますか。
できます。wm__item--tallクラスを付けたliが縦2行分を占めるので、付ける箇所を増減させれば配置のリズムを調整できます。付けすぎると間延びするので数件に絞るのがコツです。