テーブルを使わないレイアウト試作

ほとんどが<URL:http://adp.daa.jp/>を参考にしています。それを、馬鹿な私でもあとでわかるように詳しくメモします。

まずはざっくりレイアウトのみのcss

上記のようなレイアウトを作るとして、

これらを使って、以下のようなhtmlファイルを作成

Design without table

main]]>のタイトル
]]>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
]]>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
]]>うううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう

その結果(僕のFirefoxでは)以下のようなものになった。初期化用の

があるので、indentなども全くされていないので(こうしておかないと、ブラウザごとにデフォルトが微妙に違うので、困るらしい)、少々手を入れていこう。

zukkoke.gifを用意して、ブラウザで見ると

つまり、dtでback-nav-t.pngで枠の上を、navigationの間は枠の両脇を表示(repeat-yで連続表示)。ddで枠の下を表示。この方法だと、Menuの枠とNewsの枠の真ん中に何か別のものを入れることは出来ない。

背景色により、字の色と重なって見えにくくなっていたり、インデントがないので、その辺をちょこちょこ修正して、

]]>

結論

結局、テーブルを使わずにcssでレイアウトする1つの方法として、#containerのボックスの中に、#navigationと#contentのボックスを入れ込み、そのどちらもfloat:left;とします。

その場合、左フロートの下に、更に左フロートがある場合は、その左フロートを手前の左フロートの右に置きます。フロート同士は、インライン要素と違って、上外辺をそろえます。左フロートの右に置けない場合は、次はその下の行の一番左に寄せます。右フロートも同じです。ただし、左右逆ですが。

つまり、結局のところ、#contentボックスは#navigationの右に配置されるというわけです(狭い場合には、後述するように下に置かれます)。

そして、#footerではclear: both;でfloatを解除しています。

さて出来た(ダサイレイアウト)ものをいくつかのブラウザで確認すると・・・・

Fire Fox

Netscape 7.1

Opera

Fire Foxでの横幅が短い場合

横幅が短い場合、floatの設定だと、横に配置されていたものが、縦に並んでしまいます。これを「レイアウトが壊れた」と判断するのか、段々css対応になってきている携帯電話のブラウザーで、「そのまま携帯の狭い幅でも見やすい」と判断するかは難しいところです。