CSS float 回り込み | アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

CSS float 回り込み

floatの使い方です

・・・・・う~っ、うまく説明できないっす m(_ _)m



私もですが・・・

皆さん記事を書くときに画像、写真を貼り付けながら記事を書いておられると思います



floatを使うには全部記事を書いてしまってから画像、写真を配置した方がわかりやすいです

慣れてきたら貼り付けながら記事を書く等、自由に出来ると思いますが・・・・




まずは・・・・

記事を書いてしまいます・・・・


後、画像、写真を貼り付ける位置にカーソルをあてクリックしてから画像の配置をクリックする




画像フォルダを開いたとき・・・

「使用する画像の設定」が開いてなければ
クリックして開いておく →






配置で画像を右に置くか左に置くかきめて

チェックを入れてから画像を選択します


※指定なし、中央は回りこみ出来ません



                 するとこうなります →



次の画像、写真を貼り付ける位置にカーソルをあてクリックしてから画像の配置をクリックする








配置で画像を右に置くか左に置くかきめて

チェックを入れてから画像を選択します →






 ←するとこうなります






※floatで回り込みを指定したら、必ずclearで解除する必要があります

※続けて右か左で画像を配置したときには<img style="CLEAR: both; FLOAT: left; ・・・

 と、配置の前にCLEAR: both; されていますので不要です


文章の途中で回り込みを解除するには

文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。 水元公園3 文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。終、

       ↑ここで回り込みを解除するには

 <br clear="all" /> で改行にclear="all"を指定するか

 次の文章のはじめに <p style="clear: both"> で

 clear: bothをスタイルに指定するかです

始、文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。文章を画像の周りに回りこませるfloatのやりかた。


回り込みを解除するにはHTMLで赤字部分を入れます

・・・・・文章を画像の周りに回りこませるfloatのやりかた。終、<br clear="all" /></p>
<p>始、文章を画像の周りに回りこませるfloa・・・・


または


・・・・・文章を画像の周りに回りこませるfloatのやりかた。終、</p>
<p style="clear: both">始、文章を画像の周りに回りこませるfloa・・・・



<span style="clear: both"> や <div style="clear: both"> などでも可能です

記事にしていて我ながらなんて説明が下手なんだろって思います



要は、配置で右か左かを選ぶことと

clearで解除することだけです