CSSの事ならなんでも

よくあるレイアウト崩れ

スタイルシートで段組やブログをカスタマイズする際に、1番厄介な部分の説明します。

まず初めにブラウザの違いによる表示の違いを考えなければいけません。
また、親BOXの幅に対しコンテンツ部分のBOXの幅とサイドバー部分のBOXの幅を足したものが大きくなると レイアウトが崩れる原因となります。

よくあるのが「カスタマイズしたら、サイドバーが落ちた」みたいな現象。
レイアウトを崩さない為のヒントを簡単に説明しますのでご参考までに！

〜borderの扱い〜

実はborderの太さは幅に影響を与えています。
Internet Explorer5及び5.5では関係ないのですが、最近のものは「border」にも気を使わなければなりません。 例えば、上記の指定に更に４辺とも 1px のborderを指定したとします。
幅は更に左右の1px分、合計 2px 分追加して 232px となります。


〜デフォルトスタイルをリセットしていませんか？〜

ブラウザによって表示が違う場合デフォルトのスタイルを放置しているかもしれません。
マージンやパディングはブラウザによって解釈が違うのですが、
はじめにリセットしていない場合、後から修正したらサイト全体に影響を及ぼすことになるので、修正したい箇所だけにひとまずマージンやパディングを0に、リストならリストのスタイルをnoneに設定してみるといいかもしれません。


まとめ

W3Cの定めるCSS2では width:190px; とした場合、190pxはborderやpaddingやmarginを除いた部分を意味します。
よって、レイアウトする際はborderやpaddingやmarginの幅も考慮に入れて段組、カスタマイズしましょう。

CSSレイアウトの長所・短所

サイト枠組みの作り方

メニュー部分の作り方