webサイトを制作中や、更新時にレイアウトや表示がおかしくなることがあります。
今回はその原因と対処法を紹介します。
Contents
htmlのタグ閉じ忘れ
表示やレイアウトが崩れてしまった際に、まず確認したいのがhtmlの閉じ忘れです。更新時などに崩れてしまう場合は、ほぼこれが原因と言ってもいいでしょう。
htmlチェッカーなどで検索をすると、htmlの閉じ忘れなどを教えてくれるツールもありますので、必ずチェックしてください。
htmlの入れ子ルールを間違う
htmlの中には、タグの中に親子関係があり、入れ子状に記載していくものがあります。これが複雑化することで、親子関係が正しく表記されず崩れてしまうケースは多いです。divタグやulタグなどを使用する際は、気をつけましょう。
レイアウトをスペースや改行で調整してしまっている
文字組などのレイアウトが崩れてしまう際によく見られるのが、改行やスペースでレイアウトを調整してしまっているケースです。
文字の改行はbrタグで行いますが、テキスト同士のレイアウトを設定する場合はpタグやdvタグを使用するようにしましょう。
Webブラウザの大きさに対応していない
ブラウザの大きさ解像度によって、レイアウトが崩れてしまう場合があります。多くの場合、画像や文字の位置をスペースで調節している場合が考えられます。
ブラウザに合わせて改行やスペースでレイアウト調整を行っていると、大きさの違うブラウザで表示をした際に、変な位置で改行して表示されるかもしれません。小さいWebブラウザで表示した場合、自動的に折り返しがされますので、必要以上に改行を使用しないようにしましょう。
IEに対応していない
表示するブラウザの種類によって、レイアウトが崩れてしまうケースもあります。特に近年多いのがIE（Internet Explolor）で表示をした際に、レイアウトが崩れてしまうことです。
IEには互換モード（互換表示機能）という機能があり、それが悪さをして表示を邪魔しているケースがあります。
また、そもそも新しい技術を表示する能力がIEにないために、レイアウトが崩れてしまうこともあります。
これを回避するには、webサイトのhead内に「IEに互換表示をさせないX-UA-Compatibleの指定」という指示を出せばOK。
CSSやjsなど外部ファイルのリンクが記述されているよりも前の部分に、下記を埋め込めば完了です。
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” >
floatで崩れる
floatとは指定した要素を回り込ませるためのCSSプロパティです。画像を横並びで表示させたい、文字を横並びで表示させたい、といったタイミングで使用します。
floatプロパティは、その設定が後続の要素にも影響を与えてしまうことがあります。
例えば画像を二枚並べたかったのに、そのあとの要素まで横並びや、重なって表示されてしまいレイアウトが崩れてしまうケースです。
floatプロパティは、単語の意味通り「浮いている」状態なので、後続の要素が高さを認識できずに詰めてきてしまいがち。もしそうなったら、floatプロパティを指示した親要素にClearfixクラスを持たせましょう。
親要素のstyleタグ内に、下記を追加すれば完了です。
.clearfix::after {
content: “”;
display: block;
clear: both;}
まとめ
ホームページの表示やレイアウトが崩れた時のよくある原因と、その対処方法についてまとめました。
技術の進歩が早いため、環境要因で崩れてしまうものももちろんありますが、多くの場合はhtmlタグの表記ミスによる原因がほとんどです。
htmlチェックツールなどを用いながら、注意深く対処していきましょう。