画像 文章の流し込み表示で

ちょっと段差の違いがありますが、気にしない場合、
上と下の違いはなんですか？　どっちでも良いですか？
おすすめはどちらですか？
全く違う表示になってしまう場合もありますか？

<p><img src="cooking_3.gif" width="200" height="200" alt="料理3" style="float:right" />ここは長い文章・・・・・・・・</p>

<img src="cooking_3.gif" width="200" height="200" alt="料理3" style="float:right" />
<p>ここは長い文章・・・・・・・・</p>

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2010/04/08 12:18

HTMLの考え方から言うと、画像をその段落内の文字の代替と考える場合は、段落内に書くでしょうし。

別の段落と考えると分けた方がよいでしょう。imgはインライン要素ですから、基本的には<p></p>内にあるべきもので、全体を<div>などで括られている場合はエラーにはなりませんが、趣旨からいうと段落で囲むべき。
[段落内の画像]・・alt内の文字列に置き換えて問題ない場合
<p>魚を腹を手前に頭を左において、<img src="cooking_3.gif" width="200" height="200" alt="庖丁を魚の腹に水平に当てて" style="float:right" />引く。この時、皮だけを切るように注意しましょう。</p>
　・・・この場合、画像を読み組まない設定にしている場合でも問題ないですね。

[別段落]
<p><img src="cooking_3.gif" width="200" height="200" alt="庖丁と魚の位置関係を示す図" style="float:right" /></p>
<p>魚を腹を手前に頭を左において、庖丁を魚の腹に水平に当てて図のように引く。この時、皮だけを切るように注意しましょう。</p>

　いずれの場合も、
<p class="subFig"><img src="cooking_3.gif" width="200" height="200" alt="庖丁と魚の位置関係を示す図" /></p>
　とすれば、一括して指定できますね。

　HTMLを作成するときに、Lynx for Win32( http://lynx-win32-pata.sourceforge.jp/index-ja.h … )のようなテキストブラウザで閲覧したらどうなるかを念頭に置いて作成すると良いでしょう。これは、検索エンジンがどのように読んでいるかを理解するのに便利なので入れておいてもよいかも。

この回答へのお礼

良い例で参考になりました。ありがとうございます。

お礼日時：2010/04/11 13:29

No.2 回答者： salonpath 回答日時： 2010/04/08 12:20

htmlの意味としては上です。

dl,dt(ここにimg),dd(ここにp)を使うのもありです。

この回答へのお礼

ありがとうございました。

お礼日時：2010/04/11 13:30