カテゴリ:│├デバッグ( 6 )

 

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 | │├デバッグ
 

実例に学ぶ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 | │├デバッグ
 

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 | │├デバッグ
 

スキン編集 デバッグ講座:全角空白

はじめに

 ちょっとしたことなんだけど、知らないと悩んじゃうことってありますよね。一晩経ってから見てみると、なんでこんな単純なことに悩んでたんだろうって思ったり。そんなのは、私だけでしょうか。
そんな方に向けた、初心者向けのデバッグ講座です。


詳しくは>>
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-10-15 15:16 | │├デバッグ
 

スキン編集 デバッグ講座:タグ閉じのチェック

はじめに

初心者にとって、スキン編集はちょっと難しいと感じられるかもしれません。ちょっとしたことでも初めてのことですから、つまずき易いものです。そんな、つまずき易いことのひとつである、タグが閉じていない場合の簡単なチェック方法について説明させていただきます。
初心者も、常連さんもよろしかったら見て下さいね。


詳しくは>>
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-09-03 18:12 | │├デバッグ
 

スキンデバッグ講座:ソースの比較

はじめに


スキン編集を行っていると、うまくできないとか、何でだろうとかいろいろ分からないことが出てきますよね。そんな、トラブルの解決方法の秘密をちょっとだけあなただけに紹介する不定期な企画です。今回限りで終わるのかそれとも続くのか、ちょっと分からないけどやってみたいと思っています。
ちょっと難しく感じられる場合は、読み飛ばしてこんな方法もあるんだ位にとどめておいて下さい。
このテクニックを使おうって、思う日が来たらもう一度ご覧下さい。


ソースの比較

スキン編集を行っているとなんだか上手くできなくいことが多いですよね。今までよかったのに、何かを変えたら上手くできなくなることってありますよね。でも、なにを変えたのかが分からなくなることがあるようなので、簡単なチェック方法を教えちゃいますね。


本当は、変更箇所は1箇所だけやって、プレビューではなくちゃんと確認を行っておくと判断しやすいのですが、小さな違いは2~3日経ってからじゃないと分からない時もあってそんなときはどうしたらよいのか。
そんなときは、ソースの比較を行うとよいですよ。
編集前にバックアップを行って、問題のあるソースと比較を行います。
比較を行うと、変更箇所が分かるため問題となっている場所を特定し易くなります。

でも、ソースをひとつづつエディタで見ていったら大変ですよね。
そこで、登場するのがソースを比較するソフトです。



ソースの比較ソフト


私が利用しているソースの比較ソフトは、「ExamDiff 」です。英語のソフトだけど、操作はそれほど難しくないです。他にもファイルの内容を比較するソフトがあると思いますので、自分に合うソフトを探すと良いと思います。

ちなみに、、「ExamDiff 」は以下のアドレスから入手できます。
http://www.prestosoft.com/ps.asp?page=edp_examdiff



実例

実際にあったことです。この記事を読んでいて、「あ、私だっ」て思われた方がいらっしゃると思いますが、あのときに何を行って解決をしたのかその裏話なので当事者も、そして当事者でも無い方も興味がある方は読んで下さいね。

とある方から、エキサイトのノーブルリースのスキンのドラゴンで図1のように隙間が開いてどうしたらよいかとの問い合わせを頂きました。とっても丁重に好感の持てる質問のされ方だったので、頑張っちゃおうかと思っちゃいました(ぽっと結構単純です。)

a0031863_23542873.gif


図1 問題の隙間


この件もらったのはいいけど、どこに問題があるのか。
そして、どこから手を付ければよいのか考えました。
そして、まずHTML部分なのかCSSの部分なのかを調べました。

まず、当事者のサイトからソースを取り出してローカルで実際に同じ現象が起こることを確認します。

次に、ソースのCSS部分をデフォルトのCSSと差し替えます。
そして、同じ現象が現れるのか確認を行います。(今度この方法もお話したいですね。)

今回は、CSS部分をデフォルトに置き換えると正常になることが分かりました。
つまり、HTML部分ではなく、CSS部分に原因があることが分かります。

そこで、CSSがどのように変更されたのか調べることにしました。
デフォルトと問題の両者のCSSをファイルの比較ソフトで比較したところ、数箇所の変更部分を見つけることに成功しました。

そこで、デフォルトのCSSにひとつずつ変更を加えて現象を見ることにしました。
そして見つけたのが、.TXTFLDが抜けていることでした。
.TXTFLDをデフォルトと同じように設定を行うようにお願いをして、今回の問題を解消することに成功しました。

みなさんも、変更箇所を見つけられるときには、ファイルの比較をお勧めします。
今回のケースはデフォルトのソースを入手できたため、解決できましたが、実際はバックアップを行っていない限り難しいかもしれません。
しかし、個人でスキン編集を行って自分で問題を解決する場合は、スキンのバックアップをおこなっているとこのような手法を用いて、変更箇所を特定し、問題箇所を見つけることも可能になります。



最後に

いかがでしたでしょうか。ちょっと難しいですか?でも、こんな方法もあるってことを知るだけでも、ちょっと違いますよね。たまにはこんな記事もいかがでしょうか。ちょっと記事が長くなりましたが、皆さんのスキン編集のお役にたてると嬉しいです。


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