【CSS（スタイルシート）】回り込んで画像、テキストなどを表示させる（float）
当サイトで使用しているスタイルシート(CSS)をご紹介
回り込んで画像、テキストなどを表示させる（float）
このサイトでもお馴染みの回りこみタグを紹介します。
彼の名前は「float」です。とってもお気に入りのお友達です。
回り込みと言われてもよくわからないと思いますので、実例を先ず紹介します。
左の画像は、この文字の左側に回りこみされてるやろ？これを回りこみと言いますねん。テーブルを使っても同じように表示させる事もできるけど、何かと役立つスタイルなんで覚えといてな～！
<p><img border="0"src="画像URL" hspace="2" width="幅"height="高さ" style="float:left;">テキスト</p>
上記のように指定してますねん。どうでっか、簡単でおますやろ？
無理やり大阪弁で説明してましたが、普通に戻します（笑）
このスタイルを連発すると、レイアウトが崩れる時があります。
この回り込みを解除するタグもご紹介しておきましょう！
連発するとどうなるか？ちょっと試しにやってみますね！
試し打ち
試し打ち2回目
こんな感じになります。こんなレイアウトもおしゃれじゃんって思う人がいるかもしれませんが、上から順番にそろえて表示させる事の方が頻繁にあると思うので、上記のようにレイアウトが崩れた時に指定するタグ（HTML）を紹介しておきます。
<br STYLE="clear: both;">
この上のタグを挿入したら、回り込みが解除されるので通常の表示位置から画像が表示されるようになります。実際にやってみましょう！
試し打ち
試し打ち2回目
どうですか、みなさん！ちゃんと並んで表示されてるでしょ？
テーブルを使っても同じようにできるので、どちらがいいのか忘れましたが、テーブルより、このスタイルを指定した方がいいって誰かに聞いたような気がするので、最近、よくつかってます。
でもテーブルの方がブラウザによって影響されにくいので、全体的なレイアウトはテーブルの方が便利だと思う今日この頃です。
このサイトのレイアウトは、上記のスタイルを使って、<div>でレイアウトしてます。
Operaとか、ネットスケープなど、IEと違う表示になるので苦戦しました（笑）
部分的に上記のスタイルを使って回り込ませるのは、それほど問題はないです。
ページのレイアウトに使うとちょっとややこしいって事です。
ブログに画像を表示させる時なんか、使うと便利ですよ！
一応、上の画像が整列している場合のタグ（ソース）も紹介しておきますね。
<p><img border="0" src="画像URL"
hspace="2" width="幅" height="高さ"
style="float: left;">テキスト</p>
<br STYLE="clear: both;">
<p><img border="0" src="画像URL"
hspace="2" width="幅" height="高さ"
style="float: left;">テキスト</p>
<br STYLE="clear: both;">
それと、上記の例で画像の高さを超えるテキストを記入した場合は、回り込み解除のスタイルを挿入しなくても済みます。上記のようにテキストが少なめの場合にレイアウトが崩れてしまします。ちょっとこの説明では分りにくいと思うので、一度、試しにテキストの文字数を多めに挿入して実験して見てください。なんとなく、分ってもらえると思います。
