タグ:Firefox ( 28 ) タグの人気記事

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

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

Firefox - メーラを起動させない方法

はじめに

 リンクをクリックするとメーラが起動するサイトがありますよね。ちゃんとこのリンクはメールだと分かるようにしてある場合は良いのですが、ごまかしてメーラを起動するサイトや判りづらいサイトなどありますね。私はメーラは起動しないように設定して、必要なときにメーラを自分で起動しています。そんな、Firefoxからメーラが起動しないようにする設定です。

手順

1.Firefoxのアドレスバーに "about:config"と入力する。

2.フィルタ(I)に"mailto"と入力する。

3.以下の、"network.protocol-handler.external.mailto"の値をクリックして"false"にする。

4.以上

変更箇所

network.protocol-handler.external.mailto



資料:user.jsの編集

上記"about:config"で設定ができますが、user.jsに以下のように追加しても可能です。設定項目が多い場合は"user.js"を編集した方が早いですね。

user.js

user_pref("network.protocol-handler.external.mailto", false);




参考:Mozilla Wishlist FAQ -2.6 メール・ニュース

さいごに

Firefoxは設定を書き換えるだけで、いろいろなことができます。カスタマイズ好きな方にはとても面白いブラウザのひとつではないでしょうか。興味のある方は、検索文字列にuser.jsなどと目的の内容などを入力して検索するといろいろな情報が得られますので探してみるのも面白いですね。
 なお、Webサーバに負荷をかけるような高速化設定なども紹介している場合もありますのでご注意下さい。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-12-20 23:20 | ├Firefox
 

Firefox Portable 2.0 の日本語化

はじめに

Firefox Portableの日本語化などの記事をいろいろ書いてきたのですが、ブログだと記事がどこにあるのか分かりにくいので、ホームページの方にまとめて記述することにしました。ホームページはTiddlyWikiで作成していますので、JavaScriptをONにしてご覧下さい。2つの日本語化のについて以下のアドレスで説明してあります。

Firefox Portableの活用

Firefox Portable2.0の日本語化


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-11-22 22:47 | ├Firefox
 

Firefox Portable の日本語化

はじめに



 Firefox 2がリリースしましたね。Firefox Portable はまだRelease Candidate 3のままなので、上書きインストールで最新版にしてみました。
詳細内容はWikiの方に書いてみました。
よろしかったらご覧下さい。

Firefox Portable の日本語化

Firefox Portable の日本語化 - TiddlyWiki版

Wikiの方が編集しやすい気がして、Wikiでまとめました。まだ情報が少ないですが、アップできたらいいなって思っています。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-10-25 19:12 | ├Firefox
 

Firefox Portable 2.0 Release Candidate 3 日本語化

はじめに

 "Firefox Portable 2.0 Release Candidate 3"を日本語化して遊んでみました。このFirefox Portable 2.0は、まもなくリリースされる Firefox 次期バージョンの候補版で、USBで利用できるようにしたものです。
簡単に日本語化する方法は2種類考えられ、拡張の"Japanese Language Pack"を入れる方法と日本語版を上書きする方法です。いつもは日本語版を上書きして遊んでいるのですが、今回は "Japanese Language Pack"を入れて日本語化してみました。
 なお、拡張などはまだ対応していないものもあるのでご注意下さい。(まだテストだよ、でもxpiのバージョン番号を書き換えたりすると使えちゃうこともあるよね)

手順


1.Firefox Portable 2.0を以下のサイトからダウンロードしてセットアップします。




2. Locale-Switcher Extension のインストール
Locale-Switcher Extension は言語を切り替える拡張です。以下のサイトからインストールします。



※ Locale-Switcher Extensionについては日本語化した後で削除可能です。

a0031863_21125581.gif


3.Japanese Language Packをインストールします。以下の、場所にja.xpiがありますので、このファイルをインストールします。



a0031863_2113873.gif


2.Portable Firefox を終了し再起動します。

3.言語切り替え
Portable Firefox のメニューのTool→Languages→Japaneseを選択
a0031863_21131857.gif


4.Portable Firefox を終了し再起動します。

5.以上で日本語化が完了。
a0031863_21133131.gif



関連情報



最後に

久しぶりに記事を書いてみました、USBでFirefoxを起動するのが好きなので、いつもFirefox Portable を利用しています。実際は、USB以外にもハードディスクにそのままコピーして入れる事ができ、いらなくなったら、フォルダ毎消せばいいので、Firefox Portable って結構気にっています。Firefox Portable が開発されていなかったら、自分で作っちゃおうかとも思ったのだけど、やっぱり自分で作るよりも利用させていただく方が楽ですね。

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-10-19 21:13 | ├Firefox
 

Portable Firefoxのバージョンが1.5.0.3になりましたね

