Web制作会社 THINkBALがデジタル全般の情報をお届けするデジタルマガジンです。東京と埼玉を拠点としたWeb制作会社|株式会社THINkBAL
Web制作
Update: 2023/10/26

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

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

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

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

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

  • ホームページの表示がおかしいときの原因を知りたい人
  • エラーの原因に対する解決策とツールを知りたい人

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

Webサイト制作のプロが貴社のお悩みを解決します! データ分析、UX/UI設計に基づく戦略とデザインで伝えたい価値を伝わるカタチに。 ビジネス成果に貢献するWebサイト制作・構築を提供します。
\まずは無料相談!2営業日以内に返信/
Webサイトの制作・改善を相談する

ホームページの表示がおかしい!表示崩れの原因

複数のWebページのイラスト

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

この見出しのポイント
  • ブラウザに対応していない
  • HTMLタグのミス
  • コードが全角になっている
  • キャッシュが溜まっている

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

ブラウザに対応していない

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

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

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

HTMLタグのミス

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

HTMLファイルに、

  • htmlタグ
  • headタグ
  • bodyタグ

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

コードが全角になっている

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

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

キャッシュが溜まっている

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

このエラーは、

  • 長期間にわたって再起動していない
  • Webサイト閲覧記録をすべて残している

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

ホームページの表示がおかしい時の解決策

ページを改良しているイラスト

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

この見出しのポイント
  • ブラウザに対応していない→リセット用CSSを使う
  • HTMLタグのミス→HTMLエラーチェッカーを使って修正する
  • コードが全角になっている→全角文字検索を使用して修正する
  • キャッシュが溜まっている→キャッシュクリアをする

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

ブラウザに対応していない〜リセット用CSSを使う〜

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

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

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

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

  • Eric Meyer’s “Reset CSS” 2.0
  • HTML5 Doctor CSS Reset
  • Universal Selector ‘*’ Reset
  • Normalize.css 1.0
  • Yahoo! (YUI 3) Reset CSS

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

HTMLタグのミス〜HTMLエラーチェッカーを使って修正する

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

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

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

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

コードが全角になっている〜全角文字検索を使用して修正する

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

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

キャッシュが溜まっている〜キャッシュクリアをする〜

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

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

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

【Safariでの手順】

  1. ホーム画面の「設定」をタップ
  2. 「Safari」をタップ
  3. ページ下部にある「履歴とWebサイトデータを消去」をタップ

【Google Chromeでの手順】

  1. 右上にある「・」が縦に並んでいるアイコンをタップ
  2. 「履歴」をタップ
  3. 「閲覧履歴データを削除」をタップ
  4. 「キャッシュされた画像とファイル」にチェックを入れて「データを削除」をタップ

【androidでの手順】

  1. ホーム画面にある「設定」をタップ
  2. 「アプリ」をタップ
  3. 「アプリ」内にある「Chrome」をタップ
  4. 「ストレージ」をタップ
  5. 「キャッシュを消去」をタップ

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

Webサイトでお悩みを抱えている方はTHINkBALにご相談ください

Webサイトでお悩みをお抱えの方は、ぜひTHINkBALにご相談ください。

THINkBALは、

  • Webサイトをリニューアルしようか悩んでいる
  • 新しくホームページを制作しようと思っている

こういったお悩みをお持ちの方からのご相談を承っています。

ホームページを運営するうえで「達成したい目的」がある方はぜひお気軽にご相談ください。

Webサイト制作のプロが貴社のお悩みを解決します! データ分析、UX/UI設計に基づく戦略とデザインで伝えたい価値を伝わるカタチに。 ビジネス成果に貢献するWebサイト制作・構築を提供します。
\まずは無料相談!2営業日以内に返信/
Webサイトの制作・改善を相談する

まとめ

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

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

この記事のポイント
  • Webブラウザに対応していない
  • htmlタグ、headタグ、bodyタグのいずれかが抜けている
  • コードのどこかが全角になっている
  • 再起動をしていないためキャッシュが溜まっている

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

著者
Digital Magazine editorial departmentDigital Magazine 編集部
Digital Magazineの企画・執筆・編集をしています。Webサイト制作、UX/UIデザイン、コンテンツマーケティング、SEO対策、SNS運用、広告運用に強みを持ったメンバーが、デジタルマーケティング全般の最新情報やノウハウをわかりやすくお届けします。
監修者
Miyazaki Norifumi宮崎 典史
THINkBAL代表。Web制作会社でWebサイト構築を学び、株式会社電通に出向。ナショナルブランドのWebサイトを数多くプロデュース。担当領域は、Webコンサルティング・戦略立案・プロジェクトマネジメント・UXリサーチ・情報設計・制作ディレクション。