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

初心者向けにCSSで画像を縦に並べる方法について解説しています。ここではFlexBoxを利用して縦に要素を並べ、幅を合わせる方法を紹介します。サンプルで指定のしかたと画面での表示を確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSで画像を縦に並べる方法について解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

画像を縦に並べる方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

縦に1列~複数列で並べる方法

要素の配置を制御するものとして display プロパティがあります。 display プロパティに flex を指定することで Flexboxモデルに従った表示となります。

display: flex;

Flexboxモデルを使用するには、まず親要素に display: flex; 及びその他の属性を指定します。縦方向に並べるには flex-direction: column も併せて指定します。

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

 

関連記事:要素の表示の仕方を覚える!CSSのdisplayとvisibilityの使い方【初心者向け】

関連記事:レイアウトの調整に役立つ!CSSのflexboxの使い方【初心者向け】

 

縦の幅を合わせるには

さらに align-items で配置する位置を指定します。center は中央に配置することを表します。

.wrapp {
  display: flex;
  flex-direction: column;
  align-items: center;
}

HTML

<div class="wrapp">
  <img src="pic1.jpg">
  <img src="pic2.jpg">
  <img src="pic3.jpg">
</div>

実行結果は以下のようになります。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

左、中央、右寄せで並べる方法

複数の要素を左、中央、右寄せで並べるには子要素に justify-content: space-between を指定します。FlexBoxレイアウトについて、詳しくは以下も参考にしてください。

MDN フレックスボックスレイアウト

 

実際に縦に並べてみよう

今回のサンプルプログラムでは、FlexBoxレイアウトを入れ子で使い、縦横方向に配置を揃える方法を確認します。なお、親要素には分かりやすいよう枠線を設定しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>sample</title>
  <style>
    .wrapp {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      border: 1px solid red;
      width: 700px;
    }

    .wrapp div {
      display: flex;
      justify-content: space-between;
      border: 1px solid black;
      padding: 10px;
      margin: 10px;
      width: 660px;
    }
  </style>
</head>
<body>
  <div class="wrapp">
    <div>
      <img src="pic1.jpg">
      <img src="pic2.jpg">
      <img src="pic3.jpg">
    </div>
    <div>
      <img src="pic1.jpg">
      <img src="pic2.jpg">
      <img src="pic3.jpg">
    </div>
    <div>
      <img src="pic1.jpg">
      <img src="pic2.jpg">
      <img src="pic3.jpg">
    </div>
   </div>
</body>
</html>

実行結果は以下のようになります。

 

監修してくれたメンター

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。