横並びの画像の下に文字を入れたいです。

Question

前提・実現したいこと

HTML5で画像を横に並べてその下に文字を書こうと思ったのですが、
文字が画像の真下に行きません。
画像の横並びは、段落を変えずに繋げて、全ての画像に"style="float:left; margin: 5px;"として余白をつけています。
横並びの仕方自体を変えたほうが良いでしょうか？
このような感じにしたいです。下手糞ですいません。

コード↓

      
<img src="GAZOU.png" width=610 alt="画像の読み込みに失敗しました" style="float:left; margin: 5px;">文字<img......（繰り返し）

Comments

[m.ts10806]

画像と文字1グループでブロックにする（例えばdivなので囲む）という追加対応は問題ないでしょうか。それともあくまで今の状況だけで対応したいのでしょうか。

[akkyyy]

情報不足でした。すいません。仰る通り画像と文字でブロック（？）にしたいです。関係あるのか分かりませんが文字はaタグで他のページに飛べるようにしようと思っています。

Answer 1

CSSで横並ぶさせるには。

【よこ並びのCSS。】
http://lopan.jp/layout/

【段組みのCSS。】
https://lopan.jp/layout2/

---

「HTML5で」とあるので、picture要素をとりあえず使ってみた。（画像の分岐をもっと意味あるものにしたら良かった）

.pict {
  max-width: 800px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-row-gap: .5em;
	grid-column-gap: .5em;
}
.pict > figure {
  margin: 0;
}
.pict > figure picture,
.pict > figure img {
  display: block;
}
.pict > figure img {
  width: 100%;
}
.pict > figure figcaption {
  font-size: .8em;
  text-align: center;
}
.pict > figure a {
  text-decoration: none;
}
@media (max-width: 480px) {
  .pict {
    grid-template-columns: 1fr;
  }
}

<div class="pict">
	<figure>
		<picture>
			<source media="(orientation: landscape)" 
				 sizes="(max-width: 480px) 100%,
					(max-width: 800px) 160px,
					800px" 
				 srcset="https://placehold.jp/24/99cc99/339933/320x160.png?text=yoko_320w_1 320w,
					https://placehold.jp/24/9999cc/333399/800x400.png?text=yoko_800w_1 800w,
					https://placehold.jp/24/cc9999/993333/1600x800.png?text=yoko_1600w_1 1600w">
			<source media="(orientation: portrait)" 
				 sizes="(max-width: 480px) 100%,
					(max-width: 800px) 160px,
					800px" 
				 srcset="https://placehold.jp/24/99cc99/339933/320x640.png?text=tate_320w_1 320w,
					https://placehold.jp/24/9999cc/333399/800x1600.png?text=tate_800w_1 800w,
					https://placehold.jp/24/cc9999/993333/1600x800.png?text=tate_1600w_1 1600w">
			<img src="https://placehold.jp/24/cc9999/993333/800x1600.png?text=none_1" alt="ALT_1">
		</picture>
		<figcaption><a href="#" title="キャプション_1">キャプション_1</a></figcaption>
	</figure>
	<!-- 以下省略 -->
</div>
```**動くサンプル：**[https://jsfiddle.net/0whcwhyk/2/](https://jsfiddle.net/0whcwhyk/2/)
**動くサンプル（表示用）：**[https://jsfiddle.net/0whcwhyk/2/show/](https://jsfiddle.net/0whcwhyk/2/show/)

---

【CSS Grid Layout を極める！（基礎編） - Qiita】
[https://qiita.com/kura07/items/e633b35e33e43240d363](https://qiita.com/kura07/items/e633b35e33e43240d363)

【CSS Grid Layout を極める！（場面別編） - Qiita】
[https://qiita.com/kura07/items/486c19045aab8090d6d9](https://qiita.com/kura07/items/486c19045aab8090d6d9)

【<figure> - HTML | MDN】
[https://developer.mozilla.org/ja/docs/Web/HTML/Element/figure](https://developer.mozilla.org/ja/docs/Web/HTML/Element/figure)

【<picture>: 画像要素 - HTML | MDN】
[https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture](https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture)

【レスポンシブ画像 - ウェブ開発を学ぶ | MDN】
[https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images](https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

【メディアクエリの利用 - CSS: カスケーディングスタイルシート | MDN】
[https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries](https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries)

【なんでもかんでも<picture>要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点 | Rriver】
[https://parashuto.com/rriver/responsive-web/picture-srcset-use-case](https://parashuto.com/rriver/responsive-web/picture-srcset-use-case)

【Google Chromeブラウザでスマートフォンサイトをチェックする：Google Chrome完全ガイド - ＠IT】
[http://www.atmarkit.co.jp/ait/articles/1403/20/news050.html](http://www.atmarkit.co.jp/ait/articles/1403/20/news050.html)

---

書いてた回答が消えた･･･。（再構成版）

Answer 2

まず最初に注意。
不要不急でインラインでCSSを書くのはやめましょう。
特に同じような指定が何個も続く場合、1つ変えるとすべて変えなければなりません。

適宜classやidなどをつけて、それらに対してstyleを指定していくと良いです。

• HTMLファイルにclassとidをつける

名前の付け方はひとまず適当なので、状況にあわせて調整してください。

<div id="parent">
    <div class="child_flame">
        <div class="child">
            <img src="～～～">
            <p>aaa</p>
        </div>
        <div class="child">
            <img src="～～～">
            <p>bbb</p>
        </div>
        <div class="child">
            <img src="～～～">
            <p>ccc</p>
        </div>
    </div>
    <div class="child_flame">
        <div class="child">
            <img src="～～～">
            <p>aaa</p>
        </div>
        <div class="child">
            <img src="～～～">
            <p>bbb</p>
        </div>
        <div class="child">
            <img src="～～～">
            <p>ccc</p>
        </div>
    </div>
</div>

div#parent{}
div#parent div.child_flame{clear:both;}
div#parent div.child{
   float:left;
   margin: 5px;
}
img {width:100px;}

画像のサイズや文字と画像の距離感、文字の揃え（このままだと左揃えになってます）が気になる場合は適宜調整してください。
レイアウトの要件によりこれでは対応しきれなくなる可能性がありますのでご注意ください。

追記：
組み方がかなーーり前の、CSS3とか関係ないレイアウトなので、
もっとシンプルに、スタイリッシュにできる可能性は非常に高いです。
並び方などもう少し具体的な要件を書いて回答を待っても良いかもしれません。

Comments

[akkyyy]

何度も要求すいません。横並びの画像の下に文字を入れることは出来たのですが、他のページの画像が縦細くなってしまいました。
具体的には400x400の画像が縦に引き延ばせれてしまいました。
Bracketsで書いているのですがバグなのでしょうか？

[dit.]

img {width:100px;}という記述ですべてのimgの横幅が100pxになっているものと思われます。
取り急ぎdiv#parent div.child img {width:100px;}とかに直すだけでも直るとは思います。widthの数値はご希望のものを。

[m.ts10806]

あすみません。私のテストで使った画像が横1000pxとかで大きすぎたものですから小さくしていました。
dit.さんの提示どおりにされるか、いっそのこと　img {width:100px;}　を外してください。

[akkyyy]

何から何までありがとうございます。widthを消したら上手く出来ました。