- 初出
- 「闇黒日記」平成13年8月12日
- 公開
- 2001-09-04
- 最終改訂
- 2006-03-19
tableを使用しない段組:CSSによるマルチカラムデザインについての考察
情報
- 技術
- ADP: floatレイアウトでつまづかないためのTips
- CSSを用いた段組の作成のコツ
- CSS Enterprise - XHTML/CSS - 3 column layouts - Netscape 4 compatible
- CSSによる段組（マルチカラム）レイアウト講座
- スタイルシートでマルチカラム・デザインを実現する方法
- MUZO フラッシュエンターテイメント | webお助け道場 | 第1幕
- CSS段組レイアウトデザ委員会
- Box Lessons
- Suspicious lab. "CSS-段組レイアウト"
- レイアウトテーブル撤廃法
- Tableless layout HOWTO
- W3C Home Page Table-less Layout: HOWTO and FAQ
- Hotspot Plus - スタイルシートでマルチカラムデザインの実現
- 思想
- 2003-09-14 @ [Hatena::agenda]
- 段組の利点 - 3つの情報ブロックがある場合 2003-09-16T21:43:33+09:00 @ [agenda]
- 段組の必要性 2002年4月29日 @ [agenda]
- 段組レイアウト 2003年9月15日 @ [道具としてのパソコン・おやこニュース]
- 段組廃止 2003年9月14日 @ [スカンクワークス]
float利用による「マルチカラムデザイン」
HTML文書の記述。
<div id="original">
〜
</div>
<div id="critical">
〜
</div>
<div class="status">
〜
</div>
CSSの記述。
div#original
{
float:left;
width:50%;
}
div#critical
{
float:left;
width:50%;
}
div.status
{
clear:left;
}
http://members.jcom.home.ne.jp/w3c/MediaMix/tntstyle.css
float
ブロック要素を左に順次floatさせる事で、疑似的に「段組」を表現する。
Navigator 4.x
- Navigator 4.xでは#fooをfloatさせないとダメ。
float:left;するセレクタをdiv#fooとすると、Navigator 4.xに無視される羂。- 時々floatで表示が壊れるので、div#foo式の記述で逃げた方が良いかも。
Internet Explorer 4.x
- Internet Explorer 4.xでfloatはよろしくないらしい。
- float:rightすると、なぜか中身のtext-alignもrightになる。IE4のバグ。
clear
floatの解除、即、擬似「段組」の終了。
- hrで
clear:left;しようとするとMozilla Browerではまる羂。なぜdivでclear:left;するとOKなの? しかも、clear:left;指定するセレクタだが、div#hogeと云ふセレクタではなぜかMozillaの表示が壊れる。セレクタは#hogeにしなければならない。
-
hr { display: block; }を指定してやるとうまくいく事があります。
解決。
大感謝。
注意
- floatする要素の中身の量や質、それとブラウザのウィンドウのサイズ等の諸条件によって、「段組」にしたい要素が横に並ばない事があります。「並ばない方が見易いのではないか」とブラウザが推測した場合にそんな風になります。制作者は「段組」に拘泥しない方が、却って閲覧者のためになるのではないですか。
- floatする要素のwidthは、指定が無いと、全うなブラウザで拙い事になります。
