HTMLで画像を3つ並べる方法

HTMLを使って画像を3つ並べ、3つの画像がそれぞれ左中右寄せになり、それぞれの画像の下にテキストを入れる場合はどのようなコードになりますでしょうか？
ご回答宜しくお願いいたします。

No.2 回答者： fujillin 回答日時： 2018/01/12 10:29

こんにちは

＞どのようなコードになりますでしょうか？
定型のものが決まっているわけではないと思います。
まず、文章の内容に合ったマークアップを行います。
それに合わせて、CSSでレイアウトすれば良いです。

左右、中央に並べる方法は、text-align:center;でセンター寄せしておいて、左右のものをfloat:left/right;で表示するとか、position: absolute;にして直接位置指定するとか、いろいろあると思いますが、以下はflexboxを利用した一例です。

マークアップをどのようになさりたいのかがご質問文からはわからないので、とりあえずul、liのリスト形式にしています。
画面のサイズによって、画像サイズや、テキスト+画像のひとまとまりをどのように制御なさりたいのかも不明なので、そのあたりも適当です。
（画面サイズに関わらず、常に横並びになることを想定）
・・・ということで、あまたある中の一例として…

【 HTML 】
<ul id="test">
<li>
<figure><img src="A.jpg" alt="" />
<figcaption>テキスト11111</figcaption>
</figure></li>
<li>
<figure><img src="B.jpg" alt="" />
<figcaption>テキスト22222</figcaption>
</figure></li>
<li>
<figure><img src="C.jpg" alt="" />
<figcaption>テキスト33333</figcaption>
</figure></li>
</ul>

【 CSS 】
#test, #test * { margin: 0; padding: 0; }
#test { list-style-type: none; display: flex; justify-content: space-between; }
#test li { max-width: 33%; }
#test img { width: 100%; }


※ flexboxに関しては、以下あたりが参考になるかと思います
http://coliss.com/articles/build-websites/operat …

No.1 回答者： LEVELUP100 回答日時： 2018/01/11 16:30

こういった情報ページがあります。

活用してみてください。

HTMLタグリファレンス（目的別）
http://www.htmq.com/html/indexm.shtml