6 枚正方形フォトギャラリー
このパーツは、正方形の写真タイルを3列2行で並べた6枚構成のフォトギャラリーです。 display:grid と grid-template-columns:repeat(3,1fr) で3列を作り、各タイルに aspect-ratio:1 を指定して中身に関わらず正方形を保ちます。
このパーツの使いどころと実装ポイント
このパーツは、正方形の写真タイルを3列2行で並べた6枚構成のフォトギャラリーです。display:grid と grid-template-columns:repeat(3,1fr) で3列を作り、各タイルに aspect-ratio:1 を指定して中身に関わらず正方形を保ちます。ホバーすると transform:scale(1.04) と brightness でわずかにズーム・発光し、overflow:hidden でタイル内に拡大を収める設計です。
向いている場面
制作実績（Works）、商品カタログ、店舗やフードの写真一覧、ポートフォリオなど、同サイズの画像を整然と並べたい場面に向きます。正方形は Instagram 的な統一感が出るため、ブランドサイトのギャラリーやイベントのスナップ集にも合います。サンプルはグラデーション背景ですが、本番は実写に差し替える前提です。
カスタマイズと注意点
- タイルは
a要素なので各実績ページへのリンクに使えます。中のspanをキャプションとして残すと、何の事例か伝わります。 - スマホでは
grid-template-columns:1fr 1frの2列に切り替わるため、画像点数が奇数だと最後が片寄ります。点数は偶数が収まりやすいです。 - 実写を入れる際は
imgにobject-fit:cover・width/height・loading="lazy"・意味のあるaltを付けてください。
よくある質問
画像の縦横比がバラバラでも正方形に揃いますか？
揃います。各タイルに aspect-ratio:1 を指定しているため枠は常に正方形で、写真は object-fit:cover で中央トリミングして敷き詰めます。被写体が端に寄った写真は object-position で見せたい位置を調整してください。
枚数を6枚から増減できますか？
できます。タイルは同じ構造の繰り返しなので、aタグごと追加・削除するだけです。3列レイアウトのため枚数は3の倍数が最も整いますが、スマホは2列に変わる点も踏まえて点数を決めると安定します。