サイズがバラバラな写真達をインスタのプロフィール画面風にピシッと正方形に並べるギャラリーレイアウトを紹介します。見栄えよくもちろんレスポンシブ対応!とっても便利ですよ!
完成系
See the Pen
gallery by TAKU HONGO (@taku_webdesign)
on CodePen.
※スマホの場合は、Resultをタップしてください。
作り方
基本のHTMLコーディング
ulにgalleryクラスを付与します。
※li内は写真の数ぶん作ります。
<ul class="gallery">
<li>
<figure>
<img src="image01.jpg" alt="">
</figure>
</li>
<li>
<figure>
<img src="image02.jpg" alt="">
</figure>
</li>
<li>
<figure>
<img src="image03.jpg" alt="">
</figure>
</li>
CSSコーディング① 基本のCSS設計
余白や背景色を指定します。
* {
padding: 0;
margin: 0;
list-style-type: none;
box-sizing: border-box;
}
body {
background: #000;
}
CSSコーディング② 画像の外枠を作る
横幅いっぱいに横並びするようdisplay flex と width 100vw を指定します。
flex-wrap wrapにより、画像が折り返しされます。
li は均等3分割されるよう、%指定します。
.gallery {
display: flex;
flex-wrap: wrap;
width: 100vw;
margin: 50px auto;
}
li {
width: 33.33%;
}
CSSコーディング③ 画像を正方形に整形する
高さの縦横比を padding-top で100%指定します。
img に object-fit cover で、枠内にトリミングされます。
object-fi :coverが適用されるため、width と height を100%指定します。
figure {
position: relative;
padding-top: 100%;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
object-fit: cover;
}
できあがり!
追加:タブレット・PC表示レイアウト
このままだと、画面横幅が広くなった際に無限に写真が大きくなってしまいます。
メディアクエリを設定することで、画面横幅スマホサイズを超えた際に
ギャラリーの横幅に最大値が設定され、写真同士に余白もできて
見栄え・使い勝手がよくなります。
@media screen and (min-width:760px) {
.gallery {
max-width: 760px;
}
li {
width: calc(33.33% - 10px);
margin: 0 0 10px 10px;
}
}
ご自身でgalleryのmax-widthや、li要素のwidthやmarginを調整して
ちょうどいいレイアウトを探すのもおもしろいですね。