マンガでわかるホームページ作成

CSSやhtmlで画像を横並び2列にする方法3選(レスポンシブ対応)

「画像と画像を横並び2列にしたいけど、やりかたがよくわからない!」

そんなときに使える「CSSやhtmlで画像を横並び2列にする方法」を3つ紹介します。レスポンシブ対応も可能です。

目的に応じて使い分けてください。

私はホームページを作って9年になります。画像を横に並べることはよくあります。

なお、「画像と文字を横並べしたい」という場合は下記を参考にしてください。

【手っ取り早く】画像をふつうに横並び

img(画像)は文字と同様インライン要素であるため黙ってても横に並びます。

記事内かつスマホでも大きく見せたいときはこちらがおすすめです。

<img src="https://csshtml.work/wp-content/uploads/1.jpg" width="200" alt="">
<img src="https://csshtml.work/wp-content/uploads/2.jpg" width="200" alt="">

メリット

シンプルに実現可能です。

デメリット

横幅によってはパソコン版では横並び、スマホ版では縦並び(自動折り返し)になります。

スマホでも横並びにしたいなら下記の方法にしましょう。

【htmlだけ】table(表)で画像を横並び

1行2列の表を作りそれぞれのマスに画像を入れると横並べできます。

記事内かつ小さくてOKかつ2列~3列ならこちらがおすすめです。

<table>
    <tr>
        <td><img src="https://csshtml.work/wp-content/uploads/1.jpg" alt=""></td>
        <td><img src="https://csshtml.work/wp-content/uploads/2.jpg" alt=""></td>
    </tr>
</table>

メリット

CSSを知らなくてもhtmlだけで実現可能です。

デメリット

横幅はコンテンツの内容によって自動で変わります。

画像サイズをそれぞれ指定し、調整しましょう。

【細かい調整可】display:flexで画像を横並び

CSSで横並べするならdisplay:flexがオススメです。

display:flexは子要素を横並びにするCSSです。

デザイン性やレスポンシブを意識するならこちらがおすすめです。

<style>
.yokonarabi{
    display:flex;
}
.yokonarabi>div{
    width:50%;
}
</style>

<div class="yokonarabi">
    <div>
        <img src="https://csshtml.work/wp-content/uploads/1.jpg" alt="">
    </div>
    <div>
        <img src="https://csshtml.work/wp-content/uploads/2.jpg" alt="">
    </div>
</div>

メリット

CSSを駆使してイメージ通りのデザインにしやすくなります。

デメリット

display:flexは少しクセがあるため慣れないと難しいかもしれません。

display:flexの基本は以下の記事で確認してくださいね。

【補足】レスポンシブ対応/画像を自動で縮小させる方法

スマホではブラウザの横幅が小さくなります。

画像(img)に対して何もしないと画像が枠を超えてはみ出てしまいます。

枠内に自動で収まる方法は下記のとおりです。

img{
    max-width: 100%;
    height: auto;
}

width:100%を指定するとimgが枠いっぱいに広がります。

ただし、それだと小さいimgも必要以上に大きくなってしまいます。

max-width: 100%にするとimgが枠より小さいときは標準サイズに、imgが枠より大きいときは枠に合わせたサイズになります。

height: autoを指定するとimgがアスペクト比を保って拡縮されます。

画像を自動で縮小させる方法は画像の横並べで便利なのはもちろん、スマホ対応そのものにも有効ですのでぜひ覚えておきましょう。

まとめ

  • 画像をふつうに横並び
    →スマホでは縦に並べて大きく見せたいなら
  • table(表)で画像を横並び
    →スマホでも横並びにしたいなら
  • display:flexで画像を横並び
    →デザインを意識し調整したいなら

以上、CSSやhtmlで画像を横並び2列にする方法でした。

関連記事