top > コラム > ホームページ制作 > ホームページを編集していて、レイアウト崩れが起こったときの対処法

ホームページを編集していて、レイアウト崩れが起こったときの対処法

ホームページ制作の初心者の方など、ホームページビルダーのようなオーサリングソフトをご使用になられている方も多いと思います。また、CSSテンプレート(ホームページを作るための雛形)を利用されて、ホームページを作られている方もいらっしゃると思います。

そういう場合でも、ホームページを編集しているとレイアウト崩れが起こってしまう場合があります。ブラウザによってもレンダリング方法が違うので、IEではちゃんと見れていたのに、Firefoxで見るとレイアウト崩れが起こってしまっている、ということもしばしばです。

そこで、レイアウト崩れが起こったときの対処法についてご紹介します。

1.DOCTYPE宣言を確認する

DOCTYPE宣言というのは、HTML文書のバージョンを定義するもので、これによりHTMLの使えるタグが異なります。通常、HTMLファイルの一番最初に記述します。

何のことか分からない方は、もしかしたらDOCTYPE宣言を定義していないかもしれません。そうすると、ブラウザによってレンダリングが異なってしまうので、必ずDOCTYPE宣言をしましょう。全くの初心者で、何を記述してよいのか分からなければ、

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

と記述してください。

2.ソースコードのスペルミスをチェックする

正しいソースコードを記述しないと、レイアウト崩れの原因になります。まずは、正しいソースコードで記述しているかチェックをします。チェックするためのサービスがありますので、そちらをご使用ください。HTMLソースコードチェックのほうは英語版しかないのが難点です。

オプションで、HTMLやCSSのバージョンが選べます。ちゃんと、HTMLタグの使い方が正しいか、CSSの記述が間違っていないか確認してみてください。

3.確認するブラウザをFirefox、あるいはGoogle Chromeにする

もし、IEを普段使われている方には申し訳ないですが、ホームページを制作する際は、Firefox、あるいはGoogle Chromeをご利用ください。

※現在、FirefoxGoogle Chromeも非常に早い頻度で更新が進んでいます。出来る限り、最新のバージョンを使用するようにしてください。ただし、アドオンのほうがこの更新に追いつかない場合もあるので、ブラウザのバージョンアップをする際は、アドオンが対応しているか確認を行ってください。

これらのブラウザであれば、バグ(誤り、不具合)チェックができるアドオンがありますので、飛躍的にバグを見つける時間が短くなります。

そして、以下のFirebugというアドオンをインストールしてください。

ただし、IE9以降のバージョンをお使いの場合であれば、IEで動作確認を行なっても構いません。IE9以降であれば、かなりレンダリングがしっかりしているのと、開発ツールが実装されており、IE9だけでなく、IE7以上のバージョンの動作確認も行うことができます。

4.CSSのスタイルを確認する

例えば、謎の空白が空いているとか、カラム落ちしているとか、そういうのはほとんどがCSSの設定によるものです。なので、個別にどのようなスタイルが適用されているか確認していきます。

その際、便利なのが、先ほどのFirebugというアドオンです。このアドオンは、個別にどのようなスタイルが適用されているか確認できます。また、HTMLやCSSの中身を確認できるだけでなく、動的にHTMLやCSSを編集できたりもします。(ただし、元のファイルが編集できるわけではなく、例えば、元ファイルを持っていないサーバにアップされているWebページを擬似的に編集できるというものです。)

ここでは、Firebugの使い方は割愛させていただきます。以下のblogをご参考ください。

5.正しく記述しているのにおかしい動作をするときはブラウザのバグ

ブラウザも万能ではなく、正しいソースコードを記述していても、思ったとおりの動作をしてくれないときがあります。特にIE6以前のブラウザはバグが多いです。

現在、IEの最新バージョンは9です。6以前のバージョンに対応する必要はほとんどないと考えます。ただし、企業のパソコンなどはいろいろなシステムが絡んでくる都合上、いまだIE6を使用されているユーザも多いと思います。

FirefoxやGoogle Chromeで動作確認していて問題がないのに、IEで見ると何かおかしい・・・というときは、IEのバグである可能性が非常に高いです。その際は、インターネットで「IE バグ」というように検索してみてください。

ここで、IEで遭遇しやすいバグのベスト3を挙げてみます。

  1. marginなどのCSSが有効にならない
  2. floatした要素にmarginを指定すると値が2倍になる
  3. 途中でテキストやボーダーが切れてしまっている

1.marginなどのCSSが有効にならない

これの原因は、hasLayoutプロパティがtrueになっていないためです。hasLayoutプロパティはIEの独自のプロパティで、レイアウト情報を保持しているかどうかを示すものです。

基本的に横幅(width)を指定すると、hasLayoutがtrueになって、要素に指定しているスタイルが有効になります。横幅が一定でない場合などは、「zoom:1;」というようなCSSハックを使用しなければなりません。

2.floatした要素にmarginを指定すると値が2倍になる

これもよく遭遇するバグです。対処法はこちら。

3.途中でテキストやボーダーが切れてしまっている

これもたまに遭遇します。対処法はこちら。

ホームページ制作カテゴリの最新記事

目次

※当サイトではWebサイトのことを、一般的な通称の「サイト」、「ホームページ」、「HP」などと表記しておりますが全て同一のことです。


« トップページへ戻る
↑ ページのトップへ戻る