Masonry 実績ギャラリー
これは、高さがバラバラのタイルを隙間なく敷き詰める Masonry（石積み）風の実績ギャラリーです。JavaScript を使わず、CSS の column-count:3 による段組みで実現しています。
このパーツの使いどころと実装ポイント
これは、高さがバラバラのタイルを隙間なく敷き詰める Masonry（石積み）風の実績ギャラリーです。JavaScript を使わず、CSS の column-count:3 による段組みで実現しています。各タイルに break-inside:avoid を付けて途中で分断されるのを防ぎ、margin-bottom で縦の間隔を取ることで、新聞のように高さの違うブロックが自然に積み上がります。
向いている場面
写真の縦横比がそろわない制作実績、ポートフォリオ、フォトギャラリー、商品一覧など、画像サイズが不揃いでも見栄えよく並べたい場面に向きます。すべてを同じ高さにトリミングせずに済むのが利点です。
カスタマイズと注意
- 列数は
column-countの値で変えられます。すでに@media(max-width:600px)で 2 列に減らす指定があります - サンプルはグラデーションのプレースホルダですが、実運用では
imgに置き換え、width/heightとalt、loading="lazy"を付けてください - CSS の段組みは上から下→次の列の順に流れるため、表示順と HTML の並び順がずれて見えることがあります。順番が重要なら注意が必要です
- より厳密な配置が必要なら CSS Grid や JavaScript 製の Masonry も検討できます
よくある質問
この Masonry レイアウトに JavaScript は必要ですか
このサンプルは CSS の column-count による段組みだけで動くため、JavaScript は不要です。ただし column 方式は要素が上から下、次の列へと流れるため表示順が直感と異なる場合があり、順序を厳密に制御したいときは JavaScript 製の Masonry を使う選択肢もあります。
実際の写真を入れるとき気をつけることはありますか
プレースホルダを img に置き換え、width と height の属性、意味のある alt、loading="lazy" を付けてください。サイズ属性を入れると読み込み中のガタつきを防げ、lazy 指定で画面外の画像の読み込みを遅らせて表示を軽くできます。