<< GTD - テキストエディタで... lolifox - lolif... >>
 

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)
トラックバックURL : http://potto.exblog.jp/tb/5279790
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
<< GTD - テキストエディタで... lolifox - lolif... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。