htmlで画像を横に並べて表示

質問

画像　　　　　　　　　　　　　　　　　　　画像　　　　　　　　　　　　　　　　画像
画像に対応する文章　　　　　　　画像に対応する文章　　　　　　画像に対応する文章

みたいにして
画像と文章をそれぞれ左から並べて表示させたいのですが
どうしたらいいでしょうか？

回答No.2

ORUKA1951 · ベストアンサー

それがのような文書構造なのかだけに着目してHTMLを書かなければなりません。
「画像と文章をそれぞれ左から並べて表示させたい」
ためにHTMLを書くのではありません。
HTMLのもっと重要な根幹部分です。Hyper Text Markup Languageです。

すなわち

月々の花
　　1月　　　　　　　　2月　　　　　　　3月　　　　　4月
　サクラソウ　 ニオイスミレ　わすれな草　ローズ
　　説明　　　　　　説明　　　　　説明　　　　説明

てしたら、table(表)でマークアップすべきです。

単に画像と説明からなるリストでしたら

写真
　その説明

写真
　その説明

写真
　その説明

とマークアップすべきです。

★決してしてはならないこと!!
・画像とその説明のリストなのに、表でマークアップすること
・同様にデザインのために<div>でくくる事。
　<div>は、
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」ためのもので、決してデザインのためではありません。

　これらは、仕様書を読めば誰でもわかる形で随所に書かれています。

すなわち、それをどのように表示させたいか、
「画像と文章をそれぞれ左から並べて表示させたい」・・・
は、プレゼンテーションの問題です。
→2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )

　たぶん画像とその説明のリストをスタイルシートを用いて、「画像と文章をそれぞれ左から並べて表示させ」るのがよいと思います。さすればディスプレイの幅が小さいときは、少ない列数で、広いときは多くの列数で、さして最低でも3列、多いときでも6列とか制限をかけることもできます。

・表でもないのに表でマークアップする
・デザインためにHTMLを書かない<div>を使うとか
　これだけは、最低限しないように

回答No.1

news_0203

■方法1

テーブルを利用します。

<tabel>
<tr>
<td>画像1</td>
<td>画像2</td>
<td>画像3</td>
</tr>
<tr>
<td>画像に対応する文章1</td>
<td>画像に対応する文章2</td>
<td>画像に対応する文章3</td>
</tr>
</table>

■方法2

スタイルシートを利用します。
※少し高度になります。

<div style="float:left">
画像1
画像に対応する文章1
</div>
<div style="float:left">
画像2
画像に対応する文章2
</div>
<div style="float:none">
画像3
画像に対応する文章3
</div>