HTMLで画像を横に並べる方法｜スマホでも崩れない配置テクニック

ホームページで複数の画像を並べたいとき、

こんな悩みはとても多いです。

そこでこの記事では、初心者でもすぐできる方法と、スマホでも崩れないコツをわかりやすく解説します。

HTMLに少し指定を加えるだけで、画像は簡単に横並びにできるので、ぜひ参考にしてくださいね！

HTMLで画像が横に並ばないよくある原因

まずは、HTMLで画像が横に並ばないよくある原因からお伝えします。

ここで、うまくいかない理由を見てみましょう。

何も指定していない

<img src="img1.jpg">
<img src="img2.jpg">

これだと縦に並ぶことがあります。

改行が入っている

改行やスペースがあると、意図しないズレが出ることがあります。

サイズを固定している

固定サイズだと、スマホで崩れやすくなります。

HTMLで画像を横に並べる一番簡単な方法

次に、HTMLで画像を横に並べる一番簡単な方法をご紹介します。

まずはとてもシンプルな方法です。

<img src="img1.jpg" style="display:inline-block;">
<img src="img2.jpg" style="display:inline-block;">

これだけで横並びになります。

なぜ横になるのか

display:inline-block は、横に並びながらサイズも持てる指定です。

スマホでも崩れないおすすめ方法

スマホでも崩れないおすすめ方法をご紹介します。

スマホ対応したいなら、割合指定がおすすめです。

<div style="text-align:center;">
  <img src="img1.jpg" style="width:45%;">
  <img src="img2.jpg" style="width:45%;">
</div>

これで画面サイズに合わせて自動で縮小されます。

画像の間にすき間を入れる方法

画像の間にすき間を入れる方法をご紹介します。

少し間隔を空けるだけで見た目がよくなりますよ。

<img src="img1.jpg" style="margin-right:10px;">

よくある失敗と直し方

よくある失敗と直し方についてお伝えします。

幅をpxで固定している

👉 割合指定に変えるとスマホ対応できます。

改行でズレている

👉 同じ行に書くか、inline-blockを使いましょう。

はみ出してしまう

👉 widthを%指定にすれば解決します。

初心者向けの横並び基本形について

最後に、初心者におすすめの横並び方法をご紹介します。

パソコン向け

<img src="img1.jpg" style="display:inline-block;">
<img src="img2.jpg" style="display:inline-block;">

スマホ対応向け（おすすめ）

<div style="text-align:center;">
  <img src="img1.jpg" style="width:45%;">
  <img src="img2.jpg" style="width:45%;">
</div>

まとめ

「HTMLで画像を横に並べる方法｜スマホでも崩れない配置テクニック」はいかがでしたでしょうか？

HTMLで画像を横に並べるのはとても簡単です。

これだけで、ほとんどの崩れは防げますよ。

ホームページは画像があると、読んでくれる確率も高くなります。

私も、ホームページでは画像をたくさん使うので、ここでお伝えしたことをぜひ参考にしてくださいね！