CSSで画像を縦に並べる方法を現役デザイナーが解説【初心者向け】

CSSで画像を縦に並べる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

目次

• 画像はそのままだと横に並ぶ
• 画像にdisplay: block;を適用して縦に並べる
• display: flex;で縦に並べる
• 画像を縦に複数行で並べる方法
• 画像の縦横比を崩さないために
• 執筆してくれたメンター
• CSSを学習中の方へ

そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。

 

 

画像はそのままだと横に並ぶ

HTMLの要素は大きく分けて、インライン要素とブロックレベル要素があります。

インライン要素は横に並び、ブロックレベル要素は横には並ばず縦に並んでいきます。

画像を配置する際の<img>は、インライン要素になるので、CSSで何も設定しない場合には横に並んでいきます。

HTML

<img src="image.png" alt="">
<img src="image.png" alt="">
<img src="image.png" alt="">

表示結果

 

画像にdisplay: block;を適用して縦に並べる

ブロックレベル要素なら縦に並ぶので、<img>をブロックレベル要素にするだけで画像は縦に並びます。

上下や左右の間隔はmarginやpaddingで調整が可能です。

 

HTML

<img src="image.png" alt="">
<img src="image.png" alt="">
<img src="image.png" alt="">

CSS

img{
  display:block;
}
img:first-child{
  margin:0 auto;
}
img:nth-child(2){
  margin-left:3em;
}
img:nth-child(3){
  padding-left:10em;
}

 

表示結果

上記の例では、以下の3つの方法で、ボックスの表示位置を変えています。

• 1番目の画像は左右のmarginをautoにして中央に表示
• 2番目の画像は左に3emのmarginを適用
• 3番目の画像には左に3emのpaddingを適用

 

[PR] Webデザインで副業する学習方法を動画で公開中

display: flex;で縦に並べる

flexboxレイアウトを使用して、画像を縦に並べることも可能です。

flexboxを使う場合は、縦に並べたい画像を囲む要素（<div>など）を作って、display: flex;を適用します。

さらに、縦並びにする場合は、flex-direction: column;も適用します。

 

HTML

<div class="flexbox">
  <img src="image.png" alt="">
  <img src="image.png" alt="">
  <img src="image.png" alt="">
</div>

CSS

.flexbox{
  display: flex;
  flex-direction: column;
}

表示結果

display:flex;を適用した要素の直下に<img>を配置した場合は、align-itemsプロパティの初期値 stretch が適用されるため、画像の幅が指定されていないと画像が親要素の幅に合わせて伸縮します。

align-itemsプロパティの値でstretch以外を適用すると、画像の幅は親要素の幅に合わせて伸縮しなくなると同時に、整列する位置を指定できます。

 

HTML

<div class="flexbox flexbox-left">
  <p>ボックスを左端に整列</p>
  <img src="image.png" alt="">
  <img src="image.png" alt="">
  <img src="image.png" alt="">
</div>
<div class="flexbox flexbox-center">
  <p>ボックスを中央に整列</p>
  <img src="image.png" alt="">
  <img src="image.png" alt="">
  <img src="image.png" alt="">
</div>
<div class="flexbox flexbox-right">
  <p>ボックスを右端に整列</p>
  <img src="image.png" alt="">
  <img src="image.png" alt="">
  <img src="image.png" alt="">
</div>

CSS

.flexbox{
  display: flex;
  flex-direction: column;
}
.flexbox-left{
  align-items: flex-start;
  /*左端に整列*/
}

.flexbox-center{
  align-items: flex-center;
  /*中央に整列*/
}
.flexbox-right{
   align-items: flex-end;
  /*右端に整列*/
}

表示結果

 

画像を縦に複数行で並べる方法

flexboxを使い、flex-wrap: wrap;（折り返し） を指定すれば、複数行で折り返しながら表示できます。

親要素のボックスの高さを超えるタイミングで、画像が折り返して表示されます。

HTML

<div class="flexbox flexbox-right">
  <img src="image.png" alt="黄">
  <img src="image.png" alt="黄">
  <img src="image-green.png" alt="緑">
  <img src="image.png" alt="黄">
  <img src="image.png" alt="黄">
  <img src="image-green.png" alt="緑">
  <img src="image.png" alt="黄">
  <img src="image.png" alt="黄">
</div>

CSS

.flexbox{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height:500px;
}

表示結果

横ではなく、縦に並んでいることがわかりやすいように、3の倍数番目の画像は緑色を配置しました。

左上から縦に、親要素の高さを超えるタイミングで折り返して表示されているのが分かります。

flexboxを使うと、縦並びでもいろいろな並べ方をすることが可能です。

flexboxについては、レイアウトの調整に役立つ！CSSのflexboxの使い方【初心者向け】も参考にしてみてください。

 

画像の縦横比を崩さないために

画像を使用する場合には、縦横比を維持することが重要です。

特に、flexboxで、flexアイテムに直接画像を配置する場合は、画像の縦横比崩れに注意が必要です。

flexアイテムは高さ、または幅を合わせる性質があるので、レイアウトによっては画像の縦横比が崩れる場合があります。

崩さないようにする方法はレイアウトにもよりますが、画像のサイズの指定、align-itemsの適用、imgにheight:auto;を適用、<img>を別のタグで囲むなどの方法があります。

作りたいレイアウトによって最適な方法は異なりますので、いろんな方法を試して検証してみてください。

参考：
CSSで画像の縦横比を維持したまま拡大する方法を現役エンジニアが解説【初心者向け】
CSSでobject-fitを使った画像トリミング方法を現役エンジニアが解説【初心者向け】

 

執筆してくれたメンター

橋本真理 Web/グラフィックのデザイナー 会社・店舗等のWebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動しています。テックアカデミーではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。

 

 

CSSを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

CSSを学習していて、このように思ったことはありませんか？

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！