CSSやhtmlで画像を横並びにする方法３選

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

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

そんなときに使える「CSSやhtmlで画像を横並び2列にする方法」を3つ紹介します。

「CSSはよくわからない！htmlだけで画像を横並びしたい！」

という方のためにhtmlだけで横並びする方法も解説します。

また、レスポンシブ対応も可能です。さらに中央寄せの方法も解説します。

画像の余白も調整するにはこちら↓

画像の高さをそろえるにはこちら↓

画像と文字を横並べするにはこちら↓

【htmlだけ】そのまま画像を横並び

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="">

メリット

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

デメリット

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

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

左右中央寄せ「text-aling:center」

imgはインライン要素であるため親要素にCSS「text-aling:center」を指定すると左右中央寄せができます。

<style>
.example{
    /*コレ*/text-align: center;
    border: 1px solid #999;
    padding: 10px;
    background: #f2f2f2;
}
</style>
<div class="example">
    <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="">
</div>

【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だけで実現可能です。

デメリット

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

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

左右中央寄せ「margin: auto」

tableを中央寄せするにはCSS「margin: auto」を指定します。

写真のサイズによってtableの幅がいっぱいのときは当然中央寄せできません。

<style>
.example2{
    /*コレ*/margin: auto;
    border: 1px solid #999;
    background: #f2f2f2;
}
</style>
<table class="example2">
    <tr>
        <td><img src="https://csshtml.work/wp-content/uploads/1.jpg" width="200" alt=""></td>
        <td><img src="https://csshtml.work/wp-content/uploads/2.jpg" width="200" alt=""></td>
    </tr>
</table>

【CSS】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の基本は以下の記事で確認してくださいね。

なお、

左右中央寄せ「justify-content: center」

display:flexで指定した要素を左右中央寄せするには「justify-content: center」を指定します。

<style>
.yokonarabi2{
    display:flex;
    justify-content: center;
    border: 1px solid #999;
    background: #f2f2f2;
}
.yokonarabi2>div{
    width:30%;
}
</style>

<div class="yokonarabi2">
    <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>

上下中央寄せ「align-items: center」

display:flexで指定した要素を上下中央寄せするには「align-items: center」を指定します。

<style>
.yokonarabi3{
    display:flex;
    /*コレ*/align-items: center;
    height: 300px;
    border: 1px solid #999;
    background: #f2f2f2;
}
.yokonarabi3>div{
    width:30%;
}
</style>

<div class="yokonarabi3">
    <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>

上下左右中央寄せ

「justify-content: center」と「align-items: center」を同時に指定すると上下左右中央寄せにできます。

<style>
.yokonarabi4{
    display:flex;
    /*コレ*/align-items: center;
    /*コレ*/justify-content: center;
    height: 300px;
    border: 1px solid #999;
    background: #f2f2f2;
}
.yokonarabi4>div{
    width:30%;
}
</style>

<div class="yokonarabi4">
    <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>

折り返させる方法「flex-wrap: wrap」

display:flexはtableのように折り返さないようにすることも、ただのimgのように折り返すこともできます。

折り返させるには「flex-wrap: wrap」を指定します。

下記はPC版では折り返さず、スマホ版では2列で折り返す例です。

ブラウザ幅を狭くして確認してみてください。

<style>
.yokonarabi5{
    display:flex;
    border: 1px solid #999;
    background: #f2f2f2;
    padding: 10px;
}
@media(max-width:750px){
    .yokonarabi5{
        flex-wrap: wrap;
    }
    .yokonarabi5>div{
        width: 50%;
    }
}
</style>

<div class="yokonarabi5">
    <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>
        <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>

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

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

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

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

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

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

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

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

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

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

まとめ

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