CSS WEB制作

【CSS】画像を均等幅で横並びにする方法をわかりやすく解説します

pc画面

今回は、複数の画像を均等幅で横並びにする方法をご紹介します。

画像でもブロック要素でも、横並びにするときは「flex」を使いますね。

画像を並べたはいいが、画像が原寸で表示され、ブラウザからはみ出てしまうケースがあります。

このときの対処法を見ていきましょう。

画像のwidthを%で設定する

画像を2枚並べるのであれば、

img{
width:50%;
}

とすると、2枚の画像は同じ幅となります。

 

 

さらに3枚の場合は

width:30%;

にすると、3枚は同じ幅でちょうどよく並びます。

 

 

「%」の値はお好みで変えましょう。
もちろんデザインカンプで指定された値があるのでしたら、それにお合わせた幅に変えましょう。

 

この「%」は、親要素に対しての割合ですので気をつけましょう。

 

余白は
justify-content: space-around;
justify-content: space-between;
などで自動調整しましょう。

「%」で幅を指定すればブラウザを拡大/縮小させても自動で幅を可変させてくれます。
とっても簡単ですよね。

是非お試しください。

 

画像関連の記事も紹介しておきます。

 

独学で行き詰まっている人はテックアカデミー無料メンター相談もおすすめです。

-CSS, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5