てんぽ: floatとpositionの使い分け

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

floatとpositionの使い分け

2006年02月13日(月)

CSSで段組をやるには普通floatかpositionを使いますが、どのように使い分けるのか。 これはいろいろと試行錯誤しているうちにわかってくるものなので、「そんなこと知ってる」という人も多いかと思いますが、まとめてみます。

条件としては以下のような感じ。

  • HTMLの記述順は「(ヘッダ→)記事→サイドバー(→フッタ)」を守る
  • 記事領域とサイドバーの長さはページによって異なる(どちらが長くなるかわからない)
  • サイドバーとフッタの文字が重なる、とかは駄目

floatとpositionの違いは、「floatは下方向に融通が利く」のに対し、「positionは上方向に融通が利く」といえます。 何のことかさっぱりわからないと思いますが、つまりこういうことです。

  • フロートはソース上で自身より先に出現する要素より上には配置されない(positionとの違い)
  • clearによってフロートより後に出現する要素との重なりを制御できる(=floatは下方向に融通が利く)
  • positionにはclearに相当するものはない(floatとの違い)
  • positionを使えばソース上で自身より先に出現する要素より上に配置できる(=positionは上方向に融通が利く)

このへんを考慮して、以下にfloatとpositionを使ったレイアウトの例を、FC2ブログの公式テンプレートからピックアップします。

floatを使う場合

[cfdn_06]や[arrow_o]のように「2段ぶち抜き型」のフッタがある場合や、[cfdn_10]や[sharpgreen]のように記事とサイドバーを「枠」で囲んでいるなら、positionではなくfloatを使います。 これをpositionを使ってやろうとすると、サイドバーが記事領域より長くなったときに、フッタと重なったり、全体を囲む枠からはみ出たりします。 floatならclearで制御できます。

[cfdn_06]のように記事領域とサイドバーの境界がページの最下部まで続くレイアウトは、固定幅でなければ相当難しいはずです。 テーブルレイアウトするならこういうときでしょう。

positionを使う場合

2段ぶち抜き型フッタや全体を囲む枠が必要ないならpositionを使うのが簡単です。 サイドバーが長くなったときにフッタとサイドバーが重ならないように、フッタにはサイドバーの幅+αのマージン(左サイドバーなら左マージン)を与えます。

[cfdn_12]&[13]のように「サイドバーの幅固定かつ記事領域の幅可変」も簡単で(floatだと難しい)、 [monotone]や[cfdn_12]&[13]のようにサイドバーを記事領域より上に配置することもできます(floatでは無理)。

どちらかといえば、clearがある分、floatのほうが便利だと思います。 「サイドバー幅固定かつ記事リキッド」はpositionのほうが簡単にやれますが、floatでもその方法は確立されているので。 次回はそのあたりについて書こうかと思います。

不可能レイアウト?蛇足ですが、ではこんなレイアウトはできるか。 HTMLの記述順は「ヘッダ→記事→サイドバー→フッタ」で、サイドバーの上辺は記事領域の上辺よりも上にあり、2段ぶち抜き型フッタ付。 当然、記事とサイドバーのどちらが長くなってもフッタと重なってはいけない。

サイドバーがヘッダより下にあるなら[cfdn_06]型でfloatを使う、フッタなしなら[cfdn_13]型でpositionを使いますが……。 やはり記事とサイドバーの高さが不定というのがネックです。さて。

ちょっと不可能そうですが、実はできます。やってみようと思う人はがんばってみてください。

#70
カテゴリ:HTML・CSS
タグ[ CSS ]

同じカテゴリの記事

(-3件)

Momomo:Re: floatとpositionの使い分け

こんばんは。
>蛇足ですが、ではこんなレイアウトはできるか。
をやろうとしたのですが、自分ではさっぱりわかりませんでした。
どこかに解答はありますでしょうか・・・

  • 2007年10月08日(月)22:20:13
  • URL
  • 編集
みりばーる:解答

Momomoさん、こんばんは。
解答をアップロードしておきました。
(幅可変で作ってあるので、ウインドウサイズを変えてサイドバーとメインカラムのどちらが長くなってもフッタと重ならないことを確認してください。)

FirefoxやOperaでは仕様どおりにすんなりできるのですが、IE6対策にかなり悩みました(IE7は知らない)。

  • 2007年10月08日(月)23:38:05
  • URL
  • 編集
Momomo:Re: floatとpositionの使い分け

解答ありがとうございました。スマートにできるんですね。
でも、やはりIE6対策は難しいです。#Cはwidth/heightをつけないとサイドバーが長いときに3pxのズレが#C内に発生しますし、逆にwidth/height(_height:1pxなどのアンダースコアハックを含む)をつけてしまうと#A/#Bとの間に3pxの隙間ができてしまいます。3pxぐらい気にするなという話もありますが・・・

  • 2007年10月09日(火)09:15:19
  • URL
  • 編集
コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/70-15147b95

<<ブログでCSSによる段組レイアウトが難しい理由 | フロートとマージン辺>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

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