知っている人には当たり前なんですが、WeblogでHTMLタグを知らない人も増えてきているでしょうからメモ的に。
画像を左や右に置いて、その余っている側に文字を回り込ませたい場合、imgタグに「valign=”top” align=”right”」(これは画像を右側に)という属性をつければokです。
また、そのままだと隙間なしで文字が配置されますが、「vspace=”n” hspace=”n”」でマージンを指定できます。
そして、意外と知られてなさそうなのがこれ。記事の下の方に回り込みを許可した画像を配置すると、画像がブロックからはみ出してしまうことがあります。また、回り込みを許可した画像を連続して配置すると、位置がどんどんずれていくことがあります。
そんな時は「<br clear=all>」というタグを入れれば、そこで回り込みが解除されます。
補足:
スタイルシートを使って下記の表現にする方がスマートです。ただ、下記の方法を使った場合、回り込むテキストが画像の下端までない時に、回り込みが解除されない現象がたまにありました。これは、imgタグに直接指定せず、スタイルシートで定義した場合に発生するようです。その時は、「<br clear=all>」を使うと対処できたため、「<br clear=all>」ばかり使うようになってました。
画像回り込み <img src=”xxxx” alt=”xxx” style=”float:right; (margin:5px;border:0px;)”>
※この場合は右側、左側にするのならleftで
画像回り込み解除 <br style=”clear:both”>
なおXHTMLドキュメントの場合、imgやbrのような空要素のタグは「<br />」と表記します。