素人珈琲

< 新しい記事

新着記事一覧(全70件)

過去の記事 >

December 26, 2005

HTML教えます　その７

(2)

テーマ：ホームページ作成の悩み(550)

カテゴリ：ホームページ作成教室

そろそろ「 文字をテロップのように動かして表示する 」にも飽きてきたころなので

「 画像とテキスト（文字）の位置調整 」に戻りたいと思います！

さぁ今回は応用ではなく、基礎をいくつか紹介します

テキストの画像への回り込みを解除するには
　意味が分からない人もいるでしょうが、「回り込み」とは、「HTML教えます　その３」で使ったテクニックのことです（まだ見てない人はコチラ）
　この「回り込み」を解除しないと、ずっとテキストは画像に沿って表示されます。
　そのために <br clear="○○">
　"○○"には
"left" 　：左側画像の回り込みを解除します
"right" 　：右側画像の回り込みを解除します
"all" 　　：両側の画像の回り込みを解除します

まぁ実際にやってみましょう

HTML	<img src="http://image.jpeg" width="60" height="60" align="left" hspace="10">この狸は、自宅の庭に飾ってある置物の狸です。 <br clear="left"> 最近、この狸が我が一家でブームなのです。それは、ただの狸にしか見えないこの置物が何と・・・
表示	この狸は、自宅の庭に飾ってある置物の狸です。最近、この狸が我が一家でブームなのです。それは、ただの狸にしか見えないこの置物が何と・・・

またこのとき、画像と回り込み以下のテキストとの間隔（たぬきの画像と「最近、この…」の文章の間隔）がせまいと思ったときは、<vspace="○○"> を用いましょう。
もちろん、この"○○"の中には数字が入ります

HTML	<img src="http://image.jpeg" width="60" height="60" align="left" hspace="10" vspace="10" >この狸は、自宅の庭に飾ってある置物の狸です。<br clear="left">最近、この狸が我が一家でブームなのです。それは、ただの狸にしか見えないこの置物が何と・・・
表示	この狸は、自宅の庭に飾ってある置物の狸です。最近、この狸が我が一家でブームなのです。それは、ただの狸にしか見えないこの置物が何と・・・