BLOG
ブログ

2021.04.05

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

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

floatでの崩れを解消する。

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

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

対処法

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

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

positionでの崩れを解消する。

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

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

対処法

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

box01
box02
box03
< 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サイトを作ってください。



CONTACT

下記のフォームに必要事項を記入してください。※お問い合わせの際には個人情報保護方針のご確認をお願い致します。

会社名
お名前必須
ご住所
郵便番号
都道府県
市区町村
町名番地等
建物名
お電話番号必須
- -
メールアドレス必須
お問い合わせ内容必須
メッセージ