THE HAM MEDIA BLOG

意外と知られていない機能が多い!?Firebugの使い方

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
CSS
HTML
Firebug
Firefox

Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。

Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会(SaCSS)にて発覚!使っているといっても、一部の機能に限られてしまっているようなのです。

もちろん「そんな機能知ってるよ!」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない!という人も勉強会の時に多かったように、実際にも多いはず!

Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ!と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。

HTML&CSSの確認

コーダーが基本的に一番使っていると思われる機能です。表示されているページのHTMLとCSSを表示しています。HTMLの表示は、JavaScriptによる変化も表示してくれますし、属性値やテキストもその場で編集してみることもできます。


THE HAM MEDIAでFirebugを使用した表示

見たい要素を表示部分から指定することも可能です。


「ページ内の調べたい要素をクリックしてください」

「ページ内の調べたい要素をクリックしてください」から要素を選択することができます。選択した要素はHTMLだけでなく、Firebugの右側にはその要素に適用されているCSSが表示されています。


選択中要素のCSS

スタイルの一番上に表示されているセレクタが最も(適用される)力が強く、下に行くと、親セレクタなどから継承されてきているCSSが順に表示されます。上書きされたプロパティ(より強いセレクタで指定が入っているプロパティ)は横線が入っていて、適用されていないのが視覚的にわかります。

セレクタの右側には、そのCSSが書かれているファイル名と、何行目に書かれているかが青文字で表示されています。ちなみにそのファイル名と行番部分はリンクになっていて、クリックするとFirebugのCSSタブに自動で移り、該当ファイルと該当行が選択されて表示されます。

スタイルの累計表示

通常だとスタイルで表示されているCSSは、セレクタごとの適用されているCSSになっているのですが、スタイルタブの右にある累計タブでみると、最終的にどの値で表示されているのかの「スタイルの累計値」を一目で確認できます。

このタブは地味に便利で、継承された値の計算結果後の値もそこで一発で確認できます。例えば値が%(パーセント)やemで指定されたフォントサイズなど、継承が行われたあとの最終的な値が、px単位で確認することができます。値がどのようになったのか分かりにくくなっているような場合でも、この累計タブでみると、すぐにわかるようになっています。


累計タブにて表示

勉強会の時、この累計タブを知らなかった人がなんと9割もいました。いろいろ聞いてみたところ、主に使っているのはHTMLとスタイルタブだけくらいとのこと。

個人的にはこの累計タブの利用、おすすめです。

スタイル(CSS)の適用・未適用

HTMLのスタイルタブでは、適用しているプロパティそれぞれに対して、適用・未適用の変更がすぐにできます。


何も追加・削除していない状態

例えば上の画像の状態になっているプロパティのうち、floatの適用を外してみます。


floatの適用を外した状態

すると、表示しているサイトで、リアルタイムに表示がかわります。上の画像の例で言うと、floatのスタイルが外れた状態になります。

今度はfont-weightを外してみましょう。

表示されているフォントの太さがすぐに変化します。

値の変更

適用されているプロパティの値も変更することが可能です。


カラーにマウスを乗せた状態

色の値や背景画像のURL部分にマウスを乗せると、その値の色や画像がポップアップしてくれて、その場で視覚的に確認することができます。

では、先程2つプロパティの適用を外した状態のところに、さらにフォントの色を変更してみましょう。


フォントの色を赤色に変更

フォントの色が赤色に変更されてすぐに表示も変わります。

先程、適用を外した二つのプロパティを再び適用して、ついでにフォントも大きくしてみたりします。font-sizeやその他paddingやmarginなどは、変更したいプロパティの値にフォーカスさせて、上キーや下キーを押すと、1pxや1%ずつ値を変化させることができます。

プロパティの追加

適用・未適用や値の変更だけでなく、プロパティを追加することも可能です。


透明度のopacityを追加

セレクタの、プロパティが書かれていない空白の部分("{"もしくは"}"の部分横の空白)でダブルクリックしたり、右クリックの「新しいプロパティ」で追加することができます。

