マソンリー実績ギャラリー
高さの異なる実写をマソンリー（れんが積み）状に並べ、ホバーで案件名タグを浮かせるギャラリーです。レイアウトはCSSの columns プロパティで段組みを作り、各 figure に break-inside:avoid を指定して画像が段の途中で割れないようにしています。
このパーツの使いどころと実装ポイント
高さの異なる実写をマソンリー（れんが積み）状に並べ、ホバーで案件名タグを浮かせるギャラリーです。レイアウトはCSSのcolumnsプロパティで段組みを作り、各figureにbreak-inside:avoidを指定して画像が段の途中で割れないようにしています。画像ごとにaspect-ratioを3:4・1:1・4:5と振り分けることで、加工なしでも縦横のリズムが生まれます。
向いている場面
- 制作会社やフォトグラファーのポートフォリオ・実績一覧
- 飲食・宿泊・アパレルなど写真が主役の事例紹介
- サイズの揃わない作品を見栄えよく並べたいギャラリー
カスタマイズと注意
各カードはfigcaption内のタグと案件名を差し替えるだけで使えます。ホバーで出るgm__capはマウス前提なので、タッチ端末では常時表示か別途タップで開く工夫を足すと、スマホでも案件名が読めます。columns方式は左から順ではなく列ごとに縦に流れる点に注意し、見せたい順序が重要な場合は並びを確認します。各imgにはwidth・heightと意味のあるalt、loading="lazy"を付け、表示のがたつきと読み込み負荷を抑えます。
よくある質問
マソンリーの順番が思った通りに並びません。
CSS columnsは列ごとに縦方向へ要素を流すため、見た目の読み順が左から右にはなりません。順序が重要なら、項目数を列数で割り切れるように調整するか、JavaScriptのマソンリーやCSS gridのmasonry実装に置き換える方法があります。
スマホだとホバーの案件名が見られません。
ホバーはマウス操作が前提です。タッチ端末では案件名キャプションを常時表示にする、または各画像をタップで開閉できるようにするとカバーできます。狭い画面ではcolumnsの段数が2列・1列に減る設計なので、文字が小さくなりすぎないかも確認します。