More than 3 years have passed since last update.

【初心者でもわかる】cssのレイアウトが崩れた時にやってみる事10選

Posted at 2021-04-02

#どうも7noteです。cssでレイアウトが崩れた時に試す方法10選です。

前回はcssが効かなかった時の対処法を10個紹介しましたが、今回はcssは効いてそうなんだけどめっちゃレイアウトが崩れる時に試してみる方法を10個あげてみましたのでお試しあれ。

1.とりあえず元に戻す。

コンピュータはいつでも正確です。もともと綺麗だったのに**cssを触って崩れたのなら、とりあえず元に戻してみましょう。**そして1行ずつ追加するなどして原因を探してみましょう。

floatは回り込みを指定するものですが、初心者の方がつまずきやすいプロパティNo. 1だと勝手に思ってます。
一度floatをやめてみたり、floatを使う場合は回り込み解除(有名なのはclearboth)を試してみましょう。

positionのプロパティで表示位置についての指定をできますが、absoluteやfixedは基準位置となるrelativeが指定されている要素がないと、変なところに表示されてしまいます。
position指定を見直してみましょう。

高さや幅を指定していなければ、自動的に決まるものもあるので指定してみましょう。また画像も指定がなければ画像のサイズがそのまま表示されてしまいます。
逆にガチガチに固定してしまっていると親要素をはみ出る可能性もあるのでこれもまたレイアウトが崩れる原因になります。

入れ子構造が間違っていると、思ってもないところにcssが当たる可能性があります。
もう一度よく見直してみましょう。

marginやpaddingが指定されており、ぴったり入らないことがあるかも。
また初期値で要素にmarginやpaddingが指定されているものもあるので、reset.cssなどを作成して無効化してから開発するのがおすすめ。

cssはボックスモデルを理解しなければ思い通りに整えることは難しいかもしれません。
全ての解説をここでは書けないので、気になる方はこちら↓

**cssには親要素の値を引き継ぐものがあります。**そのため親要素とは違うcssを当てる場合は子要素用のcssも書きましょう。
また例えばdivに指定した場合、親子構造を持つ親のdivと子のdiv両方にcssが当たるのでクラス名をつけたり隣接セレクタや直下を適切に指定して回避しましょう。

**cssのプロパティには対応しないブラウザがあるものもあります。**プロパティ名で検索して確認してみましょう。

ブラウザには読み込み速度を早くするためにキャッシュ(前回の閲覧データ)を残す機能があります。そのせいで古いcssが効いたままで実は治ってるかもしれません。
各種ブラウザでキャッシュクリアの方法が若干異なるので確認してみましょう

普段cssを触らない方や、まだ初めてまもない方はcssって正直わけわからないと思います。

ブラウザによって多少効く効かないはありますがしっかりルールが定まっているのでルールさえ把握すればあとは正直手を動かすだけですね。
でも解決方法が1つじゃなかったりするので違う方法を試してみるなど試行錯誤できるのがcssの面白さなのかなって思います。