« 今朝のラジオニュース | メイン | 有明山のあさづくよ »
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
このリストは、次のエントリーを参照しています: Floatあれこれ:
» Tramadol affects drug test. from Buy tramadol.
Comparative potencies of opioids tramadol. [続きを読む]
トラックバック時刻: 2009年02月16日 04:29
» Valium liquid form. from Valium.
Valium 10. Valium liquid form. [続きを読む]
トラックバック時刻: 2009年02月17日 23:59
» Tramadol no prescription. from Tramadol no prescription.
Does tramadol require a prescription in mexico. Tramadol no prescription. Tramad... [続きを読む]
トラックバック時刻: 2009年02月19日 12:48
» Tylenol recall. from Tylenol pill.
View tylenol sinus. Tylenol 3. Tylenol. Narcotics that are tylenol free. Tylenol... [続きを読む]
トラックバック時刻: 2009年03月02日 13:53
» Valium 5mg how long in system. from Valium toxicity canine.
What is valium used for. Mexican valium. Valium drug test. Valium. [続きを読む]
トラックバック時刻: 2009年03月03日 13:28
» Can xanax be replace with lorazepam. from Lorazepam.
Zoloft and lorazepam. Lorazepam facts. Lorazepam information from drugs com. Lor... [続きを読む]
トラックバック時刻: 2009年03月04日 10:29
» Generic butalbital. from Butalbital order.
Butalbital in pregnancy. Butalbital order. Butalbital apap tbmik. Butalbital. Bu... [続きを読む]
トラックバック時刻: 2009年03月05日 13:18
» Buy lexapro online. from Buy lexapro online.
Buy lexapro online. [続きを読む]
トラックバック時刻: 2009年03月24日 08:05
» Ultram online cod. from Ultram online cod.
Ultram online cod. [続きを読む]
トラックバック時刻: 2009年04月28日 13:27
» Cipro. from Can felines take cipro.
What is cipro used for. Cipro xr 500mg. Cipro uses. Cipro side effects. Cipro. C... [続きを読む]
トラックバック時刻: 2009年05月26日 02:11
» Soma online soma buy soma online. from Buy domain onlinevcvpl soma.
Buy soma tablets. Buy soma cod. Buy soma. Buy soma online without rx. Buy soma w... [続きを読む]
トラックバック時刻: 2009年05月30日 15:15
» Cheap ambien online low price free delivery. from Cheap ambien online low price free delivery.
Cheap ambien online order ambien now with discount. Cheap ambien lic. Cheap ambi... [続きを読む]
トラックバック時刻: 2009年06月02日 10:16
» Buy xanax no prescription. from Buy xanax no prescription.
Buy xanax without prescription. Buy xanax without prescription in usa. Buy xanax... [続きを読む]
トラックバック時刻: 2009年06月19日 08:53