こんにちは、プログラマーの山本です。

ホームページの表示は、使用しているスマホやブラウザによってずれてしまうことがあります。

せっかく手間をかけてホームページを作っても、表示がずれてしまっていたら印象がよくありませんよね。
お客さんがあなたのホームページを見に来てくれても、表示がずれていることですぐに帰ってしまうことも考えられます。

この記事では、表示がずれてしまう原因と解決策をご紹介します。ホームページがずれてしまって悩んでいる方は、ぜひお試しください。

スマホなどの画面幅による表示ずれ

一般的に、ホームページはパソコンを使って作成されることが多いと思いますが、
スマートフォンはパソコンに比べて画面の幅が小さいですよね。

そのため、パソコンの画面にデザインを合わせると、
枠やテーブル、文字などが横幅に入りきらずデザインがずれてしまいます。

パソコンで見ると正常なのにスマホで見ると表示が崩れているという場合は、
スマホの小さな横幅にホームページが対応していないことが原因となります。

スマホでの表示ずれを修正する場合は、以下のようなCSSを使います。

@media (max-width: 540px) {
　　横幅が540px以下の場合に適用するCSSを記入
}
@media (min-width: 541px) {
　　横幅が541px以上の場合に適用するCSSを記入
}

上記のように横幅を指定した内部にCSSを書くと、
そのCSSは指定した横幅内でのみ有効となります。

このようにして、ずれている部分をスマホの横幅に合わせてデザインを調整します。

パソコンからスマホでの表示を確認する方法

スマホでの表示ずれを修正する時、
毎回スマホでホームページを開いて表示を確認しても良いですが、

一部のブラウザではパソコンでスマホでの表示を確認することができます。
こちらの方が効率が良いと思いますので、この方法もご紹介しておきます。

作業効率が上がると思いますので活用してみてください。

ブラウザによる表示のずれ

Google ChromeやFirefox、Internet Explorerなどブラウザの違いによって表示にずれが生じる場合があります。

特に、Internet Explorer（IE）は他のブラウザに比べて表示が崩れる場合が多く、
ホームページを作成したらIEでの表示確認を習慣づけるようにしましょう。

もし表示がずれていたり崩れていたりした場合、そのブラウザに合わせてデザイン（CSS）を調整する必要があります。

残念ながら、自動で調整できるような仕組みは存在しません。

表示がずれているブラウザでホームページを確認しながら、CSSで表示のずれを１つずつ調整していきましょう。

面倒な調整を全て代行します。

ここまで、ホームページの表示がずれる原因と解決策をご紹介しましたが、
場合によっては非常に手間がかかる作業でもあります。

そこで、弊社では面倒な表示ズレの改善を代行させていただいております。

１箇所のずれ修正を　¥3,000（税別）　で受け付けております。

まとめてご依頼いただければ、２箇所目からは　¥2,000（税別）　でお引き受け致します。

ずれの箇所が多すぎて数がわからないという場合でも対応可能ですので、
ホームページのずれが多くて修正が面倒だという方はぜひご利用くださいませ。

お申し込み後24時間以内に、お見積りと決済リンクをご連絡させていただきます。

また、ご契約いただけましたら、24時間以内に納品させていただきます