2021.04.05
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することにより、イメージ通りに余白が入った*/ } style >
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から要素がはみ出るのを解消する。
割とよく起きるのがこの現象で、起きてしまうとサイトに意図しない横スクロールがでてサイトがガタガタに…。なんてことがあります。私も稀にやってしまいます。
box01box02box03< style > box { width: 300px; } .box01 { width: 300px; } .box02 { width: 340px; } .box03 { width: 300px; } < /style >対処法
親要素より横幅が大きくなってしまい、はみ出た要素の幅を調整するのが基本的な対処法となりますが、簡単な作りのサイトであればすぐに修正も可能です。
ですが、複雑な作りのサイトであればそれも難しくなってきます。
複雑なサイトの場合は親要素を一つづつ消していき、サイトの崩れが直ればその消した要素が原因になるので、その要素のcssを調整します。
そうすれば複雑なサイトであっても修正する事が可能です。box01box02box03< style > .box02 { width: 300px;/*boxに収まるサイズに修正*/ } < /style >サイトを作る上で意図しないサイト崩れなどは誰しも経験すると思いますが、対処法さえわかっていれば言うほど厄介なものではありません。
サイト作りには色々と知識が必要かと思いますが、皆さん頑張って素敵なWEBサイトを作ってください。
Adobe XDの便利だったこと そして予想以上につまずいたこと
求人作成のポイントは「ターゲット」と「仕事内容」を明確にすること
UAからGAに以降する際の知識に関してあまり知られていない事
Adobe AcrobatでPDFの差分チェックを行うデジタル検版の仕方
花味弁当@花見の季節
誠実さ・信頼感のあるWEBサイトデザイン参考事例
Google広告/拡張テキスト広告廃止!レスポンシブ検索広告のメリットや効果的な作成法!
動画で学ぶ XDでできること
プラグイン不要!ワードプレスがデフォルトでLazy-load(遅延読込)をサポート
kintoneで毎週や毎月繰り返しリマインダ通知する。
「求人原稿」は自社作成をオススメしたい3つの理由