CSSレイアウト崩れの原因 - パーツの合計幅が外枠よりも大きい

CSSレイアウト崩れの原因 - パーツの合計幅が外枠よりも大きい

CSSレイアウトを行う際は、「幅の取り方」が重要になります。外枠を作り、その中にメインスペースやサイドバーを入れていくことになるわけですが、メインスペースやサイドバーの幅の合計値が、外枠に指定した幅よりも大きい場合、レイアウトが崩れてしまいます。

[例：崩れが生じる幅の指定]
外枠＝750px、メインスペース500px＋サイドバー300px＝800px
750pxの外枠の中に入らない＝崩れる！

この例を、崩れないように修正すると次のようになります。

外枠＝800px、メインスペース500px＋サイドバー300px＝800px

もしくは

外枠＝750px、メインスペース480px＋サイドバー270px＝750px

このように、メインの幅＋サイドの幅が外枠の幅を超えていなければ正常に表示されます。

しかし、上記の例のようにメイン＋サイドと外枠が同じ幅になった場合、1pxのずれで崩れが生じてしまいますし、見た目もメインスペースとサイドバーの間の余白がないため見づらいものとなってしまいます。

そこで、メインスペースとサイドバーの間に20pxの余白を取ろうとした場合、幅の指定は次のようになります。

外枠＝820px、メインスペース500px＋サイドバー300px＋余白20px＝820px
外枠＝750px、メインスペース480px＋サイドバー250px＋余白20px＝750px

このように、ただ外枠とメイン＋サイドの幅を合わせるのではなく、余白も考慮して外枠の幅を決定するのが重要です。

[各パーツの幅を求める計算式]
メインスペース＋サイドバー＋余白の合計　＝　外枠