CSSレイアウト崩れの原因
- CSSレイアウト崩れの原因 - パーツの合計幅が外枠よりも大きい
CSSレイアウトを行う際は、「幅の取り方」が重要になります。外枠を作り、その中にメインスペースやサイドバーを入れていくことになるわけですが、メインスペースやサイドバーの幅の合計値が、外枠に指定した幅よりも大きい場合、レイアウトが崩れてしまいます。
- CSSレイアウト崩れの原因 - 閉めのDIVタグの過不足
CSSでのレイアウトは、DIVタグを入れ子にしてパーツを構成していきますが、コンテンツを盛り込んでいくといくつものDIVタグが重なりあい、その結果、DIVタグを閉じるのを忘れてしまったり、どれがどのDIVタグの閉めなのか分からなくなったりしてしまいます。
- CSSレイアウト崩れの原因 - 回り込み解除（clear）の指定忘れ
CSSレイアウトは、「float」というプロパティを指定し、DIVタグを左右に寄せることで配置するものですが、この「float」を解除しないと、左右に寄せたDIVタグの後に記載したものが上位のDIVタグに回りこんでしまい、崩れを生じさせます。
- CSSレイアウト崩れの原因 - ブラウザによる「padding」の解釈の違い
「メインスペース＋サイドバーの幅が外枠の幅を超えると崩れる」ということは「パーツの合計幅が外枠よりも大きい」で説明しましたが、正しく幅が設定されていても崩れてしまうことがあります。
- CSSレイアウト崩れの原因 - スペースの幅を超える画像の掲載
幅もしっかり計算して決めた、widthとpaddingも一緒に指定していない。なのに崩れてしまう！ということがあります。
- CSSレイアウト崩れの原因 - ブラウザによる「border」の解釈の違い
widthとpaddingを同時に指定したときほど大きな影響は与えにくいのですが、それと同様にブラウザによって解釈がことなるものがあります。
- CSSレイアウトはサイズ決定が命
このカテゴリでは、CSSレイアウトが崩れてしまう原因を主な6つにまとめて説明していますが、この内の4つは「なんらかの理由で予定した通りのサイズにならない」ことによるもの。このことからも、CSSレイアウトの肝は「サイズの指定」にあると言えます。