画像の横に文字をうまく配置できない

質問

htmlで、画像の横に文字を配置したいのですが、下記の文章を入力しても、一行目の「タイ王国の伝統灰皿 \1,500」が画像の右下に配置され、「商品番号:a111」は画像の下に配置されてしまいます。ちなみにalign="right"と設定しても、なぜか上記（align="left"）と全く同じ配置になってしまいました。何か根本的に間違っているのでしょうか？ドリームウィーバーのデザインビュー上では思い通りのデザインになっているのですが・・・
ちなみにIEのバージョンは８です。どなたかアドバイスをお願いします。

<div id="contents">

<img src="img/商品（仮）.JPG" width="300 height="300"align="left"/>
タイ王国の伝統灰皿 \1,500<br>
商品番号:a111<br clear="left">

</div>

回答No.3

BellBell · ベストアンサー

width="300
"で閉じられてませんね。
DreamWeaverのコードビューで見たら、キーワード等は色が変わるので、思い通りのキーワード色になっていないかなどを注意して見た方がいいですね。
せっかくついてる機能を活用しないともったいない。
※というよりも、バリデーションを活用しないのは非常にもったいない。

ちなみに、imgは閉じタグなしの/を付けてるのに、brは/を付けてないのが、『統一感がないな』と思ってしまうなど、原因とは関係がない感想を持ってしまいます。

お礼

>width="300
"で閉じられてませんね。

すいません、"を入力したら一発で解決しました。

>※というよりも、バリデーションを活用しないのは非常にもったいない。

はい、今後、バリデートをかかさず行います。

>ちなみに、imgは閉じタグなしの/を付けてるのに、brは/を付けてないのが、『統一感がないな』と思ってしまうなど、原因とは関係がない感想を持ってしまいます。

やはりバリデートの実施にて「ネストのエラーです」と指摘されました。今後、気を付けます。
アドバイスありがとうございます。おかげで解決できました。

回答No.2

ORUKA1951

imgのalign属性は非推奨です。
また、仕様上、そのように動作することが多いです。
　align = bottom|middle|top|left|right ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#adef-align-IMG )
　15.1.3 浮動オブジェクト ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#floating )

　ところでこの商品説明・・一つだけですか？それともいくつもあるのですか？
　きちんと、HTMLとしてマークアップしましょう。
[例]
定義リスト ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-DL )を使うほうがよいかな？

<dl class="goods">
　<dt><img src="img/商品（仮）.JPG" width="300 height="300" alt="[商品名]" /></dt>
　<dd class="name">タイ王国の伝統灰皿 <span>\1,500</span></dd>
　<dd class="code">商品番号:<span>a111</span></dd>
</dl>
　とか、

お礼

>imgのalign属性は非推奨です。
また、仕様上、そのように動作することが多いです。

そうだったんですか。便利だと思ったんですが、今後使用は控えるようにします。

>定義リストを使うほうがよいかな？
なるほど。ただ、定義リストだとやはり文字列が画像の下にきてしまいます・・・画像の右に文字列を配置するにはalignを使うしかないのでしょうか？ちなみに上記のリンクがIEでは閲覧できないのですが、ブラウザはどちらでしょうか？

知識不足のため、いろいろと的外れな質問が多いと思いますが、どうかご容赦くださいませ。お暇があればぜひご返信をお願いいたします。

回答No.1

salonpath

画像の後に改行がないから「タイ王国の～」は画像に続けて表示され、その後の改行で商品番号が改行されているんですよね？
ソースの通りに表示されてるだけだと思いますがこちらの読み間違いでしょうか？

あとheightとalignの間に半角スペースがないけど本当にdreamweaverが自動で書き出したソースですか？

お礼

>あとheightとalignの間に半角スペースがないけど本当にdreamweaverが自動で書き出したソースですか？

ご指摘ありがとうございます。自動で書き出したものではなく、手打ちで入力していました。半角スペースを入力したら、うまく画像の横に入り込めました。あと、No.3の方がご指摘された・・・

>width="300
"で閉じられてませんね。

も原因のひとつだったみたいです。
ただ、widthをダブルコーテーションで閉じずとも、heightとalignの間に半角スペースを入れれば画像の横にうまく表示され、逆にheightとalignの間に半角スペースを入れずともwidthをダブルコーテーションで閉じればやはり画像の横に文字が正常に配置されました。
何だかむずかしいですね。ただ今回は私の完全なチェックミスでした・・・
アドバイス、ありがとうございました。おかげで解決できました。