« 今朝のラジオニュース | メイン | 有明山のあさづくよ »
2008年02月25日
Floatあれこれ
スタイルシートに不可欠なフロート定義あれこれ
２２日の講習会の後、Floatに関する質問を受けた。分かっているようで答えに窮してしまった。tableを使わずに２カラム、３カラムのレイアウトを作ろうとする場合にも Floatは必須となる。この際、まとめておこう。
Floatとは、HTMLの要素を左右に回り込ませるためのプロパティ。float: left と記述すると、指定された要素を左に回り込ませることができる。左に画像、右に文章の場合は
<p style=float:left;>左に画像</p> <p>右に文章</p>という具合だ。
画像と文章なら上の書き方で問題はないが、文章同士を float すると上の例では float しなくなる。float させるには、要素の幅を指定する必要があるからだ。
<p style=float:left; width:150px;>左の文章</p> <p>右の文章</p>
floatは要素を左右に回り込ませる。回り込む側の要素には幅widthの指定が必要
floatと高さの関係
さらに、floatでページ全体をレイアウトしようとすると、左右の高さが問題になってくる。上の例で右の文章が長くなった場合
<p style=float:left; width:150px;>左の文章</p> <p>いろいろと・・・きました。</p>
右の文章が、左の文章の下に表示される。これは IE互換モードでも同じ。仕様によるものだ。左にサイドメニュー、右に本文というレイアウトをfloatで作るようなケースでは、このままだと本文がメニューの下に回り込んで表示されてしまう可能性がある。いろいろと回避する手はあるが、その一つは、本文にも幅を指定して、右に回り込ませるというものだ。
<div style=float:left; width:150px;>左の文章</div> <div style=float:right; width:200px;p>いろいろ・・・ました。</div>
２カラムレイアウトなどでFloatを使う場合は、上記のような対応で左右の幅を固定してお互いの長さ＝高さに関係なく表示できる。ただし、どちらにも幅 width を指定することになるので IE互換モードに悩まされることになるが・・・・・・ この項 続く
自然派診断士 佐藤
投稿者 itleader1 : 2008年02月25日 12:22
トラックバック
このエントリーのトラックバックURL:
http://www.zukudas-m.com/mt/mt-tb.cgi/600