« 今朝のラジオニュース | メイン | 有明山のあさづくよ »

2008年02月25日

Floatあれこれ

スタイルシートに不可欠なフロート定義あれこれ

22日の講習会の後、Floatに関する質問を受けた。分かっているようで答えに窮してしまった。tableを使わずに2カラム、3カラムのレイアウトを作ろうとする場合にも Floatは必須となる。この際、まとめておこう。

Floatとは、HTMLの要素を左右に回り込ませるためのプロパティ。float: left と記述すると、指定された要素を左に回り込ませることができる。左に画像、右に文章の場合は

   <p style=float:left;>左に画像</p>
   <p>右に文章</p>
という具合だ。

画像と文章なら上の書き方で問題はないが、文章同士を float すると上の例では float しなくなる。float させるには、要素の幅を指定する必要があるからだ。

   <p style=float:left; width:150px;>左の文章</p>
   <p>右の文章</p>
float1.jpg

floatは要素を左右に回り込ませる。回り込む側の要素には幅widthの指定が必要

floatと高さの関係

さらに、floatでページ全体をレイアウトしようとすると、左右の高さが問題になってくる。上の例で右の文章が長くなった場合

   <p style=float:left; width:150px;>左の文章</p>
   <p>いろいろと・・・きました。</p>
float2.jpg

右の文章が、左の文章の下に表示される。これは IE互換モードでも同じ。仕様によるものだ。左にサイドメニュー、右に本文というレイアウトをfloatで作るようなケースでは、このままだと本文がメニューの下に回り込んで表示されてしまう可能性がある。いろいろと回避する手はあるが、その一つは、本文にも幅を指定して、右に回り込ませるというものだ。

   <div style=float:left; width:150px;>左の文章</div>
   <div style=float:right; width:200px;p>いろいろ・・・ました。</div>
float3.jpg

2カラムレイアウトなどでFloatを使う場合は、上記のような対応で左右の幅を固定してお互いの長さ=高さに関係なく表示できる。ただし、どちらにも幅 width を指定することになるので IE互換モードに悩まされることになるが・・・・・・ この項 続く

自然派診断士 佐藤

投稿者 itleader1 : 2008年02月25日 12:22

トラックバック

このエントリーのトラックバックURL:
http://www.zukudas-m.com/mt/mt-tb.cgi/600

コメント

コメントしてください




保存しますか?