ホームページを作っていると、ある日突然、
・表示がぐちゃぐちゃになった
・スマホでだけ崩れた
・どこを直せばいいかわからない
こんなトラブルはとてもよく起こります。
そこでこの記事では、HTMLでレイアウトが崩れる原因と基本的な直し方について、
初心者にも分かりやすく解説します。
私も、ホームページを作っているときに、レイアウトが崩れてしまうことはよく起きました。
その経験から、対処方法や直し方を分かりやすくお伝えするので、ぜひ参考にしてくださいね！
HTMLでレイアウトが崩れる一番多い原因
まずは、HTMLでレイアウトが崩れる一番多い原因からお伝えします。
よくある原因はこちらです。
画像サイズが大きすぎる
大きな画像をそのまま表示すると、画面からはみ出します。
👉 対策：
<img src="sample.jpg" style="max-width:100%; height:auto;">タグの閉じ忘れ
<div>
<p>文章このように閉じタグがないと、レイアウトが壊れます。
👉 必ず </p> </div> を入れましょう。
幅を固定しすぎている
px指定が多いと、スマホで崩れやすくなります。
画像が原因で崩れるケースと直し方
次に、画像が原因で崩れるケースと直し方をご紹介します。
よくあるパターンは、
・画像が大きすぎる
・スマホではみ出す
ほとんどの場合、これで解決します。
<img src="sample.jpg" style="max-width:100%; height:auto;">表（テーブル）が崩れる原因と直し方
表（テーブル）が崩れる原因と直し方をご紹介します。
列がズレる
列数がそろっていないことが原因です。
横にはみ出す
<table style="width:100%;">これでほとんど改善します。
列が多すぎる場合
<div style="overflow-x:auto;">
<table>スクロール対応で見やすくなります。
余白や行間が原因で見た目が壊れるケース
余白や行間が原因で見た目が壊れるケースをお伝えします。
brを連続で使っている
<br><br><br>👉 marginに変更しましょう。
余白がバラバラ
<p style="margin-bottom:20px;">これで整います。
リンクやタグミスで崩れるパターン
リンクやタグミスで崩れるパターンについて、お伝えします。
閉じ忘れ
<a href="page.html">
文字👉 </a> を忘れずに。
入れ子が間違っている
タグの中にタグを正しく入れましょう。
スマホでだけ崩れるときのチェックポイント
スマホでだけ崩れるときのチェックポイントもお伝えします。
✔ 画像が大きすぎないか
✔ 幅を固定していないか
✔ 表がはみ出していないか
ここを見るだけで多くは直ります。
初心者向けレイアウト崩れチェックリスト
それでは、初心者向けレイアウト崩れチェックリストをご紹介します。
下記の項目をチェックしてくださいね。
✅ 画像は自動縮小しているか
✅ 表は幅100%か
✅ タグは閉じているか
✅ 無理やり改行していないか
まとめ
「HTMLでレイアウトが崩れる原因と基本的な直し方まとめ」はいかがでしたでしょうか？
HTMLでレイアウトが崩れる原因はほぼ決まっています。
✔ 画像サイズ
✔ タグミス
✔ 幅固定
✔ 余白調整
このポイントを順番に見れば、ほとんどのトラブルは解決できますよ。
ただ、一番良いのは、修正前にバックアップをしっかりと取っておいて、
表示が崩れてしまったら、元の状態に戻すことです。
原因を調べようとするよりも、元の状態に戻した方が簡単なので、
作業前には、必ずバックアップを取ることを心がけていきましょうね。
私も、作業前にバックアップを取り忘れて、元の状態に戻すことができず、すごく苦労した経験もあります。。
ぜひ、作業前にはバックアップするようにしましょうね！
