私はホームページを作って9年になります。画像を横に並べることはよくあります。「画像と画像を横並び2列にしたいけど、やりかたがよくわからない!」そんなときに使える「CSSやhtmlで画像を横並び2列にする方法」を3つ紹介します。「CSSはよくわからない!htmlだけで画像を横並びしたい!」という方のためにhtmlだけで横並びする方法も解説します。レスポンシブ対応も可能です。中央寄せの方法も解説します。【html/CSS】間隔,隙間,余白,空白をあける方法デザインにおいて間隔や隙間は非常に重要なものです。htmlやCSSで上下や左右の間隔・隙間をあける方法を紹介します。画像やdivの場合と、文字の場合でそれぞれ解説します。「縦の画像でも横の画像でもキレイにならべたい!」高さの異なる画像の高さを揃える方法を解説します。この記事を読む画像と文字を横並べするにはこちら↓htmlやCSSで画像の横に文字を並べる方法6種【複数行OK】htmlやCSSで画像と文字テキストを横並びにする方法を6つ紹介します。レスポンシブ対応できます。【補足】レスポンシブ対応/画像を自動で縮小させる方法まとめ【htmlだけ】そのまま画像を横並びimg(画像)は文字と同様インライン要素であるため黙ってても横に並びます。記事内かつスマホでも大きく見せたいときはこちらがおすすめです。alt="">メリットシンプルに実現可能です。デメリット横幅によってはパソコン版では横並び、スマホ版では縦並び(自動折り返し)になります。スマホでも横並びにしたいなら他の方法にしましょう。左右中央寄せ「text-aling:center」imgはインライン要素であるため親要素にCSS「text-aling:center」を指定すると左右中央寄せができます。alt=""></div>CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【htmlだけ】table(表)で画像を横並び1行2列の表を作りそれぞれのマスに画像を入れると横並べできます。記事内かつ小さくてOKかつ2列~3列ならこちらがおすすめです。</tr></table>メリットCSSを知らなくてもhtmlだけで実現可能です。デメリット横幅はコンテンツの内容によって自動で変わります。画像サイズをそれぞれ指定し、調整しましょう。auto」を指定します。写真のサイズによってtableの幅がいっぱいのときは当然中央寄せできません。</tr></table>html・CSSで表テーブル(table)を中央寄せ(center)にする方法html・CSSで表テーブル(table)を中央寄せ(center)にする方法と中央寄せできないワケを解説します。この記事を読む【CSS】display:flexで画像を横並びCSSで横並べするならdisplay:flexがオススメです。display:flexは子要素を横並びにするCSSです。デザイン性やレスポンシブを意識するならこちらがおすすめです。</div></div>メリットCSSを駆使してイメージ通りのデザインにしやすくなります。デメリットdisplay:flexは少しクセがあるため慣れないと難しいかもしれません。display:flexの基本は以下の記事で確認してくださいね。display:flexで解決できること9選!display:flexは便利らしいがどんなときに使えるのか。横並べを中心に、いろいろなことができるので覚えておきましょう。「display:flexを使えば2列の横並びができるらしいがよくわからない」display:flexでdivを2列の横並びにする方法を解説します。center」を指定します。center」を指定します。center」を同時に指定すると上下左右中央寄せにできます。wrap」display:flexはtableのように折り返さないようにすることも、ただのimgのように折り返すこともできます。wrap」を指定します。下記はPC版では折り返さず、スマホ版では2列で折り返す例です。ブラウザ幅を狭くして確認してみてください。</div></div>【補足】レスポンシブ対応/画像を自動で縮小させる方法スマホではブラウザの横幅が小さくなります。画像(img)に対して何もしないと画像が枠を超えてはみ出てしまいます。枠内に自動で収まる方法は下記のとおりです。auto;}width:100%を指定するとimgが枠いっぱいに広がります。それだと小さいimgも必要以上に大きくなってしまいます。100%にするとimgが枠より小さいときは標準サイズに、imgが枠より大きいときは枠に合わせたサイズになります。autoを指定するとimgがアスペクト比を保って拡縮されます。画像を自動で縮小させる方法は画像の横並べで便利なのはもちろん、スマホ対応そのものにも有効ですのでぜひ覚えておきましょう。まとめ【html】画像をふつうに横並び→スマホでは縦に並べて大きく見せたいなら【html】table(表)で画像を横並び→スマホでも横並びにしたいなら【CSS】display:flexで画像を横並び→デザインを意識し調整したいなら以上、CSSやhtmlで画像を横並び2列にする方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。