Portable Firefoxのバージョンが1.5.0.3になりましたね

 昨日Portable Firefoxを1.5.0.3にバージョンアップする記事を出したら、今日Portable Firefoxのバージョン1.5.0.3が出ました。今回は早いですね。
 まだ日本語化の拡張が出ていないようなので、バージョンアップで更新するか、初めて日本語化される方は、日本語版のFirefoxを上書きインストールする方法があります。

バージョンアップの方法は、以下のリンクをご覧下さい。1.5.0.2用ですが、1.5.0.3でも利用可能です。
ぽっとの陽だまり研究室 : Portable Firefoxのバージョンアップ 1.5.0.2

また、これからPortable Firefoxを日本語化したい方はFirefoxを上書きインストールする形で日本語化をする方法もあります。
Web情報メモ : Portable Firefoxの日本語化


関連記事

関連記事は以下のリンクから得られます。
ぽっとの陽だまり研究室 : Firefox 関連記事メニュー

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-05-04 07:41 | ├Firefox
 

Portable Firefox を 1.5.0.3 にバージョンアップ(日本語)

はじめに

 Firefoxがバージョンアップし、1.5.0.3になりました。先日 Portable Firefoxの日本語化を行った方もいらっしゃると思います。日本語化をされた方はバージョンアップをすることにより、1.5.0.3にすることが可能です。(安全のために以前のファイルはフォルダ毎どこかにバックアップしておくことをお勧めします。

バージョンアップの方法は、以下のリンクをご覧下さい。1.5.0.2用ですが、1.5.0.3でも利用可能です。

ぽっとの陽だまり研究室 : Portable Firefoxのバージョンアップ 1.5.0.2

また、これからPortable Firefoxを日本語化したい方はFirefoxを上書きインストールする形で日本語化をする方法もあります。手順を更新しましたので、以下のリンクをご覧下さい。

Web情報メモ : Portable Firefoxの日本語化

a0031863_750160.jpg



バージョンアップの理由


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-05-03 07:50 | ├Firefox
 

Portable Firefox 1.5.0.2の日本語化

はじめに

Portable Firefoxのバージョンが、1.5.0.2になりました。今回のリリースは早いですね。1.5.0.2になってからフォルダの構成などが変わっていますので、上書きでバージョンアップする場合は、注意して下さいね。
なお、この記事はPortable Firefoxのバージョン1.5.0.2の日本語化の方法です。

この記事を楽しみにしている方って、いるのかな?
だれかひとりでも楽しみにしてる方がいればいいなぁって思っています。


Portable Firefoxのバージョン1.5.0.2の日本語化の詳細>>
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-04-29 20:08
 

Firefox 関連記事メニュー

はじめに

Portable Firefox関連の記事が多いので、記事のリストを作成することにしました。Portable Firefox関連の記事を探して、私のサイトを訪れた方は、このリストを参考にして下さいね。

Portable Firefox の日本語化


Portable Firefox を 1.5.0.3 にバージョンアップ(日本語)
Portable Firefox 1.5.0.2の日本語化
Portable Firefox 1.5.0.1の日本語化
USBで持ち運んで利用できるPortable Firefox の日本語化の方法です。拡張を用いて日本語化を行います。

Portable Firefoxの日本語化
 USBで持ち運んで利用できるPortable Firefox のもうひとつの日本語化の方法です。日本語版のFirefoxで上書きして日本語化をする方法です。Portable Firefoxはバージョンアップのタイムラグがあってちょっと遅いので、こちらの方法でバージョンアップして利用すると新しいバージョンで利用できます。

自分だけのPortable Firefoxを作る(ver 1.5.0.1)
 上記、記事を書くに当たってはじめに書いた記事です。上記記事を見れば、分かるので参考までに。


Portable Firefox のバージョンアップ


Portable Firefoxのバージョンアップ 1.5.0.2
簡単なバージョンアップの方法です。1.5.0.2にバージョンアップできます。

Portable Firefox のビルド


Portable Firefoxを自分でコンパイルして改造しちゃおう!
Portable Firefox をビルドして、自分だけのオリジナルPortable Firefoxを作成する方法です。ビルド自体は意外と簡単なので、チャレンジするのも楽しいかもしれません。


Portable Firefox の起動オプション


Portable Firefox の起動オプションで高速化?
起動オプションの設定方法について記載されています。ちょっと遊んでいるので、起動オプションの設定方法だけ参考にして下さいね。


Firefoxの設定をバックアップ


Firefoxのバックアップ
Firefoxの設定をバックアップするソフトの紹介です。


USBメモリで持ち運べるブラウザリスト


USBメモリで持ち運べるブラウザ
USBメモリでで持ち運べるブラウザのリストです。


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2006-04-29 00:31 | ├Firefox
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。