サイトに画像を並べる時に雑誌みたいに綺麗に画像を横並びにしたい！
しかし、実際支給された画像は大きさがバラバラで、デバイスの幅によっては高さや幅が違ってガタガタになってしまったりすることがあります。デバイス間での差がなく、同じ高さ、決まった余白で雑誌のように綺麗な見た目で横並びにするにはどうするべきか。よくやり方を忘れてしまうので、メモにします。
※2025年2月現在のやり方を載せています。
Flexbox でのやり方
横並びといえばポピュラーなのがFlexboxですね。いくつかのやり方を考えてみます。
flexbox 画像の幅、高さが元々綺麗に決まっている場合
デザインとして、もらう画像の大きさがしっかり決まっている場合です。計算して並べることができます。
写真要素の幅がそれぞれ違う、高さが同じ
デザインでが厳密に決まっている場合は、それぞれの幅を親要素のパーセントから計算します。
よく使うのは、親要素からの割合（パーセント）で書くパターンと、デザインを作った際のキャンバスサイズに対してvwで計算する方法です。コンテナクエリのqwを使ってみるのも便利かもしれないですね。今回は親要素を基準にパーセントで書きます。
例題：最大幅800pxの中に、幅310px高さ100pxの画像と、幅450px高さ100pxの画像を横並びで、写真の間の余白が20px
html
<div class="flex1">
<img class="img1" src="画像" alt="">
<img class="img2" src="画像" alt="">
</div>
CSS
<style>
img {
display: block;
}
.flex1 {
display: flex;
gap:2.5%;
}
.img1{
width: 38.75%;
height: auto;
}
.img2{
width: 58.75%;
height: auto;
}
</style>数年前まではmargin-rightなどで余白をつけて、最後は余計な余白が入ってしまうのでlast-childをmargin-right:0;をつけて打ち消すなどの処理をしておりましたが、gapというCSSが使えるようになったので、そちらの方が効率がいいと思います。
参考：https://qiita.com/kiita_chi/items/b7b278fff276c4bb6eab
写真要素の高さがばらばら、綺麗に中央揃えで配置したい。
やり方はいくつかあります。
- align-item:center;を使って揃える方法
- 幅を決め、object-fit:contain;で高さを幅に合わせて縮小させる方法
- positionを使って真ん中に揃える方法
- 余白を計算してpaddingを使って真ん中に揃える方法
など。ここでは、一番シンプルなalign-itemを使ってみましょう。
ちなみに、Flexboxは初期値だと以下の感じに自動的に画像の高さが伸びてしまいます。
例題：幅800pxの中に、幅310px高さ100pxの画像と、幅470px高さ50pxの画像を横並びで、写真の間の余白が20px。画像の位置は高さの中央揃え
html
<div class="flex2">
<img class="img1" src="画像" alt="">
<img class="img3" src="画像" alt="">
</div>
CSS
<style>
img {
display: block;
}
.flex2 {
max-width:800px;
display: flex;
align-items: center;
gap:2.5%;
}
.img1{
width: 38.75%;
height: auto;
}
.img3{
width: 58.75%;
height: auto;
}
</style>初期値で高さが伸びている仕様はalign-itemsがstretchになっているからだそうです。私はこの仕様を知らずに長いことひっかかっており時には面倒な計算をしておりました。いろんなやり方がありますが、まずはalign-itemをお試しください。
参考：https://moshashugyo.com/media/flexbox-img-extend
写真要素の幅と高さがばらばら、綺麗に中央揃えで配置したい。
幅をmin()を使って最大幅とレスポンシブの幅を設定する。justify-content:center;を使って中央寄せにする。
例題：幅800pxの中に、幅300px高さ80pxの画像と、幅400px高さ50pxの画像を横並びで、写真の間の余白が20pxで中央に寄せたい。また、画像の位置は高さの中央揃え
html
<div class="flex2-2">
<img class="img1" src="画像" alt="">
<img class="img3" src="画像" alt="">
</div>
CSS
<style>
img {
display: block;
}
.flex2-2 {
max-width:800px;
display: flex;
align-items: center;
justify-content:center;
gap:2.5%;
}
.img4{
width: min(38.75%, 300px);
height: auto;
}
.img6{
width: min(58.75%, 400px);
height: auto;
}
</style>要素を真ん中寄せにしたい時もよくありますよね。全体幅を計算してmargin:autoで寄せて……とめんどくさいことをしなくても、justify-contentを使用すると自動で真ん中に寄せてくれます。ただし、要素間の幅は指定しなくてはいけないので、どちらにせよ幅は計算して指定しておく必要がありそうです。
flexbox 画像の大きさがバラバラだけど見た目の幅、高さを合わせる場合
規定の幅、規定の高さを計算して決め、object-fitを使用する。
高さは同じで、幅がバラバラの場合
例題：幅800pxの中に、幅310px高さ100pxの画像と、幅400px高さ100pxの画像を横並びで、写真の間の余白が40px
Coming soon
幅は決まっていて高さがばらばらの場合
例題：幅800pxの中に、幅310px高さ100pxの画像と、幅470px高さ50pxの画像を横並びで、写真の間の余白が20px。ただし、高さを100pxに揃えたい。
高さも幅もばらばらの場合
例題：幅800pxの中に、幅300px高さ80pxの画像と、幅470px高さ50pxの画像を横並びで、写真の間の余白が20pxで、幅を埋めたいし高さを100pxに揃えたい。
coming soon
参考：https://shu-sait.com/size-chigau-gazou-soroeru/
https://note.com/toya_n/n/n6b16f418bb1b
まとめ
今回は、横並びでよく使うFlexboxでまとめてみました。他にもfloatとinline-blockなどのやり方が浮かびますが、やっぱり上記の方法が万能すぎて最近あまり使わないので、画像同士の横並びで使うメリットをあまり感じません。ここでは省略します。次回は、CSSgridを使ってみる方法もまとめてみます。
