banner

レイアウトがずれないように

ホームページ制作中にレイアウトがずれる

ホームページ制作しているとレイアウトが意図したものより1px程度ずれることがあります。使用するブラウザの種類によってずれてしまうこともあるでしょう。

最近ではメモ帳のようなテキストエディタでホームページ制作を行う人は稀で、初心者、上級者に関わらずホームページビルダーやDreamWeaverのようなWebオーサリングソフトを使用している方が多くいます。さらにはホームページを作るための雛形であるCSSテンプレートを利用してホームページ制作を行っている方もいることでしょう。

しかしそういう場合においても、ホームページ編集作業中にレイアウトが崩れてしまうことが稀にあります。

このような現象が起こった場合、まずはDOCTYPE宣言を確認することが先決です。DOCTYPE宣言とはHTMLファイルの先頭に表記されるHTMLのバージョンを定義するもので、例えばHTML5とHTML4だとvertical-alignの初期値が異なり画像がずれることがあります。

次に当たり前ですがソースコードにスペルミスがないかチェックしてください。ホームページ制作においてソースコードは正しく記述しないとレイアウトが崩れる原因となります。最近のWebオーサリングソフトだとチェックしてくれる機能がありますし、Web上のサービスを使ってもいいでしょう。

三つ目の手段として確認するWebブラウザを変えてみましょう。できればホームページ制作ツールが搭載されたGoogle Chromeが好ましいです。IEはややHTMLのルールに準拠していない点が多いので開発中はあまり使わないようにするのが無難です。

それでもまだ直らない場合はCSSに原因がある可能性が高いです。

例えば意図していない空白が空くとか、カラム落ちしているなど、ほとんどがCSSにより不具合です。個別にどのようなスタイルが適用されているか確認してください。これらの作業はテキストエディタやWebオーサリングツールで行うよりGoogle Chromeの開発者ツールで行うほうが楽に行えるはずです。

稀にですが、正しく記述しているはずなのにレイアウトがずれてしまうこともあります。ブラウザも人の手で作られたものですから決して万能ではなく、特に昔のIEではバグが多く見つかっています。

IE以外のブラウザでは正しく動作しているのにIEでは動かないという場合、IEのバグである可能性が高いです。ネットで調べて古いバージョンのIEに対応するのもいいですが、生産性を重視して古いIEには対応しないホームページを制作してしまうのもよいでしょう。

Copyright(c)2014 ホームページ制作のクオリティを保つために重要となるルールAll Rights Reserved.