株式会社ララパルーザ
〒840-0863 佐賀市嘉瀬町十五1297-1

お困りごと ホームページ

ホームページの表示がずれる、スマホやブラウザによる原因と解決策

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

せっかく手間をかけてホームページを作っても、表示がずれてしまっていたら印象がよくありませんよね。

お客さんがあなたのホームページを見に来てくれても、表示がずれていることですぐに帰ってしまうことも考えられます。

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

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

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

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

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

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

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

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

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

 

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

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

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

【GoogleChromeの場合】
1.F12 キーを押す
2.Ctrl(Command) + Shift + M キーを押す。

【Firefoxの場合】
1.F12 キーを押す
2.Ctrl(Command) + Shift(Option) + M キーを押す。

※ かっこ内は macOS の場合です。

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

お申し込みはこちらから

お申し込みいただきましたら、
24時間以内に弊社からご連絡させていただきます。

必要な手順をご説明したのち、
24時間以内に設定を完了させていただきます。

  • この記事を書いた人

yamamoto

-お困りごと, ホームページ

Copyright© Web(ウェブ)の便利屋Lallapallooza(ララパルーザ) , 2019 All Rights Reserved.