ウェブページ表示崩れの対処法｜確認すべき4つの原因
ウェブサイトを作成するときにページの表示が崩れて困った経験はありませんか？
HTMLに慣れるまでは原因を特定しにくく、どうしていいかわからないこともありますよね。
今回はこのようなお悩み解決のために、ページ表示が崩れる4つの代表的な原因とその対処法をご紹介します。
原因1：終了タグのミス
HTMLでは開始タグのみの要素以外はコンテンツの後ろに必ず終了タグを書く決まりになっています。
HTMLファイルの基本構造については以下の記事で紹介していますので参考にしてください。
終了タグを書き忘れていたり、終了タグを書く順番が間違っていて入れ子が成立していないと表示崩れの原因になります。
また、終了タグは</a>のようにバックスラッシュ「/」をつける必要があります。バックスラッシュをつけ忘れると開始タグとして認識され正しく表示されません。
【例（リンクを貼るaタグ）】
- 正しい表記
<a href=”https://bspace.jp/”> B-SpaceのHP </a>
- 終了タグの入れ忘れ
<a href=”https://bspace.jp/”> B-SpaceのHP
- バックスラッシュの書き忘れ
<a href=”https://bspace.jp/”> B-SpaceのHP <a>
- 終了タグの順番が間違っている
<a href=”https://bspace.jp/”> <font color=”#ed6d1f”> B-SpaceのHP </a> </font>
※注意：上記HTMLのダブルクォーテーション「”」は本ブログの仕様上全角で表示されています。コピーして利用される場合は半角へ変換してください。
【対処法1】
- タグ確認ツールを使用する
終了タグの有無や入れ子のミスを確認するには、「タグ確認ツール」を使用すると良いでしょう。
Yahoo! JAPANストアクリエイターProには「HTMLタグ確認ツール」が用意されているのでこちらを参照してください。
HTMLタグ確認ツールでは、終了タグもしくは開始タグが抜けていると検出してくれるので、終了タグの入れ忘れやバックスラッシュの書き忘れを確認できます。
タグ確認ツールの使い方は以下の記事で紹介しています。
対処法2
- コンテンツを書く前に終了タグを書く習慣をつける
終了タグの書き忘れや入れ子のミスを防ぐにはコンテンツを書く前に終了タグを書く習慣をつけると良いでしょう。
タグ確認ツールでは終了タグの記述順の間違いは検出できないので、事前に防ぐことが重要です。
開始タグを書いた後に終了タグを書くようにすれば、終了タグを書く順番を間違えるリスクを軽減できます。
また、開始タグを書くだけで適切な終了タグを記述する補完機能を持つ編集ソフトもあるのでそれらを使用することをおすすめします。
原因2：要素幅の設定ミス
画像などの各要素の幅をピクセル（px）単位もしくは1や2、3などの数字のみで設定している時は要素幅の設定ミスが原因になっている可能性があります。
要素幅がウェブページ幅よりも大きくなっていたり、要素幅が小さすぎると表示が崩れてしまうことがあるので、各要素の幅設定をご確認ください。
【対処法】
- パーセンテージ（%）表記に変更する
要素幅はページ幅に対する比率としてパーセンテージ（%）でも指定することができます（ただし、正確にはページ幅のうち描画が許されている範囲に対する比率）。
パーセンテージ（%）で設定するとブラウザーが画面の大きさに合わせて自動で調節してくれます。
要素の幅を設定する時は、width=90% のようにパーセンテージで表記しましょう。
width=90%と記述するとページ幅に対して90%の大きさで表示されます。
幅設定ミスによるページ崩れの対処法やページ幅の変更方法はYahoo! JAPANストアクリエイターProでも詳しく紹介されているのでこちらもご覧ください。
原因3：必要なタグがない
表示が崩れてしまう原因の一つに、HTMLファイルに必要なタグが記述されていないということがあります。
HTMLファイルにはhtmlタグ、headタグ、bodyタグが必ず必要です。
このうちの一つでも抜けていると正しく認識されないため、表示が崩れてしまうことがあります。
HTMLファイルの基本構造については以下の記事で紹介していますので参考にしてください。
【対処法】
- 必須タグ（htmlタグ、headタグ、bodyタグ）が全て記述されていることを確認する
- headやbodyの中身（コンテンツ）を書く前に必須タグを全て記述しておく
原因4：全角になっている
タグや属性などは半角文字で記述する決まりになっています。
全角文字を認識する範囲（pタグのコンテンツなど）外で全角文字を使用するとコードとして認識されず正しく表示されません。
また、全角文字の認識可能範囲外に全角スペースが記述されていても正しく表示されないことがあります。
【対処法】
全角文字を検出してくれるツールを利用する
- エディターの全角文字探索
- フリーで公開されている全角チェッカー
コードが短ければ自力で探して半角に書き直すことで解決できます。
しかし、コードが長くなっていくと全角文字を探すことは困難です。
自動で全角文字を検出してくれるツールを利用すれば効率的に修正できるでしょう。
まとめ
今回は、ページ表示が崩れる原因とその対処法についてご紹介しました。
表示崩れが発生してしまったら、まずこれらの項目を確認してください。
ページ編集に関する詳しい説明はYahoo! JAPANストアクリエイターProのこちらのページで紹介されているので困った時はこちらも参照してください。
やっぱりHTMLって難しい・・・
HTMLを勉強している時間はなかなかない・・・
というストア様はぜひ一度B-Spaceをお試しください！
B-SpaceではHTML作成に便利なサービスを数多く提供しています。
B-Spaceをご活用いただければ、より簡単に繁盛店のにぎわいを簡単に作れます！
初めてB-Spaceをご利用されるストア様は1カ月の料金が無料になる特典実施中！
お申込みはこちら！
