2004/07/21
画像の横にテキストを回り込みさせる
知っている人には当たり前なんですが、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 />」と表記します。
はてなブックマークでこの記事に関する言及を見る
blogmapでこの記事に関する言及を見る
−この記事に関連しているかもしれない書籍−
21世紀の今日にえらいレガシーなHTMLですね。
＞レガシーなHTML
と私も思ったけど、ココログベーシックは「基本的に」CSS さわれないし、そういう blog ツールは多いのですよね、きっと。
御自分のサイトでいくらいい加減なタグを書こうが勝手だとは思いますが、
ある程度影響力のあるサイトの記事として、間違った手法を掲載する事は問題あるように感じました。
XHTML、空要素、理解してないのならばXTML宣言をはずす等、考慮されてはいかがですか。
テキストの回り込みをXHTML準拠で行う方法がわからなかったので使っています。それがレガシーなHTMLを利用することになった経緯ですが。そして、画像回り込みを使っているためにレイアウトが崩れているサイトをよく見かけるので書いてみました。
XHTML準拠で画像回り込みを行う方法を解説しているページなどがあるのなら、教えていただけると嬉しいです。
Movable Typeで画像アップ時に回り込みをさせるようにする改造でもalignを使ってますし。
http://juan.cocolog-nifty.com/juanlog/2004/05/post_1.html
別に「間違った手法」だとも思えないんですが、<br clear=all> をスマートにCSSで実現する方法って <br style="float:clear;"> とかするのかな。あんまり変わらないような・・・。
＞Ideal Breakさん
タグ直しておきましたのでコメント削除しました。CSSだと、それでできるんですねー。勉強になりました。
最後に/いれておくと、XHTML的にはより正しくなりますかね。
＜br/＞より＜br /＞の方がよく使われます。ブラウザ表示の関係上。
http://www.kanzaki.com/docs/html/xhtml1.html#xh-empty
このへんを参考にしてみてください。
あ、ご存知なかったんですね…。
画像の回り込みは 解除する場合は でございます。
CSS が触れるならあらかじめ回り込み用のクラスを定義するのがスマートですかね。
clear: left; は、こちらだと「投稿者：加野瀬」などが書いてある div 要素のクラスに定義しておくと、いちいち を書かなくても記事欄の底辺をぶち抜くのを防げて便利です。
あっしまった(-_-;
画像の回り込み ＜img src="xxx" style="float:left;" /＞（left/right）
回り込み解除 ＜br style="clear: left;" /＞（left/right/both）
です。
横着してプレビュー抜いたので、すみません。
あのあと、スタイルシートを使う方法を試していたら、なんで以前、floatを使うのをやめたのかを思い出しました。
連続して使った場合、回り込むテキストが画像の下端までいかない時に表示が段々になることがあったので、clear=allを使うようになったんです。
再試したら、MTの記事内では問題が発生しなかったので追記しておきます。
実際にやってみた（トリビア風に）。
うまくいきました。なるほど。
Thanks ＞ みなさま。
細かい事なんですが、HTML談義のついでに。
<と書いてありますけど、<と;も付けて書かないと、実体参照として認識されない事があります、というか認識されないのがUA的に正しい振る舞いなんですけど。
RSSリーダー(NetNewsWire)では、認識されていなかったので気づきました。
折角なので、>も>としておいた方が良いかと。XMLでは<や>エスケープ必須のようですし。
clear を適用するのを br 要素(インラインレベル要素)ではなく p 要素(ブロックレベル要素)に変更すればよいです。
何に対するコメントか書き忘れました。
> 連続して使った場合、回り込むテキストが画像の下端までいかない時に表示が段々になることがあったので、clear=allを使うようになったんです。
clear を適用するのを br 要素(インラインレベル要素)ではなく p 要素(ブロックレベル要素)に変更すればよいです。
もう解決されたかもしれませんが、私がとっている方法を紹介させて頂きます。
img .floatleft {
float: left;
margin: 0px 10px 10px 0px;
}
.clearing {
height: 0;
clear: both;
}
とスタイルシートで定義したうえで、
<img src="images/hoge.gif" alt="HOGE" class="floatleft" ... />
（本文）
<div class="clearing"> </div>
としています。との間には半角スペースをあらわす＆nbsp;が入ります。
また、あらかじめ……
<$MTEntryBody$>
<div class="clearing">＆nbsp;</div>
という風に仕込んでおくと便利かもしれません。
What is the most important information I should know about Clonazepam?
� Use caution when driving, operating machinery, or performing other hazardous activities. Clonazepam will cause drowsiness and may cause dizziness. If you experience drowsiness or dizziness, avoid these activities.
� Use alcohol cautiously. Alcohol may increase drowsiness and dizziness while you are taking Clonazepam. Alcohol may also increase your risk of having a seizure.
� Do not stop taking Clonazepam suddenly. This could cause seizures and withdrawal symptoms. Talk to your doctor if you need to stop treatment with Clonazepam.
What is Clonazepam?
� Clonazepam is in a class of drugs called benzodiazepines. Clonazepam affects chemicals in your brain that may become unbalanced and cause seizures.
� Clonazepam is used to treat seizures.
� Clonazepam may also be used for purposes other than those listed in this medication guide.
Phentermine
(FEN ter meen)
Adipex-P, Fastin, Ionamin, Obenix, Obephen, Oby-Cap, Oby-Trim, Panshape M, Phentercot, Phentride, Pro-Fast HS, Pro-Fast SA, Pro-Fast SR, Teramine, Zantryl
What is the most important information I should know about phentermine?
� Use caution when driving, operating machinery, or performing other hazardous activities. Phentermine may cause dizziness, blurred vision, or restlessness, and it may hide the symptoms of extreme tiredness. If you experience these effects, avoid hazardous activities.
� Phentermine is habit forming. You can become physically and psychologically dependent on this medication, and withdrawal effects may occur if you stop taking it suddenly after several weeks of continuous use. Talk to your doctor about stopping this medication gradually.
� Do not crush, chew or open any \"once-daily\" phentermine tablets or capsules. Swallow them whole.
What is phentermine?
� Phentermine is a sympathomimetic amine, which is similar to an amphetamine. It is also known as an \"anorectic\" or \"anorexigenic\" drug. Phentermine stimulates the central nervous system (nerves and brain), which increases your heart rate and blood pressure and decreases your appetite.
� Phentermine is used as a short-term supplement to diet and exercise in the treatment of obesity.
� Phentermine may also be used for purposes other than those listed in this medication guide.
Excerpt: 回り込むと表示が崩れます NetScapeの前身、NCSA Mosaic（モザイク）は初めて画像表示機能を可能にした画期的ブラウザでした。それまでテキスト主体だったウェブサイトを、画像を用いた彩りあるものにしたモザイクは今後も伝説として語り継がれるでしょう。 閑話休題、ウ�...
Excerpt: ウェブログの設定 デザインとか自分でイジルの面倒なので「ＭｏｖａｂｌｅＴｙｐｅ３...
Excerpt: 昨日タグで前に書いた文章（エントリーのbodyの中味）全てはここからの中の画像を...
※コメント欄で初めて書き込まれる場合でも、挨拶は必要ありません。
※その他、コメントを書き込む際はこちらの注意をご覧ください。
この記事へのTrackBack URL
※TrackBackは削除することもありますので、ご了承ください。
※その他、TrackBackについてはこちらの注意をご覧ください