Recent Entries

スポンサーサイト

[スポンサード リンク]


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FirebugでWebページのHTMLやCSSを簡単にチェックする!

[スポンサード リンク]


Firefox用アトオン Firebugはとっても便利な開発ツールです。
開発ツールというと難しく感じますが、WebサイトのHTMLやCSSのチェックなどにも使えます。
『ここの表示がおかしい!』とか『色替えたらどんな感じ?』と思ったら、Firebugで調査出来ます。
Webページをカスタマイズする上でとても便利なアドオンです。
Webサイトを管理している方はぜひ一度使ってみましょう。

ダウンロード Firefox用アトオン Firebugのダウンロードはこちら。
Firebug :: Firefox Add-ons

今回はFirebugの使い方をすごく簡単に説明してみます。(デバッグ関係は無し)
ブログなどのデザインチェックにとても有効だと思いますので覚えちゃいましょう。
HTMLとCSSのチェックが驚くほど簡単に出来ますよ。(知識が必要ですが・・・。)

Firebugの使い方

Firebugを起動するには、Firefoxの上部のツールバーにあるアイコンか、下部のステータスバーにあるアイコンをクリックします。

Firebugのアイコンはこの虫です。
Firebugのアイコン

ツールバーのアイコンとステータスバーのアイコンでは、クリックした時の動作が少し違います。

  1. ツールバーのアイコンは、Firebugを新しいウィンドウで開きます。
  2. ステータスバーのアイコンは、Firefoxの下部にドッキングします。

どちらも内容は同じなので、使いやすい方でOKです!

さて、実際にこのブログのTOPページをFirebugで開いてみます。
今回はツールバーのアイコンをクリックしてFirebugを新しいウィンドウで開きました。

Firebugのメインウィンドウ

最初は「コンソールパネルは停止しています。」となります。
コンソールにチェックを付け「miracleblues.blog46.fc2.comで選択された機能を有効にします」とういボタンをクリックすれば動きます。

Firebugのコンソールを有効にする
(このボタンはウインドウの下の方にあります。)

Firebugのコンソールを動作させるとFirefoxが少し重たくなるかもしれません。
また、コンソールは一度Webサイトを登録すると有効になったままになりますので、必要ない時は停止しましょう。

Firebugのコンソールを停止する

Webサイト単位でも停止出来ますし、全体的に停止する事も出来ます。
「使用するサイト」をクリックすると各サイトにおける現在のコンソールの動作状況がわかります。
登録したサイトの削除もここで出来ます。

今回は、コンソールにはこれ以上触れません。(停止でOK!)
コンソールの使い方はこ下記Webサイトがわかりやすいので見てみてください。

Firebug とコマンドライン

Firebugのコンソールを使いこなしたい方は色々弄ってみましょう。
わたしにゃよくわかりません・・・。

FirebugでWebページのHTMLやCSSを簡単にチェックする

さて、ここからがこの記事の本題です。
FirebugはHTMLとCSSのお勉強にもなりますので使い方を覚えましょう。

まず、FirebugウィンドウのタブをHTMLに替えます!

FirebugのHTMLタブ

ウィンドウにお馴染みのHTMLタグ(ソース)が表示されましたね。
これがこのWebページのHTMLソースです。

「+」や「-」で各要素が折りたたまれているのでとても見やすくなっていると思います。
「+」をクリックするとその要素の中が見えます。また、「-」をクリックすると中身が隠れます。

次にウィンドウに書かれたHTMLタグの先頭(要素名)を上からクリックしてみましょう!

FirebugのHTML

すると、右側のウィンドウにそのタグに設定されているCSSが表示されます。
Webページでおかしなところを見つけたらチェックしてみてください。

また、HTMLタグの先頭(要素名)以外のプロパティもクリックしてみましょう。
下の画像のように、idなども簡単に変更出来るようになってます。

Firebugでソースを修正する

また、CSSのプロパティの横に出る禁止マークをクリックすると簡単にそのスタイルだけを消す事も可能です。

FirebugでCSSチェック

ここでHTMLやCSSに加えた変更は、現在開いているWebページに反映されます。
つまり、その場で変更した内容をチェックできるという事です!

CSSウィンドウも同様にチェック&テストができますので試してみてください。

FirebugでCSSをチェック!
(※もちろん実際にHTMLやCSSが変更されるわけではありません。)

このようにしてFirebugでは簡単にHTMLやCSSのチェックとテストが出来ます。
Firebugのウィンドウは最大化するととても見やすいですよー。

どうでしょう?結構使う機会があると思いませんか?
私はしょっちゅうFirebugを使ってますよ。
それがFirefox3がメインのWebブラウザになった理由の一つでもあります( ´∀`)

さらにFirebugにはWebページの調査機能があります。
ツールバーのメガネアイコンがそうです。
(無かったらツールバーのカスタマイズから追加出来ます。)

firebug2.png

調査を実行すると、Webページ上でマウスオーバーした場所(青線の中のブロック)のHTMLタグとCSSの内容がFirebugウィンドウに表示されます。また、逆にFirebugのHTMLタグマウスオーバーすると、Webページの該当する箇所が青い線で囲まれます。
これならページソース全体からでは探しにくい場所も超簡単に見つけられます。
忘れやすいclassやidの確認にも最適ですよ!

Firebugの調査

上の画像の状態の時、Firebugのウィンドウには該当するHTML(<div class="entry_body">)が表示され、右側のCSSにも該当するスタイルが表示されます。
画面をクリックするか、調査アイコンをもう一度押すと調査が終了します。

コレすごく便利です。試さないときっと後悔しますよ~(b´∀`)

あとFirebugにはHTMLやCSSの他にも、DOM、スクリプトのデバッグ、レイアウト、ネットワークの接続状況などを確認する機能も含まれています。使いこなすには時間がかかりそうですが、とても便利な機能ばかりなのでぜひ一度使ってみてください。

Comments

omoro : No title

Firebugインストールしてみました。
おもしろいですね。全然使いこなせてはいないですけど、すごい勉強になる。
確認とかにすごい役立ちますね。

パペポ : No title

omoroさん、こんばんは!
Firebugはhtmlとcssの確認にとても便利ですよ~。
ブログ弄ったりする時にぜひ使ってみてください^^

気ままな宇宙人 : No title

この間ブログのCSSをいじる前にこの記事を見つけたかったです。Firebugを使ったのですがいじり方が全然わからなかったので...

この記事を読んだので今度使う時は大丈夫かと思います。

パペポ : No title

>気ままな宇宙人さん
少しは参考になったようで良かったです^^
スタイル変更の際のCSSなどの微妙な修正にはとても重宝します。

ちなみにFirebugでCSSを弄る際のテクニックを少しご紹介しておきます。
要素に新しいプロパティを追加する際は何文字か打った後にカーソルキー上下を押す事で入力を短縮出来ます。
また、pxなどの指定もカーソルキー上下で1pxずつ増やしたり減らしたり出来ます。
本当に良いアドオンなんですよぉ~

Comment Form