<   2007年 03月 ( 4 )   > この月の画像一覧

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

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)
 

lolifox - lolifoxをUSBメモリで起動するプログラム

はじめに

Firefoxを基に作られたlolifoxをUSBメモリで起動するプログラムを遊びで作ってみました。まだテストバージョンなので、仕様変更とかありそうですが、よろしかったら遊んでみて下さい。
なお、lolifoxは入っていないので、インストール手順に従って入れて下さいね。

a0031863_20301789.gif


公開場所

lolifoxのことについてよく分かっていないので、問題がある場合は公開を中止しますので予めご了承下さい。

http://lolifox.potto.client.jp/


最後に

空き時間のちょっとした時に作ってみました。まだ今日作ったので、テストがこなれていないかもしれません。私が使って試しながら修正をしますので、ゆっくりまって下さいね。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2007-03-21 20:30 | ├自作ソフト | 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)
 

Meadow - ビルドメモ

はじめに

今日はテキストエディタのひとつである、emacsの中でも、Windows対応で日本語の親和性の良いMeadowをビルドしてみました。その記録です。
 現在、Meadowが私の環境で快適に動いています。なおこのMeadowにw3mを入れると、MeadowでWebを閲覧することができるようになります。


開発環境

Meadowをビルドするには、開発環境が必要となります。CygwinとMinGWをインストールしました。

Cygwin Information and Installation
MinGW - Home


Cygwin/etc/profile ファイルを修正し、MinGW を利用できりょうに以下のように設定しました。なお、/cygdrive/c/MinGW/bin をはじめの方に設定すると、MinGWのgccを常に利用するようです。(ちょっと強引かな^^;)

profile


PATH=/usr/local/bin:/usr/bin:/bin:/usr/X11R6/bin:/cygdrive/c/MinGW/bin:$PATH



※注意:make 3.80が必要ですが、make 3.81 以上がインストールされると思います。make 3.80は以下のサイトに書いてある場所から入手し、解凍してからCygwinのmake.exeを上書きします。

Windows Build Prerequisites - MDC
Windows build prerequisites using cygwin - MDC

追記:MinGWは、Cygwinのインストールでも入れることができます。MinGWをチェックしてインストールするだけです。


ソースの入手

最新版のソースは以下のサイトに従って入手します。

ソースファイル - Meadow - Trac


ビルド

ビルドは以下のサイトに従って行います。

コンパイル - Meadow - Trac


最後に

ビルドのポイントはmakeのバージョンです。make 3.80を入手できれば、ある程度はクリアできたも同然です。あとCygwinがインストールできているように見えても、ちゃんとインストールが完了してなくてうまくできないことがあります。(今回これでつまずきました^^;)
Cygwinを再インストールしたら問題なくビルドできたのですが、意外とつまずき易い場所かもしれません。


関連記事


ぽっとの陽だまり研究室 : w3m -
テキストブラウザのビルドメモ


追記:w3mを利用するためには、以下のサイトからemacs-w3mを入手する必要があります。
Text browser works on Emacs

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