FC2ブログ
111234567891011121314151617181920212223242526272829303101

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--------(--) |  スポンサー広告 |  CM(-) | Top▲

CSS事始め 6

float(回り込み)

「HTML 5」で記事に画像を埋め込みました。この画像に文字の回り込みをCSSのfloatプロパティで設定します。

<p>延元3年(1338)新田義貞が越前で亡くなり、三男の義宗が嫡嗣として扱われて越後に匿われました。<br>
義宗は、長じて越後・関東に於いて南朝方に与し足利尊氏に挑みます。一時は鎌倉の奪還を果たしますが、忽ち劣勢に追い込まれてしまいます。<br>
<img src="uri/css6__utsubushi.jpg" alt="白佐波神社本殿" style="float: left; width: 160px; height: 120px;" />正平23年(1336)二代将軍足利義詮と初代鎌倉公方足利基氏の死を機に、再び鎌倉を討たんと決起します。七千の兵を率いた義宗と、その鎮圧に向かった足利方上杉憲正將・能憲軍六万が沼田台地で激戦を繰りひろげました。義宗は、この戦いで右眼を矢で射ぬかれ、俯せ(うつぶし)に落馬して最期を遂げました。<br>
地元の民は、義宗の霊を「うつぶし明神」として祀り、かの地を「うつぶしの森」と称して伝えてます。<br style="clear: left;" ></p>


回り込みをさせたい文字列(あるいはオブジェクト)の直前に<img>を置いて、style属性にfloatプロパティを追加します(行番号10)。floatのプロパティ値は、"left"、"right"、"none"の三つで、初期値はnoneです。ちなみに、noneはfloatを解除することではなく、floatしないという意味です。実際にnone値を明示的に使う場面は、ほとんど無いと思います。
floatを「回り込み」の設定と表現してきましたが、実はfloarの意味の通り、"画像(オブジェクト)"を左右どちらかに浮動させるプロパティなのです。結果として、後に続く文字列なりオブジェクトが回り込むということです。
floatプロパティの影響を排除、つまり「回り込み」を解除する属性値(CSSのプロパティ)が"claer"です。解除させたい要素の開始タグにstyle属性で設定します。claerのプロパティ値は、"none"、"left"、"right"、"both"の四つで、初期値はnoneです。
例題のように、回り込みの解除を必要とする要素が続かなければ"clear"をする必要はないのですが、多くのCSSの解説ではfloatは必ず解除しましょうとなっていますので、私も記事の最後に改行タグ<br>を付けて"clear"を設定しています(行番号11)。今まで、HTMLやCSSをできるだけシンプルにと主張に反するようですが、ブログなどでは想定外のオブジェクトがfloatの影響を受けてレイアウトが崩れることもありますので、無用と思われても"claer"しています。

2014-05-31(土) |  情弱な翁(PC) Home Page事始め |  コメント(0)  | Top▲
コメントの投稿












管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。