【HTML&CSS】画像を縦並びにする方法を紹介！

どうも皆さんこんにちは！kwです！

今回は、画像（img）を縦に並べる方法をご紹介します！

普通に<img>タグを複製すると画像が縦並びになってしまいますが、<img>タグに対してCSSで一行だけ記述すると、画像を縦並びにすることができてしまいます！

「あまり使わないでしょ」と思っても、案外使います！

簡単な方法なので、あまり使わないと思っても頭の片隅には置いておくことを推奨します。

1.画像を縦並びにする方法

画像を縦並びにするには、<img>要素に対してCSSでdisplay:block;と記述してあげます。

こんな感じです↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

さらに、画像と画像の間に間隔を開ける場合は、margin-topで間隔を開けてあげることも可能です。

こんな感じです↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

とても簡単ですね。

このように、displayプロパティを使えば画像を縦並びにすることができます。

displayプロパティはとても汎用性が広く、ウェブデザイナーにとっては必須の技術なので覚えておくことを強く推奨します！

2.まとめ

いかがでしたでしょうか？

ということで今回も、最後まで見てくれた方、ありがとうございました！

分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。

ぜひ、お手隙の際に他の記事もご覧ください！