「ほっ」と。キャンペーン
 

タグ:デバッグ ( 3 ) タグの人気記事

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
 

CSSデバッグ - 視点を変えて楽しくね

はじめに

 なにかトラブルや問題に出会うと、問題の部分に視点が向きやすく、解決に視点が向きにくいケースがあります。原因を追究する時間を多くとりすぎると解決できずに時間だけが過ぎてしまい、結果的にはロスが多い場合があります。
プロジェクトをうまく進めることができるリーダなどは、原因に視点を向けるのではなく、解決方法や未来に視点を向けることが上手な方がいます。
 CSSのデバッグでも同じように、原因に視点を向けるのではなく、これからどのようにしたいのか未来に視点を向けて解決する方法を考えると、気持ちが楽になり解決が速くなるかもしれません。そんな、ちょっと視点を変えたCSSのデバッグ方法です。なお、デバッグ対象は前回と同じ内容です。

問題

 実例として前回と同様の問題について考えたいと思います。前回と同じ内容なので解決方法が違うとどのようになるのか分かりやすいかもしれませんね。

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


どのようにしたいの?

本当はどのようにしたいのかを考えます。できればこうなると楽しいなぁ~ とか感じられると解決するプロセスが楽しくなります。そこで、私の完成イメージは次のとおりです。この時に、頭の中で実際にイメージできるとさらに良いです。

私の完成イメージ


コメント入力欄の背景は白色で、文字は黒にしたいなぁ~



どうしようかな

頭のなかで完成イメージができたので、どのようにしたら完成できるのかを考えます。今回はコメント入力欄のHTML部分を見て考えてみましょう。

前回の記事を参考にFirebugでコメント欄を選択し、HTMLのコードを見てください。以下のようなHTMLコードになっていると思います。

前回の記事:ぽっとの陽だまり研究室 : 実例に学ぶCSSデバッグの一例(Firebug)

<input type="text" style="font-family: osaka,verdana,arial; width: 320px;" class="TXTFLD" maxlength="15" size="10" name="name"/>


このHTMLコードからコメント入力欄はinputタグにclassが TXTFLD として指定していることが分かります。今回は、TXTFLD classに対して文字と背景色を指定してあげればよさそうですね。

そこでCSSを以下のように指定したいと考えました。

CSS

.TXTFLD{
background:#ffffff;
color:#000000;
}



では修正しましょう

修正案は決まったのですが、どこかで不具合があってうまくできない可能性があるので、修正案で行ったclassについて調査してみます。
 classは .TXTFLDですね、CSSを見てみるとcolorの色の部分#ffffffになっていますね。そこで .TXTFLD のcolorを#000000 に修正してみます。

あ、うまく行きました。これでよさそうですね。

最後に

今回は視点を原因ではなく解決に向けた方法です。問題解決と言うと原因に目を向けがちですが、解決に視点を向けると問題が解決しやすいことがあり、私はこの方法を無意識に使っています。なによりも、完成イメージを考えてわくわくしながら行うので、とっても楽しいのがこの方法の良いことではないでしょうか。

 同じ問題でも、解き方によって違うケースについてでしたがいかがでしたでしょうか。みなさんも自分なりの方法を見つけてブログを楽しんで下さいね。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2007-03-24 15:11 | │├デバッグ | Trackback | Comments(0)
 

実例に学ぶ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)
 

CSS - FirefoxのFirebugはスキン編集に便利ですね

はじめに

普段のブラウザがFirefox以外でも、ブログのスキン編集にはFirefoxが意外と便利です。私もはじめは別のブラウザを利用していたのですが、Firefoxの機能がとても豊富で私に合っていたので、Firefoxが好きになってしまいまいた。今回は、そんな便利なFrefoxの拡張の一部を紹介させて頂きます。


Firebug

普段はJavaScriptのデバッグに利用しています。ステップ実行と変数の内容を表示できるので便利です。CSSの編集では、各要素の定義を調べるのに使っています手順は次のとおりです。

【手順】
1.Inspectボタンを押して、チェックしたい部分をブラウザの画面をマウスクリックします。

2.Styleタグを押すと、図1に示されるようなStyleをチェックすることができます。

a0031863_7452865.gif

図1 Firebug

【特徴】
 各部分のStyleを調べると、打ち消されて別の指定が適応されている場合は打ち消し線が表示されます。したがって、調べたい部分のStyleがどのCSSで適応されのかが判るので、デバッグにも利用できます。また、Layoutもお勧めです。図2のLayout結果を見ると、marginやpaddingの状況を視覚的に知ることができます。

a0031863_75336.gif

図2 Firebug - Layout

【入手先】
拡張:https://addons.mozilla.org/firefox/1843/

 公式:http://www.getfirebug.com/

最後に

Firebugはまだいろいろな機能があります、残りの機能は皆さんが使ってみて体験して下さい。きっと、驚くような機能が含まれていることに気がつくでしょう。そして便利な機能を発見したら、記事で紹介してみませんか。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2007-02-25 07:41 | │├デバッグ | Trackback | Comments(0)
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。