メイソンリーギャラリー
このパーツは、高さの異なる写真を 4 列で隙間なく並べる「メイソンリーギャラリー」です。実装には CSS の column-count:4 と column-gap を使い、各カードに break-inside:avoid を付けて列の途中で割れないようにしています。
このパーツの使いどころと実装ポイント
このパーツは、高さの異なる写真を 4 列で隙間なく並べる「メイソンリーギャラリー」です。実装には CSS の column-count:4 と column-gap を使い、各カードに break-inside:avoid を付けて列の途中で割れないようにしています。Flexbox や Grid のメイソンリーと違い、要素が上から順に列へ流し込まれる方式で、JavaScript なしで段差のあるレイアウトを実現できるのが特徴です。
向いている場面
縦横比がそろわない写真を美しく見せたい場面に向きます。建築・インテリアの施工事例、フォトグラファーや美容室のポートフォリオ、飲食店のメニューや内観ギャラリーなどです。サンプルではグラデーションのプレースホルダになっていますが、実運用では実写に差し替えます。
カスタマイズの勘所
- 各カードの
heightを変えると段差のリズムが変わります。実画像では<img>を入れて高さは画像比率に任せると自然です。 - 列数は
column-countの値で調整します。
実装上の注意として、column 方式はカードが左上から下方向に流れて折り返すため、見せたい順番と表示順がずれることがあります。重要な写真は先頭に置いてください。レスポンシブでは max-width:720px で 2 列に切り替わります。実画像を入れる際は loading="lazy" と意味のある alt を付けると、読み込みと検索の両面で有利です。
よくある質問
表示順が思った通りになりません
このギャラリーは CSS の column を使っており、要素は左の列から下に向かって流れ、いっぱいになると次の列へ折り返します。そのため重要な写真ほど HTML の先頭に置くと、左上に表示されやすくなります。
実際の写真を入れるときのコツはありますか
プレースホルダの div を img に置き換え、height はあえて固定せず画像本来の比率に任せると段差が自然になります。各 img には loading=lazy と内容を表す alt を付けてください。重い元画像は WebP に変換しておくと表示が速くなります。