HTMLとCSSで画像を横並びにする方法｜初心者向けにFlexboxを解説

HTMLで画像を3枚置いたものの、縦に並んでしまった。これを横一列に並べるには、どこへCSSを書けばよいのでしょうか。

画像の横並びは、CSSのFlexboxを使うと簡単です。この記事では、何も指定していない状態からコードを少しずつ追加し、横並び、中央寄せ、余白、スマートフォン対応まで実際の表示を見ながら進めます。

先に結論を書くと、横並びにしたい画像を囲む親要素へ display: flex; を指定します。ただし、画像の幅や余白も一緒に整えないと、画面からはみ出したり窮屈に見えたりします。

画像を横並びにする基本の方法

まずは変更前の状態を確認しましょう。下の画像では、3枚の画像が縦方向に並んでいます。

HTMLでは、横並びにしたい画像を1つの div で囲みます。今回は親要素に image-list、それぞれの画像に image-list__item というクラス名を付けました。

<div class="image-list">
  <img class="image-list__item" src="mountain.jpg" alt="青空の下に広がる山">
  <img class="image-list__item" src="sea.jpg" alt="砂浜と青い海">
  <img class="image-list__item" src="forest.jpg" alt="緑に囲まれた森">
</div>

クラス名はCSSを適用する目印です。img や div へ直接指定すると、ページ内にある別の画像まで横並びの影響を受けるため、専用のクラス名を付けておくと安心です。

続いて、親要素の image-list へ次のCSSを追加します。

.image-list {
  display: flex;
}

display: flex; を指定すると、親要素の直下にある子要素が横方向に並びます。ブラウザを更新して、表示を確認してみましょう。

画像が横一列になりました。Flexboxについて先に詳しく知りたい方は、次の記事も参考にしてください。

画像の幅をそろえて余白を空ける

横並びにはできましたが、実際のWebページでは画像同士に少し余白がある方が見やすくなります。3枚を同じ幅にそろえ、画像の間へ16pxの余白を付けてみましょう。

.image-list {
  display: flex;
  gap: 16px;
}

.image-list__item {
  width: calc((100% - 32px) / 3);
  height: auto;
  display: block;
}

gap は子要素同士の間隔を指定するプロパティです。3枚の画像の間には余白が2つできるため、全体の幅から32pxを引き、残った幅を3等分しています。

height: auto; は、画像本来の縦横比を保ったまま高さを自動調整する指定です。横幅だけを変更したときに画像が不自然につぶれるのを防げます。

画像のグループを中央寄せする

画像を固定幅で表示すると、横並びにした画像の右側へ空きができる場合があります。グループ全体を中央に置きたいときは、親要素へ justify-content: center; を追加します。

