タグ別アーカイブ: バグ

[css] CSSレイアウトのあれこれ(カラム落ちとか)



 

CSSで「カラム落ち」をしょっちゅうやってしまうので、
その回避方法を含め真面目に勉強しようと思う。

そもそも、あの現象をカラム落ちと言うことすら知らなかったのですが。。。


問題を見つける為に見る順番として、今回のことから学んだこと。

  1. 自分の書いたソースにケアレスミスが無いか探す(これでした・・・orz)
    閉じタグが1個多いだけで結果は変わります。
  2. …こんな結果だったので、この先は無いのですが
    その際に調べたサイトなどを今後の為に以下に記載します。

CSSレイアウトの定石 WinIE6バグ回避法
http://mb.blog7.fc2.com/blog-entry-83.html

floatは「回り込み」ではない
http://mb.blog7.fc2.com/blog-entry-61.html

2カラム(2段組)レイアウト
http://www.geocities.jp/multi_column/practice/2column1.html

IEのfloatに関するバグ
http://www.coolwebwindow.com/tips/tips_css/tips_css004.php

CSSバグとは何か
IE 6(一部IE 7も含む)のCSSバグ
http://10prs.com/CSS/css-bug.html
ここにカラム落ちについて一文書いてある

なので「カラム落ち」で検索

IE6でのカラム落ちへの対処法
http://toolog.net/web-design/ie6-column.html

float を使った2段組レイアウト(padding を持ちながらカラム落ちを回避する例)
http://www.escafrace.co.jp/sample/css/layout/0005.html


CSS3 スタンダード・デザインガイド おすすめ商品
CSS3 スタンダード・デザインガイド