60CSSレイアウト崩れの原因

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

CSSレイアウト崩れの原因

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

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

CSSレイアウト崩れの原因 - 閉めのDIVタグの過不足

CSSでのレイアウトは、DIVタグを入れ子にしてパーツを構成していきますが、コンテンツを盛り込んでいくといくつものDIVタグが重なりあい、その結果、DIVタグを閉じるのを忘れてしまったり、どれがどのDIVタグの閉めなのか分からなくなったりしてしまいます。

CSSレイアウト崩れの原因 - 回り込み解除(clear)の指定忘れ

CSSレイアウトは、「float」というプロパティを指定し、DIVタグを左右に寄せることで配置するものですが、この「float」を解除しないと、左右に寄せたDIVタグの後に記載したものが上位のDIVタグに回りこんでしまい、崩れを生じさせます。

CSSレイアウト崩れの原因 - ブラウザによる「padding」の解釈の違い

「メインスペース+サイドバーの幅が外枠の幅を超えると崩れる」ということは「パーツの合計幅が外枠よりも大きい」で説明しましたが、正しく幅が設定されていても崩れてしまうことがあります。

CSSレイアウト崩れの原因 - スペースの幅を超える画像の掲載

幅もしっかり計算して決めた、widthpaddingも一緒に指定していない。なのに崩れてしまう!ということがあります。

CSSレイアウト崩れの原因 - ブラウザによる「border」の解釈の違い

widthpaddingを同時に指定したときほど大きな影響は与えにくいのですが、それと同様にブラウザによって解釈がことなるものがあります。

CSSレイアウトはサイズ決定が命

このカテゴリでは、CSSレイアウトが崩れてしまう原因を主な6つにまとめて説明していますが、この内の4つは「なんらかの理由で予定した通りのサイズにならない」ことによるもの。このことからも、CSSレイアウトの肝は「サイズの指定」にあると言えます。