スマホでホームページを見ると、
「文字や画像がずれている」
「横にはみ出してスクロールが出てしまう」
「要素が重なってしまう」
こんな経験はありませんか？
パソコンではきれいに見えるのに、スマホだけ崩れるケースはとても多いです。
でも安心してください。
ほとんどの場合、原因はシンプルで簡単に直せます。
この記事では、初心者の方でもすぐできる対処法を分かりやすく紹介するので、ぜひ最後までお読みくださいね！
スマホでレイアウトが崩れるよくある原因
まずは、スマホでレイアウトが崩れるよくある原因からお伝えします。
横幅を固定している
よくあるのが、
width: 800px;のように、幅を決め打ちしているケースです。
パソコンでは問題なくても、
スマホ画面には入りきらず崩れてしまいます。
画像サイズを固定している
画像に、
width: 600px;など固定サイズを指定していると、
スマホでは、はみ出してしまいます。
表（テーブル）がはみ出している
料金表やデータ表などは、
スマホでとても崩れやすい部分です。
古いレイアウト方法を使っている
floatなど古い方法だけで作っていると、
スマホ対応がしづらくなります。
まず確認したい基本ポイント
次に、まず確認したい基本ポイントをお伝えします。
viewport設定を確認する
HTMLの<head> 部分に、次の記述があるか確認しましょう！
<meta name="viewport" content="width=device-width, initial-scale=1.0">これが無いと、スマホ表示はほぼ確実に崩れます。
幅が画面に合わせて動くか確認する
ブラウザの幅を縮めたときに、
レイアウトが一緒に縮むかをチェックしてください。
縮まない場合は、固定幅が原因です。
すぐできる対処法（初心者向け）
ここでは、すぐできる対処法をお伝えします。
幅を100%にする
固定している幅は、次のように直しましょう。
.container {
width: 100%;
max-width: 100%;
}これだけでスマホにフィットしますよ。
画像を自動で縮小させる
画像は基本この設定がおすすめです。
img {
max-width: 100%;
height: auto;
}これで画面サイズに合わせて、画像が調整されます。
表をスマホ対応させる
まずは簡単な方法として、横スクロール対応にします。
.table-wrapper {
overflow-x: auto;
}あとは、表を <div class=”table-wrapper”>で囲むだけです。
これで、表の箇所は横スクロールに対応します。
レイアウトを崩れにくくするコツ
レイアウトを崩れにくくするコツもご紹介します。
max-widthを使う
幅を制限したい場合でも、
max-width: 900px;のようにすると、スマホでは自動で縮みます。
flexboxを活用する
横並びレイアウトは、flexを使うと崩れにくくなります。
.box {
display: flex;
flex-wrap: wrap;
}スマホでも自然に折り返されます。
よくある失敗例
最後に、よくある失敗例をお伝えします。
たとえば、次のような失敗例です。
- PC表示だけを見て完成だと思ってしまう
- 一部だけ直して他が崩れたまま
- スマホでの確認を忘れる
必ずスマホ表示でチェックしましょう！
特に最近は、スマホからのアクセスが多くなっているので、スマホでのチェックは忘れずに行いましょうね。
まとめ｜スマホのレイアウト崩れはほとんど直せる
「スマホ表示でレイアウトが崩れる原因とすぐできる対処法」のコンテンツはいかがでしたでしょうか？
スマホで崩れる原因の多くは、
- 幅の固定
- 画像サイズ指定
- 表のはみ出し
です。
これらを
- 幅を100%にする
- 画像を自動調整
- 表を対応させる
だけで、ほとんど解決できます。
ぜひ自分のホームページで試してみてくださいね！
