表示が崩れてる!?そんな時の原因発見方法
ブラウザで確認をせずにコーディングに没頭していると、いつの間にか崩れてしまっているなんてことが結構多くあるのですが、その原因となる部分を見つけるのは、慣れるまではかなり時間がかかってしまう。自分もコーディングを覚えたてのころは、数時間も原因となる箇所を見つけることに悩んだりした時期もありました。
初心者などは、問題となる箇所を見つけるのに苦労したりすると思います。問題を解決させるために、CSSをどんどん加えていったり、important!をつけたりなんてことで解決させようとする人もいると思いますが、今回はその問題となる箇所を見つけるために、しておくといいことを、いくつか紹介します。
まず、あわてないこと
表示が崩れていたりすると、ものすごくあせってしまったり、解決しないとすごくイライラがたまってしまうなんてことがあるのですが、まず最初は落ち着くことですよね。あせったりイライラすると、結構簡単なことでも見落としてしまいますから。不思議ですよね。
Firebugを使う（値偏）
Firebugは必須ですよね。どこでどんな指定がされているのか、どのように指定が引き継がれているのかなどの確認をするのに便利です。
CSSをいくつもいろんな場所に指定していたとしても、ここを見るとすぐにわかります。崩れてしまっている場合、原因となりそうなところのCSSをチェックです。
しかし、CSSがたくさん指定されていたりして、最終的にどの値が使われているのかってわかりづらい。そこで、Firebugの右にある「オプション」をクリックして「算定されたスタイルを表示」にチェックを入れる
すると、全てのCSSから導かれて、適応されている値を知ることができる。算定された値でおかしくなっていることに気づくなんてこともあるので、ここも要チェック。
Firebugを使う（視覚偏）
それと、Firebugのもう一つの使い方の紹介。通常、見たいところにカーソルを合わせているだけだと、要素が枠で囲われるだけなのだが、HTML中の、見たいタグにカーソルを合わせると、要素が半透明のレイヤーで覆われる。視覚的にどのような指定になっているのか、チェックしやすいので、これも使うべき機能の一つ。
背景色をつけてみる
Firefoxで確認する場合は、このFirebugがあるから便利だし、IEでも「Internet Explorer Developer Toolbar」だったり、Firebug Liteなんかもあるのですが、シンプルに要素の背景色を変えてしまう方法も、原因を見つけやすくしてくれます。
単純にCSSに背景色を加えるか、でもそれだと面倒なので、HTMLの見たいタグのところに、styleでbackground-colorを指定するほうが見つけやすくなります。floatの解除し忘れや、合計値が大きくなっているなど、この方法だけでもかなり見つけやすくなると思います。
zoom:1;をつけてみる
上記の方法で、原因箇所を見つけたとしても、どう値を変化させても直らないときがある。特にIE関連でそういうケースが多いので、そんな事態になったら、気になる箇所に「zoom:1;」の指定をつけてみる。これは、問題となっている箇所で、hasLayout関連が原因で問題となっている可能性があるので、とりあえずこのzoom:1;をつけてみる。それで解決した場合で、zoom:1;を使いたくない場合などは、heightをつけてみたりして、hasLayputをtrueにすることで問題解決です。
CSSを削除してみる
時には大胆に、CSSをごっそり削除してみる。これをするときはバックアップを忘れずに。削除して、崩れがない状態までもどしてみて、そこからリトライするか、消したCSSの値を元に戻して、消した範囲内の部分だけを修正することで、早期解決させたりもできる。
方法をいくつか書きましたが…
原因を見つけたりする方法を幾つか書きましたが、結局はバグになるようなことを知っているかによって、見つけるまでの時間短縮になるので、バグを見つけたら、どんな状況でどんなバグだったのかをメモしたり、バックアップしておくなどして、その状況を覚えておくことも重要だったりします。後々知識をつけていった後に見直すと、意外と簡単な問題だったことに気づくかもしれないです。
ただただ、コーディングしていくだけじゃなくて、どんなバグにどのような状況で出会ったか、バグとか崩れに出会わないためにはどうしたらいいのかなど、できるだけ覚えておくことを、おすすめします！それが自分の経験となっていくのです！
