ホームページの表示がおかしい！すぐに試せる4つの解決策を紹介

「ホームページの表示がおかしい…なぜ？」

「どうすればホームページが正しく表示されるの？」

このような疑問をお持ちではないでしょうか。

本記事では、正しくホームページが表示されない人に向け、下記の2点を紹介していきます。

本記事を読むことで、ホームページの不具合を一瞬で解決できます。以下にて詳しく見ていきましょう。

ホームページの表示がおかしくなっている時の原因として考えられる要素は下記の通りです。

それぞれの原因ついて解説し、次章では原因に対しての解決策を紹介していきます。まずは原因が何かをハッキリとさせておきましょう。

まず考えられるのが「ブラウザに対応していない」というケースです。

たとえば、Aのブラウザに合わせてスペースや改行などで画像や文字の位置を調節したコードを、解像度が違うBのブラウザで表示させようとすると、Aと同じように表示されないことがあります。

変な位置で改行されていたり、余計なところにスペースが入っていたりする場合は、このケースに該当している可能性が高いです。

HTMLタグのミスもよくある原因の一つです。

HTMLファイルに、

の3つがしっかりと入っているかどうかを確認してみましょう。3つのうち1つでも抜けていればホームページは正しく表示されません。

「タグ」「属性」などのコードが全角になっている場合でもホームページは正しく表示されません。

たとえば、全角文字を表示することができる範囲（<p></p>の中など）の外側に全角文字があるとエラーを起こし、ホームページの表示がおかしくなってしまいます。 また、全角文字に加えて「全角スペース」が使用されている場合でもエラーを起こす原因になってしまうので注意してください。

キャッシュが溜まっていることで、ホームページが表示されないケースもあります。これは、ホームページを作る側ではなく見る側に起きるエラーです。

このエラーは、

といったことが原因になっている可能性が高いです。

次に、先ほど紹介したエラーの原因に対する解決策を紹介していきます。

以下では、それぞれの解決方法について詳しく解説していきます。

ブラウザに対応していなかった場合は、リセット用CSSを使うことで解決できることがあります。

リセット用CSSとは、「safari」「Google Chrome」などのブラウザが持つデフォルトのCSSを全てリセットするための手法です。加えて、各ブラウザに設定されている、フォントサイズやパディングなどの設定を全て白紙に戻す役割があります。

また、リセット用CSSを使用することで、元から設定されていたCSSを軸に考える必要がなくなるため、コーディングが楽になるというメリットもあります。

よく利用されているリセット用CSSはこちら。

使用しているデバイスと相性の良いものを選びましょう。

HTMLタグのミスは、HTMLエラーチェッカーを使用することで簡単に修正することができます。

HTMLエラーチェッカーとは、エラーがあったページを開き、ボタンを押すだけで「記述ミス」「足りないタグ」などを瞬時に検知するツールです。

Google Chromeの拡張機能にある「HTMLエラーチェッカー」を使用すれば、エラーページを開き、拡張機能アイコンをクリックするだけでミスをチェックすることができます。

HTMLタグのミスは、Googleのアルゴリズムからマイナス評価を付けられることもあるため、エラーがあった際はできるだけ早く修正しましょう。

コードが全角になっているかどうかを確認するのに最も有効なのは、全角文字検索ツールを利用することです。短いコードであれば、自力で探すことも難しくはありませんが、長いコードだとそうはいきません。

ツールを使わずとも、「全角チェッカー」を利用すればサイト上で簡単に全角文字を調べることができます。

キャッシュが溜まっている場合は、「キャッシュクリア」もしくは「スーパーリロード」を行うことでエラーが解決されます。

スーパーリロードとは、ブラウザ上に残っているキャッシュを残しつつ、サーバーからの情報を強制的に読み込む方法です。

スーパーリロードで解決できなかった場合は、「キャッシュクリア」を実施するといいでしょう。ただし、ブラウザによってキャッシュクリアの方法が異なるため、以下でブラウザ別に解説していきます。

【Safariでの手順】

【Google Chromeでの手順】

【androidでの手順】

キャッシュが溜まっている場合は、これらの方法を試してみてください。

本記事では、ホームページの表示がおかしい時の原因と、それに対する解決策をご紹介してきました。

ホームページの表示がおかしい場合は、

のいずれかである可能性が高いです。思い当たる部分がある場合は、本記事で紹介した解決方法を試してみてください。