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

全てのパーツを外枠に納めるのがCSSレイアウトの基本。

CSSレイアウト実践講座

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

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

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