今までのブログでは、ファーストビューやグローバルメニューの作成をまとめていました。
ファーストビュー が終わったら、次はその下のレイアウトを作っていくことになります。
割とよくあるのが「このようなことでお困りではないですか？」という共感エリア。
そこで要素が3つほど横並びになっているパターンがありますが、それを作っていきたいと思います。
See the Pen
column-gap flexbox by bat (@bat20190608)
on CodePen.
やることは、下の2つです。
- display: flex; で横並びにする
- column-gap を使って要素間の余白を均等に設定
display: flex; で横並びにする
flex boxについては、詳細に書いてあるサイトがたくさんありますので、ここでは簡単に「要素を横並びにできる方法」と紹介しておきます。
(縦並びの指定もできます)
こちらのサイトはとてもわかりやすく書いてありますね。
https://webdesign-trends.net/entry/8148
均等に要素を並べる方法としては、よくあるのがjustify-content: space-between; で横幅全体を使って均等割する方法でしょうか。
この方法でも良いのですが、あくまで「均等割」なので、要素のサイズによっては間延びした感じになったり、やけに詰まった感じになってしまうことがあります。
column-gapで要素の間隔を自動調整
column-gap のいいところは、ギャップのサイズを変更すると、自動で要素のサイズを調整してくれるところです。
ただし、imgにobject-fit: cover; を設定しておくことが必要なのでお忘れなく。
（↓object-fit: cover; についてのおすすめサイト）
https://www.webcreatorbox.com/tech/object-fit
これにより、ディスプレイのサイズが変わっても画像間の幅は変わらず、画像自体が可変することでバランス良く配置してくれます。
一般的には「画像にmargin-rightを設定して、最後の画像だけlast-child でmarginを0にする」みたいなのが主流だったと思います。結構理解するのに時間がかかります。
とっても簡単なので、ぜひ活用してみてください！
