画像と文字

2007/4/24 ホーム私事ですがコンピュータ

　例えばこんな画像がありますよね。こんな画像を繰り返し配置すると・・・

あれ？

あれれ？なんかヘン！

<a href="http://quickturn.jp/images/9/0/90fafe9c.jpg" target="_blank"><img src="http://quickturn.jp/images/9/0/90fafe9c-s.jpg" width="160" height="120" border="0" alt="ウマー" hspace="5" class="pict" align="left" /></a>

　ライブドアブログの画像投稿機能を使うと、こんな感じになりますよね。WYSIWYGエディタはよく知りませんけど・・・。

　で、そのalign="left"の文字。これが、文字（など）の左側に画像を回り込ませるという指令だったりするわけです。

　これを消してみるとどうなるでしょう？？

　ってこんな感じです。画像も文字のひとつとして扱われますので、一行に並ぶことになるわけです。それでは、align="left"をもう一回つけてみましょう。

　ほれほれこんな感じです。上と違いますよね。この文章の左側に画像が回り込むわけです。回り込むのは文字だけでなく画像も含まれます。

　ほらほら。こんな感じになっちゃいます。これはちょっと都合が悪いですよね。

　この回り込みを中止したいときにはどうしたらいいでしょう？

　そのために、次のようなタグがあります。

<br clear="left">

　<br>タグは言わずと知れた改行タグです。これに、clear属性をつけることによって、回り込みを終了させることができます。今はalign="left"に対応してclear="left"にしてますが、clear="all"でもいいわけです。<br clear="all">で覚えてしまうといいでしょう。これを使うと、どう変わるか見てみましょう。まずは、使わない場合。

<a href="http://quickturn.jp/images/9/0/90fafe9c.jpg" target="_blank"><img src="http://quickturn.jp/images/9/0/90fafe9c-s.jpg" width="160" height="120" border="0" alt="ウマー" hspace="5" class="pict" align="left" />　七輪で炭火焼き♪ウマー<br>
<a href="http://quickturn.jp/images/9/0/90fafe9c.jpg" target="_blank"><img src="http://quickturn.jp/images/9/0/90fafe9c-s.jpg" width="160" height="120" border="0" alt="ウマー" hspace="5" class="pict" align="left" />　もういっちょ七輪で炭火焼き♪ウマー<br>

　ライブドアブログの「投稿フォームの設定」で「改行をそのまま反映」にしていると、Enterキーを押して改行を入れたところが<br>タグに変更されます。なので、その設定の方は、<br>は「Enterを押した部分」程度に覚えておいてください。ちなみに<br>と<br />は意味的には同じです。玄人的には文句を言いたいところだと思いますが、一般人は気にしなくてもいいと思います。で、これで投稿してみると・・・

　七輪で炭火焼き♪ウマー
　もういっちょ七輪で炭火焼き♪ウマー

　ってほら！なんかヘンでしょ！というわけで、今度は<br clear="all">を使った場合。「改行をそのまま反映」の方も、改行を入れる代わりに<br clear="all">を入れればOKです。

<a href="http://quickturn.jp/images/9/0/90fafe9c.jpg" target="_blank"><img src="http://quickturn.jp/images/9/0/90fafe9c-s.jpg" width="160" height="120" border="0" alt="ウマー" hspace="5" class="pict" align="left" />　七輪で炭火焼き♪ウマー<br clear="all">
<a href="http://quickturn.jp/images/9/0/90fafe9c.jpg" target="_blank"><img src="http://quickturn.jp/images/9/0/90fafe9c-s.jpg" width="160" height="120" border="0" alt="ウマー" hspace="5" class="pict" align="left" />　もういっちょ七輪で炭火焼き♪ウマー<br clear="all">

　これでやってみると・・・

　七輪で炭火焼き♪ウマー
　もういっちょ七輪で炭火焼き♪ウマー

　このままじゃ肝心の説明の部分がぼやけてしまうと思いますので、最小限な部分だけ見てみましょうか。

<img src="http://quickturn.jp/images/9/0/90fafe9c-s.jpg" align="left">　七輪で炭火焼き♪ウマー<br clear="all">
<img src="http://quickturn.jp/images/9/0/90fafe9c-s.jpg" align="left">　もういっちょ七輪で炭火焼き♪ウマー<br clear="all">

　七輪で炭火焼き♪ウマー
　もういっちょ七輪で炭火焼き♪ウマー

これでちっとはわかりやすくなりましたかね。

　という具合に、画像のサムネイルを並べて右側に説明を書きたいっていうときには、うまいぐあいに<br clear="all">を入れるときれいになります。

HTML, ネットワーク, ブログリンク