「パソコンではキレイに表示されているのに、
スマホで見るとレイアウトが崩れてしまう。」
このような悩みを持っている方はとても多いです。
でも、スマホでのレイアウト崩れは、よくある原因さえ知っていればほとんど簡単に直せます。
そこで、この記事では、スマホでレイアウトが崩れる主な原因と、
レスポンシブでの直し方を初心者向けにまとめて解説します。
ホームページをレスポンシブデザインにしたい場合は、ぜひ最後までご覧くださいね！
スマホでレイアウトが崩れる主な原因はこの5つ
まずは、スマホでレイアウトが崩れる主な原因からお伝えします。
原因① 画像サイズが固定されている
パソコン用に作ったホームページでは、
画像の横幅が「500px」など固定サイズになっていることがよくあります。
そのままスマホで表示すると、画面幅より画像が大きくなり、はみ出してしまいます。
簡単な直し方
CSSに以下を追加するだけでほとんど直ります。
img {
max-width: 100%;
height: auto;
}これで、画面サイズに合わせて自動で縮小されますよ。
原因② 表（テーブル）の横幅が広すぎる
料金表や一覧表などをテーブルで作っていると、
スマホ画面に収まりきらず横スクロールが出てしまいます。
簡単な直し方の考え方
・横幅を100%にする
・横スクロールできるようにする
たとえば以下のようにします。
table {
width: 100%;
}または、
.table-wrap {
overflow-x: auto;
}原因③ 文字サイズがスマホに合っていない
パソコン用に小さめの文字サイズを使っていると、スマホではとても読みにくくなります。
簡単な直し方
スマホ用に少し大きめに設定しましょう。
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}これだけで見やすさが大きく変わりますよ。
原因④ 横幅を固定した要素がはみ出している
よくあるのが、
width: 900px;のように横幅を固定しているケースです。
スマホではこの幅が大きすぎて崩れます。
簡単な直し方
固定指定をやめて割合にします。
width: 100%;必要に応じて、
max-width: 900px;と組み合わせると良いです。
原因⑤ レスポンシブ設定自体が入っていない
そもそもスマホ対応の基本設定が入っていないと、正しく縮小されません。
最低限必要な設定
HTMLのhead内に入れます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">そしてCSSでスマホ用スタイルを設定します。
@media screen and (max-width: 768px) {
/* スマホ用のスタイル */
}よくある崩れパターン別・すぐ直る対処法
次に、よくある崩れパターン別・すぐ直る対処法をご紹介します。
画像がはみ出すとき
ほとんどの場合、先ほど紹介した
img { max-width:100%; height:auto; }で解決します。
表がはみ出すとき
横幅100%指定＋横スクロール対応が安全です。
.table-wrap {
overflow-x: auto;
}メニューがズレるとき
固定幅指定をやめるだけで直ることが多いです。
width: 100%;に変更して確認してみてください。
横スクロールが出るとき
ほとんどは「はみ出している要素」が原因です。
画像・テーブル・固定幅divをチェックしましょう！
レイアウト崩れを防ぐために最初にやるべき基本設定
スマホ対応でまずやるべきことはこの3つです。
・viewportを設定する
・画像を自動縮小させる
・スマホ用CSSを用意する
これだけで崩れトラブルの多くは防げますよ。
ぜひ確認してみてくださいね！
まとめ
「スマホでレイアウトが崩れる原因とレスポンシブでの直し方まとめ」の内容はいかがでしたでしょうか？
スマホでレイアウトが崩れる原因のほとんどは、
・画像サイズの固定
・横幅指定のミス
・スマホ用設定不足
このどれかです。
私も、ホームページをレスポンシブデザインにするときに、「どうやったらよいんだろう・・」と悩んでいました。
ただ、パソコンとスマホの違いは、画面サイズの違い（特に横幅の違い）です。
そのため、パソコンで横幅を固定幅にしているものをすべて100％という形に変更したら、スマホでもきれいに表示されるようになりました。
あとは、viewportの記述を入れれば、これだけでレスポンシブデザインになりますよ！
そして、あとは細かいところを１つずつ確認していくだけです。
これからレスポンシブ対応を進める方は、ぜひこのページでお伝えした内容を参考にして、実施してみてくださいね！