.image-list {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.image-list__item {
  width: 280px;
  max-width: 100%;
  height: auto;
  display: block;
}

justify-content は、Flexboxの並ぶ方向に沿って子要素の位置を調整します。今回は横並びなので、center を指定すると画像のグループが左右の中央へ移動します。

上の画像では、3枚が中央へまとまり、画像の間にも余白が入りました。以前は2枚目だけに margin を付ける方法もよく使われましたが、現在は要素の数が変わっても扱いやすい gap が便利です。

スマートフォンでは縦並びに切り替える

パソコンではきれいに見えても、幅の狭いスマートフォンで3枚を横並びにすると、1枚ずつが小さくなってしまいます。そこで、画面幅が767px以下になったときだけ縦並びへ切り替えます。

.image-list {
  display: flex;
  gap: 16px;
}

.image-list__item {
  width: calc((100% - 32px) / 3);
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .image-list {
    flex-direction: column;
  }

  .image-list__item {
    width: 100%;
  }
}

@media から始まる部分をメディアクエリと呼びます。条件に合う画面幅だけへCSSを適用できるため、パソコンとスマートフォンで並べ方を変えられます。

flex-direction: column; は、子要素の並ぶ方向を横から縦へ変更する指定です。画像幅も 100% にすることで、スマートフォンの横幅を無駄なく使えます。

画像の高さがそろわない場合の対処法

縦長と横長の画像を一緒に並べると、高さが不ぞろいになることがあります。カード一覧などで高さをきれいにそろえたい場合は、aspect-ratio と object-fit を追加します。

.image-list__item {
  width: calc((100% - 32px) / 3);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

aspect-ratio: 3 / 2; は、表示する枠を横3・縦2の比率にそろえる指定です。object-fit: cover; を使うと画像を変形させずに枠いっぱいへ表示できます。

ただし、枠と元画像の比率が違う場合は、上下または左右の一部が切り取られます。人物の顔や商品の全体像など、切れてはいけない部分がある画像では表示を確認してください。

横並び画像のデザイン例

基本の横並びができたら、画像の見せ方も少し整えてみましょう。ここでは、画像の角を丸める方法と、画像を使ったカードデザインを紹介します。

画像の角を丸める

まずは何も装飾していない画像です。四隅が直角になっています。

画像の角を丸めるには、border-radius を使います。今回は変化が分かりやすいように12pxを指定します。

.image-list__item {
  border-radius: 12px;
}

四隅が少し丸くなり、やわらかい印象になりました。数値を大きくするほど丸みも強くなります。

border-radius: 12px;を指定すると、画像の各角に半径12pxの円弧を作るイメージで丸みが付きます。radiusは英語で「半径」という意味です。

画像と文章をカードとして横並びにする

画像の下にタイトルや説明文を置くと、記事一覧や商品一覧でよく見るカードデザインになります。完成イメージは次のとおりです。

カード全体を囲む親要素にもFlexboxを使えます。画像だけを並べる場合と同じ考え方です。

<div class="card-list">
  <article class="card">
    <img class="card__image" src="mountain.jpg" alt="青空の下に広がる山">
    <h3 class="card__title">山の写真</h3>
    <p class="card__text">青空と山の風景を紹介します。</p>
  </article>

  <article class="card">
    <img class="card__image" src="sea.jpg" alt="砂浜と青い海">
    <h3 class="card__title">海の写真</h3>
    <p class="card__text">砂浜から見える海を紹介します。</p>
  </article>

  <article class="card">
    <img class="card__image" src="forest.jpg" alt="緑に囲まれた森">
    <h3 class="card__title">森の写真</h3>
    <p class="card__text">木々に囲まれた風景を紹介します。</p>
  </article>
</div>

.card-list {
  display: flex;
  gap: 16px;
}

.card {
  flex: 1;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 12px;
}

.card__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.card__title,
.card__text {
  margin-right: 16px;
  margin-left: 16px;
}

@media (max-width: 767px) {
  .card-list {
    flex-direction: column;
  }
}

flex: 1; によって、3つのカードが利用できる横幅を均等に分け合います。カードの数や文章量を変えたときは、パソコンとスマートフォンの両方で崩れていないか確認しましょう。

alt属性には画像の内容を書く

alt 属性には、画像が表示されない場合やスクリーンリーダーで読み上げられる場合に伝えたい内容を書きます。「画像1」ではなく、「砂浜と青い海」のように内容を簡潔に表しましょう。

画像が装飾だけを目的としており、なくても情報が変わらない場合は alt="" とします。すべて空にするのではなく、その画像が本文の理解に必要かどうかで判断します。

画像を横並びにする完成コード

最後に、基本の横並び、余白、高さの統一、スマートフォン対応をまとめたコードを掲載します。まずはこのコードをそのまま試し、画像の枚数や好みに合わせて数値を調整してみてください。

<div class="image-list">
  <img class="image-list__item" src="mountain.jpg" alt="青空の下に広がる山">
  <img class="image-list__item" src="sea.jpg" alt="砂浜と青い海">
  <img class="image-list__item" src="forest.jpg" alt="緑に囲まれた森">
</div>

.image-list {
  display: flex;
  gap: 16px;
}

.image-list__item {
  width: calc((100% - 32px) / 3);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

@media (max-width: 767px) {
  .image-list {
    flex-direction: column;
  }

  .image-list__item {
    width: 100%;
  }
}

まとめ

• 画像を囲む親要素へ display: flex; を指定する
• 画像同士の余白には gap を使う
• 専用のクラス名を付け、ほかの画像への影響を防ぐ
• スマートフォンではメディアクエリで縦並びへ切り替える
• 高さをそろえる場合は aspect-ratio と object-fit を使う

最初からすべてのCSSを書く必要はありません。まず display: flex; だけで横並びを確認し、そのあとに余白やスマートフォン対応を加えると、どの指定で表示が変わったのか理解しやすくなります。