HTMLで画像を横並びにする方法とは【メンターが回答】

「HTMLで画像を横並びにする方法とは。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。inlineの指定をして要素を横並びにする書き方についてぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

HTMLで画像を横並びにする方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

画像が横並びになぜかなりません。指差し確認したのですが、ほかに原因があるのでしょうか?

 

該当のソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title></title>
  </head>
  <body>
    <div class="inline>
      <img src="">
    </div>

    <div class="inline">
      <img src="">
      <img src="">
    </div>
  </body>
</html>

CSS

.inline {
    display: inline-block;
}

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

メンターからの回答

横並びにならない直接的な原因はinlineの指定の位置が正しくないからです。

意図しているのは画像が3つ横並びになることでしょうか?

それでしたらシンプルに以下のような書き方で成立すると思います。

<div>
  <img src="xxx" class="inline">
  <img src="xxx" class="inline">
  <img src="xxx" class="inline">
</div>

試行錯誤は理解できますが、間接的な原因としてタグの構成があまり綺麗ではありません。

<div class=”inline”>が二重のブロックとして効いていたりしますので、divで囲う範囲を一塊として、あまり不要に囲うべきではありません。

 

関連情報

【CSS】displayの使い方を総まとめ!inlineやblockの違いは?

floatを使わずに横並びをするdisplay:inline-blockを使いこなしてみよう

 

以上、HTMLで画像を横並びにする方法について解説しました。

TechAcademyでは、現役HTML/CSSエンジニアのメンターが質問にすぐ回答します。

他にもPHPとHTMLをまとめてコメントアウトする方法をメンターが回答しているので、合わせてご覧ください。

 

回答してくれたメンター

メンターKN

エンジニアとして案件を受注し会社を経営しています。

Ruby on Railsでの開発を中心に、サーバーの保守運用も行っています。

 

田島悠介

HTMLで画像を横並びにする方法について解説したよ。

大石ゆかり

imgタグは元々インライン要素でしたっけ?

田島悠介

そうそう。横並びには、他にもfloat属性やdisplay属性などもあるよ。

大石ゆかり

わかりました。ありがとうございます!

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

CSSの書き方やWebデザインのスキルなど基礎から学ぶことができます。

独学に限界を感じている場合はご検討ください。