ここまでのスタイルの適用・未適用や値の変更などは、表示が崩れてしまった時や、ちょっと見た目を修正したい時など、細かな修正で重宝しますので、実際の表示を見ながら修正したいなどの時に活用してみてください。

レイアウトタブ

ここも使っているという人が少なかった箇所。たしかにそんなに使う機会はないかもしれないですが、機能だけは知っておきましょう。ここでは要素をボックスモデルで表示させてみた時の値が表示されます。縦横のサイズ、padding、border、marginのそれぞれの値を上下左右のそれぞれで確認できます。もちろんここでも値の変更が可能。

そんなに便利ではないのですが、このボックスモデルにマウスを乗せると、画面上に目盛りが表示されます。大して役にはたちませんが・・・

マウスを乗せた状態にしてくれる「:hover」

これは「:hover」の擬似クラスをつけた要素を、実際にマウスが乗った状態にしてくれます。


:hoverの適用

擬似クラスに値を入れている時など、その状態をチェックする歳に役立ちます。:hoverの他には:active状態にもしてくれます。

注意としては、あくまで:hoverの擬似クラスをつけたCSS面でのチェックが可能なだけであって、JavaScriptでの変化には対応していないです。

HTMLタブの表示を変更

HTMLタブで表示されるソースは、実際のソースと異なっていて、JavaScriptでの変更も反映されます。

デフォルトだといくつか表示されていないのがあるのですが、個人的にはコメントなんかもどこにどんな風にはいっているのか確認したい場合がありますし、ソースの位置の確認にも便利なので、コメントを表示にチェックを入れて表示させるようにしています。

あとは、時々、JavaScriptの変化がよくわからないときに、自動で展開してくれるように、そこにチェックを入れたりしてみるときもあります。

皆さんも、ここは使いやすいように(確認しやすいように)個々で修正してみるのをおすすめします。

クィック情報ボックスでの表示

今回の最後にこれをクィック情報ボックスの表示についてをご紹介。クィックなのかクイックなのか・・・なんてのはまぁ置いといて、これにチェックを入れておくと、要素の累積スタイルの一部がすぐに確認できるようになるという。


クィック情報ボックスを表示させた状態

何気に確認に便利かななんて思って表示させようとした時期もあったのですが、実はけっこうウザイ。要素が変わるたびにチラチラアニメーションするので、ちょっとイライラ。確認時には便利なんだけどなー等と思いながら使っていないけど、「こんな機能もあるのか!」ってのを是否知っておいてください。

まだまだ便利機能豊富なFirebug

今回はHTMLとCSSについてのFirebugの使い方や機能を紹介しました。しかし、まだまだ便利機能は多いです。コンソールなどなど。機能豊富で使いきれてない方もいると思いますが、ぜひぜひいろいろ使ってみてください。

参考サイト:
この記事へのコメント
はてなブックマークからきました

とても参考になりました

ありがとうございます
Posted by 人生とは?ユッキー at 2013年05月09日
なるほど

参考になりました

他の記事も拝見させていただきます

ありがとうございます
Posted by 毒舌野郎 at 2013年05月09日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/154387441
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック

これはすごい!Firebug!
Excerpt: WEBサイト制作に携わって、早2年。 もしかしたら、今の今までものすごい大きな見逃しをしていたかもしれません。 そんなことを思ってしまう、WEB制作者に便利な機能の詰まったツール、Firebugのご..
Weblog: ハイ!チーズ!web
Tracked: 2010-07-13 14:33

SafariのWebインスペクタはFirebugの代わりになるのか??
Excerpt: <p>仕事ではFirebugは必須のツールになりつつありますが、最近使用頻度が増えてきているSafariでも同様のことができないもんだろうか?と思い見てみました。</p>
Weblog: linker journal
Tracked: 2010-08-09 23:31

コーディングのスピードを上げる為の6つの方法
Excerpt: 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとや..
Weblog: Webクリエイターボックス
Tracked: 2010-11-01 11:01

変数と配列
Excerpt: Firebugの使い方
Weblog: ECサイト店長からウェブデザイナーへの道〜JavaScript編〜
Tracked: 2011-04-12 02:17

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。