スマホで見たときにレイアウトが崩れる、よくある原因

パソコンでは問題なく見えるのに、スマホで見るとレイアウトが崩れてしまう、というご相談をよくいただきます。今回は、よくある原因をいくつかご紹介します。

【1. 画像の幅が固定されている】

画像の幅をピクセル数で固定していると、画面が狭いスマホでは画像が画面からはみ出したり、他の要素と重なったりします。

【2. 横並びの要素が多すぎる】

パソコンでは横に並んでいた要素が、スマホの狭い画面では収まらず、崩れて表示されることがあります。

【3. 文字サイズが調整されていない】

パソコン用の文字サイズのままだと、スマホでは大きすぎたり、逆に読みにくいほど小さく見えたりすることがあります。

これらは、CSSの調整で直せることが多い症状です。「どこが原因か分からないけど、スマホで見ると崩れている」という場合は、該当ページのURLと崩れ方(スクリーンショットがあれば尚良いです)を教えていただければ、原因調査から対応いたします。気になる方はお気軽にメッセージでご相談ください。