マソンリー実績ギャラリー
これは、高さの異なるカードを敷き詰める マソンリー（石積み）風の実績ギャラリー です。レイアウトには JavaScript を使わず CSS の column-count:3 を採用し、各カードに break-inside:avoid を付けて列の途中で切れないようにしています。
このパーツの使いどころと実装ポイント
これは、高さの異なるカードを敷き詰めるマソンリー（石積み）風の実績ギャラリーです。レイアウトには JavaScript を使わず CSS の column-count:3 を採用し、各カードに break-inside:avoid を付けて列の途中で切れないようにしています。--tall 修飾子を持つカードはサムネ高さを大きくし、リズムのある不揃いな並びを作ります。各カードは article で、サムネ画像（object-fit:cover）の上に、hover で現れるオーバーレイ（カテゴリ＋作品名）を重ねる構造です。画像は loading="lazy" 付きで遅延読み込みします。
向いている場面
- 制作会社・デザイナーのポートフォリオ、制作実績一覧
- 写真館・飲食店のギャラリー、商品ラインナップの見せ場
- 不動産・建築の施工事例、イベントのフォトギャラリー
カスタマイズと注意点
列数は column-count の値で変えられ、モバイルでは2列や1列に減らすと窮屈さが解消します。カードを足すときは article を複製し、必要に応じて --tall を付与して高低差を演出します。CSS columns は左上から下へ向かって積む順序になるため、見せたい実績ほど先に置くと意図した位置に来やすくなります。hover オーバーレイはマウス操作前提なので、タッチ端末では常時テキストを薄く表示するか、タップで開く処理を足すとスマホでも情報が伝わります。各画像の alt には作品名や業種を入れ、サムネが実績の内容を表すようにしてください。
よくある質問
マソンリー表示にJavaScriptは必要ですか？
このパーツは不要です。レイアウトはCSSのcolumn-count（マルチカラム）とbreak-inside:avoidだけで実現しており、JavaScript製のマソンリーライブラリに頼りません。そのぶん軽量で表示が速い反面、カードはライブラリ方式のように上から横方向ではなく、各列を縦に積む順序で並ぶ点を理解して配置を決めてください。
スマホではhoverのオーバーレイが見られないのでは？
その通りで、タッチ端末にはマウスのhoverがありません。対策として、モバイルではカテゴリと作品名を最初から薄く表示しておくか、カードのタップでオーバーレイを開く処理を加えるとよいです。これにより、ホバーできない環境でも実績の名称やジャンルがきちんと伝わるようになります。