<< lolifox - lolif... Meadow - ビルドメモ >>
 

実例に学ぶCSSデバッグの一例(Firebug)

はじめに

 ブログのスキン編集をおこなっていると、なぜだかうまくできないときがありますよね。そんな問題の解決方法について実例を用いて説明したいと思います。
 参考になるのかわかりませんが、はじめての方にはなにかの参考になるかもしれませんのでよろしかったらご覧ください。

問題

 実例として以下の問題について考えたいと思います。

図に示すように、ログインをしない状態でコメント入力欄の名前とURLアドレスの入力欄に文字を入力しても表示されない。
a0031863_9194141.gif


現象の把握

まずはじめに現象について把握します。実際にブラウザで表示し、コメント入力欄の名前とURLアドレスに文字を入れて見ます。
確かに、名前とURLアドレスを入れてみると表示されないです。
しかしカーソルの位置は移動します。そして文字列を選択すると入力した文字列が反転します。

この場合は問題ないと思いますが、ブラウザのバグや仕様上の問題などがある場合もありますので、他のブラウザなどでも確認します。特にIE系はバグや仕様の問題が多いので注意が必要です。


推測

現象を把握したら推測をします。何が原因なのか、そして解決方法などを推測します。判らない場合は推測しなくても良いですが、もしかしたらこうではないのかと自分なりの推測をした後に、問題を解決すると判断能力がつきます。

この場合は、.TXTFLDにバックグランドの色または画像と同じ文字色が指定されているのではと推測します。

慣れると、現象の把握の時点で推測ができていると思いますが・・・


推測をしてからデバックを行うのがポイント





調査および修正

実際にその部分を調査します。手法はいろいろあると思いますが、Firebugを使うことにします。Firebugは指定した場所のCSSやHTMLを確認できます。問題の特定をする場合に役に立つので、普段から遊びながら慣れておくと実際の問題に出会ったときに役に立ちます。

1.Firefoxを起動し、問題となるサイトを表示する。コメント欄の調査なのでコメント欄を表示しておきます。

2.Firebugを起動する。

3.Inspectボタンを押します。
a0031863_10562988.gif


4.コメント欄の名前部分にマウスカーソルを合わせてクリックします。
a0031863_10584827.gif


5.styleにCSSが表示されます。指定した部分の有効なCSSの指定が表示され、無効になっているCSSは打ち消し線で表示されます。

a0031863_1112291.gif


6.予想とおり、.TXTFLDのバックグランドの色と、テキストの色が同じ色で指定されていることが判りました。colorの色の部分#ffffffをマウスで指定し、左ボタンをダブルクリックします。
編集可能になりますので#00000と入力します。コメント欄の名前の部分に文字を入力し、表示されることが確認します。

7.問題の場所が特定され、修正方法も判りましたので、CSSの編集を行います。今回の場合は.TXTFLDのcolorが#ffffffと背景色で指定されていましたので、.TXTFLDのcolorを#00000と黒色で指定して編集します。

8.CSSを編集し実際にコメント入力欄をブラウザで表示します。問題が解決されているのかチェックをし、問題が解決されているようであればこれで終わりです。

最後に

 今回のケースは比較的簡単な内容なのでFirebugを使うまでもないですが、Firebugの使い方についても説明をしたかったのであえて使ってみました。あくまでもこの方法は一例であってもっと簡単な方法もあります。

 問題が発生した場合、当事者は問題に注意が向きやすく解決方法が見えないことがあります。そのような場合は、一晩休むことしたり、別の方法を試すなどを行う方が、問題を解決しやすいことがあります。そのお話はまた機会があれば記事にしたいと思います。(この部分が実は重要だったりして・・・

関連記事


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2007-03-18 09:19 | │├デバッグ | Trackback | Comments(0)
トラックバックURL : http://potto.exblog.jp/tb/5251036
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
<< lolifox - lolif... Meadow - ビルドメモ >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。