REDLINE MAGAZINE | CSSビギナー向け 陥りがちな罠Vol.02

CSSビギナー向け 陥りがちな罠Vol.02

どうしても段組・カラムが落ちる！編

cssを始めたばかりの時は誰もが一度は経験するんじゃないかというくらいの困ったネタ。原因の特定は意外とパターンが決まっているので、とりあえず以下の４つのポイントを確認。

IE6で落ちている

IE6は先日も書いた通り、少し痛いブラウザなので、全体の合計幅が100%になっていると２段組だろうが３段組だろうが落ちる。そのケースに陥った場合は全体の幅を少し縮めてみると解決する場合がほとんどだったりする。

たとえばfloatを使った２段組の場合、左右に振り分けたカラム全体を囲っているタグ(divとか)の幅が800pxの場合、左段200px、右段600px、こんな感じにしたい所だが、このままではIE6ではちゃんと左右に配置できず落ちる。つーことで、左右の幅を少しずつ減らしてみます。

どのくらい幅を減らせばいいのかはケースバイケースですがマージンやパディングなど何も指定していないとすれば、この例の場合は多分左199px、右600pxでうまくいくと思います。指定している条件次第ではそれでも落ちると思うので、その場合はさらに１ピクセルずつでも減らして確認します。%で指定している場合も同様に。

画像を入れてるボックス周辺で落ちている

例えばある段組のボックスの幅を500pxに指定しているとします。そこに幅510pxの画像をいれてしまうと･･･当然幅がその差10ピクセル分拡張されて落ちる場合があります。画像を使用しているボックス周辺が落ちた場合は画像の幅とボックスの幅を確認します。

原因がわからないけど落ちる・その１

ボックスにマージンやパディング、ボーダーを指定している場合、実際にはwidthで指定した幅以上になります。例えば本来なら幅500pxしか入らない段に「#box{width:500px;padding:5px;margin:5px;border;1px;}」こういう風にwidth以外のものを指定してしまうと、width、つまり内容が入る部分は確かに500pxですが、それプラス、マージンやパディング、ボーダー分の幅が追加されてカラム落ちになっている可能性があるのでその辺りを確認してみる。

予めデザインの段階で、余白が必要なら内容を入れる幅を確保した上でどの程度の余白が必要なのか計算したデザインにしておくと楽です。

原因がわからないけど落ちる・その２

タグの閉じ忘れなどの文法エラーを確認してみる。

複数のdivが入れ子になっている場合、結構閉じタグが1つ足りないとか、よくある。そういった場合正しくボックスがどこからどこまでかを認識できずに落ちている場合があるので、バリデータで検証して文法エラーがないかどうか確認。
>>W3C Markup Validation Service

当然css側に記述ミスがある場合も正しく表示されない可能性があるので確認してみる。
>>W3C CSS検証サービス

2007年03月12日 13:02 | Red | パーマリンク