＊レイアウトが崩れる？
レイアウトが崩れてしまう原因はたくさんありますが、
ここでは初心者が犯してしまいがちなレイアウト崩れの原因を紹介していこうと思います。
＊サイズの指定が上手くいっていない
例えば外側のパーツの幅を800pxに設定しています。
そこに左側にメニュー、右側にメインのパーツを設置する場合はふたつの幅の合計が800pxにならないといけません。
そんな事は誰もが分かっているのですが、結構ここを間違ってしまう人が多いです。
例を挙げてみましょう。ここではメニュー部分の幅を300px、メイン部分の幅を500pxにしたいとします。
例１：paddingの設定がおかしい
例えばメニュー部分の両幅にpaddingを10px指定したい場合、メニュー部分の幅を280pxに直さないといけません。
ここの解釈を間違っている人が多いので、レイアウト崩れの原因になりがちです。
例２：borderを指定している場合、そこの幅を計算していない。
メニューとメインの間に1pxのborderを使いたいとします。
そうした場合、300 + 500 + 1 = 801 となってしまい、レイアウトが崩れてしまいます。
これも結構犯しやすいミスなので、覚えておきましょう。
＊回り込み解除（clear）の指定をしていない
レイアウトでは良く「float」を使って、タグを左右に配置します。
これで指定した場合に回り込みを解除しておかないと「float」で指定した後のタグも、左右に寄ったままになってしまいます。
という事で「float」を使った後のタグには回り込み指定をしておきましょう。
・回り込み解除の指定の仕方（CSS）
.sample { clear:both; }
これでsampleと言うclassの前に「float」で左右に配置されたタグの回り込みを解除する事が出来ます。
スポンサードリンク