cssでのレイアウト崩れを直す！

• 

お久しぶりです。WEB制作チームのウサナミです。
最近、WEBサイトのレイアウトについての記事を複数書いていました。
そこで今回はWEBコーディング時に陥りやすいcssでのレウアウト崩れとその対処法を書いていこうと思います。

floatでの崩れを解消する。

要素を簡単に横並びにしてくれるcssですが、ちゃんと使い方を分かっていないと私の中では一番レイアウト崩れが起きやすいcssだと思っています。
特に昔はこのfloatで崩れているサイトが多かったイメージです。

< style >
.box01, .box02, .box03 {
   margin-bottom: 15px; /*要素の下に15pxの余白を入れたいがビタッとくっついて表示がおかしい*/
}
.box01  {
  float: left;
}
.box02 {
  float: right;
}
< /style >

対処法

対処法は至って簡単でclear: both;を横並びを終了させたい要素に追加するだけです。
ですが、結構clear: both;を書き忘れてサイトが崩れてしまうことが多いです。

< style >
.box03 {
  clear: both;/*clearすることにより、イメージ通りに余白が入った*/
}

positionでの崩れを解消する。

自由度が高く要素を好きなところに配置してくれるcssですが、稀に要素がどこかへ消えたりする事があります。

< style >
.box0201, .box0202, .box0203 {
  position: absolute;/*absoluteはかけたが、移動させる範囲を指定していないため、変な所へ要素が飛んでいく*/
}
.box0201  {
  left: 0;
}
.box0202 {
  right: 0;
}
< /style >

対処法

レイアウトが崩れたりすることは珍しいかもしれませんが、親要素にかけなければいけないposition: relative;の指定を違う要素にかけてしまって崩れる場合があります。

< style >
.positionbox {
   position: relative;/*どの要素の中でabsoluteを移動させるかを指定すると要素が変な所へ飛ばなくなる*/
}
.box03 {/*absoluteで左右中央揃え*/
  left: 0;
  right: 0;
  margin: 0 auto;
}
< /style >
bodyから要素がはみ出るのを解消する。
割とよく起きるのがこの現象で、起きてしまうとサイトに意図しない横スクロールがでてサイトがガタガタに…。なんてことがあります。私も稀にやってしまいます。


box01
box02
box03

< style >
box {
  width: 300px;
}
.box01 {
  width: 300px;
}
.box02 {
  width: 340px;
}
.box03 {
  width: 300px;
}
< /style >

対処法
親要素より横幅が大きくなってしまい、はみ出た要素の幅を調整するのが基本的な対処法となりますが、簡単な作りのサイトであればすぐに修正も可能です。
ですが、複雑な作りのサイトであればそれも難しくなってきます。
複雑なサイトの場合は親要素を一つづつ消していき、サイトの崩れが直ればその消した要素が原因になるので、その要素のcssを調整します。
そうすれば複雑なサイトであっても修正する事が可能です。


box01
box02
box03

< style >
.box02 {
  width: 300px;/*boxに収まるサイズに修正*/
}
< /style >

サイトを作る上で意図しないサイト崩れなどは誰しも経験すると思いますが、対処法さえわかっていれば言うほど厄介なものではありません。
サイト作りには色々と知識が必要かと思いますが、皆さん頑張って素敵なWEBサイトを作ってください。