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

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

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

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

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

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

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

floatを使う場合

• cfdn_06
• arrow_o
• cfdn_10
• sharpgreen

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

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

positionを使う場合

• cfdn_12
• cfdn_13
• bluebird
• monotone

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

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

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

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

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

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