html 文字を画像横に表示

質問

こんにちは、
下記のhtmlソースなのですが
今だと、画像が出て、その下に情報１などが表示されますので
これを画像の横に情報１が表示されるようにしたいのですが
tableを使うのが一般的なのでしょうか？

<img src="http://～～～.jpg" alt="代替テキスト">
<div class="pico_controllers3"
style="width:300px;
height:100px;
background:#ffcccc;
border:#ff0000;
solid 1px;
margin:10px;
overflow: scroll; /* スクロール表示 */
">
<p>情報１、情報２</p>
</div>
<br/>

回答No.1

tkmojo · ベストアンサー

レイアウトはcssで行いましょう。
テーブルでのレイアウトは10年位前（cssが一般的になる前）の方法ですのでオススメできません。

画像の回り込みなどはfloatで行います。
一番簡単な例では、

【html】
<p><img src="http://～～～.jpg" alt="代替テキスト">情報１、情報２</p>

【css】
img{
float:left;
}

で出来ます。
あとはmarginなどで余白の調整を行えば完了。

回答No.2

ORUKA1951

デザインのためにHTMLを書くのではない!!!
　これだけはしっかり覚えて置いてください。HTML4.01が勧告された1999年以前から言われ続けてきたのですが、
　⇒構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
　⇒単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )
　⇒ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )

　まず、その画像の説明がどのような文書構造なのかを決めてHTML(小文字じゃない)をマークアップしてください。

[例]
たくさん画像があってその説明があるリスト
　<ul>
　　<li><img src="" width="" height="" alt="">
　　　<p>短い説明</p>
　　</li>
　　<li><img src="" width="" height="" alt="">
　　　<p>短い説明</p>
　　</li>
　・・・【中略】・・・
　</ul>

[例]
　文章中に挿絵として画像がある。
　<div class="figure">
　　<img src="" width="" height="" alt="">
　　<p class="caption">説明</p>
　</div>
　<p>本文記事・・figureはHTML5から導入される新しい要素で挿絵(画像に限らない)をマークアップする。HTML4.01ではclass名で挿絵であることを示す</p>

[商品リスト]
<div class="productList">
　<ul>
　　<li>商品名
　　　<ol>
　　　　<li>価格</li>
　　　　<li>商品説明</li>
　　　　<li>在庫</li>
　　</li>
　　<li>商品名
　　　<ol>
　　　　<li>価格</li>
　　　　<li>商品説明</li>
　　　　<li>在庫</li>
　　</li>
・・・【中略】・・・

どのようなHTMLであってもきちんとマークアップされていればスタイルシートで自由自在にデザインできますし、先でデザインを変えることもできます。

　まず、HTMLを作成してください。