CSSスタイルシートの調整が簡単になるFirefoxアドオン　Firebug～ねこせつ

CSSスタイルシートの調整が簡単になるFirefoxアドオン　Firebug

この記事を後で読む→

画像はクリックすると拡大できます
リンクフリーです。記事への直リン歓迎。

前回のエントリー　「Firefox特徴まとめ」　からFirebugについて
HTML/CSSコーダーとしての立ち位置から解説いたします。
どうでもいいですがCoderって英語としてどうなんですかね？響きもあまりかっこよくないし。

Firebugおさらい

・JavaScript（DOMやAjaxも）のデバッグに必須（今回は触れません）
・HTMLの構造を視覚的に把握できる
・CSSスタイルシートの確認・調整テストができる
まず初めに。
デバッグを期待していた方はがっかりするかもしれませんが私はJavaScriptが苦手です。DOMもAjaxも。
なのでデバッグについては他サイトを参考にしてください。
下記サイトが参考になるかと思います。

0xFF
GoogleAPIを開発されてるそうです。Googleとか超エリート。

あとは書籍も参考にしてください。
ネットと書籍を上手に使うことが情報社会の波に上手く乗っていく解決策です。
【送料無料】JavaScript ＆ Ajaxプロが教える“本当の使い方”

１．HTMLの構造を視覚的に把握できる。

猫説（ここ）のソースで申し訳ないんですが

右下の虫さんのボタンを押すとFirebugの画面が開きます。

Firebugの画面左側で＋ボタンを押すとタグが展開され、子階層が見れます。
＜div＞タグとか＜form＞タグとか＜table＞タグとか。
構造がぱっと見て分かるようになります。これ重要。

２．CSSスタイルシートの確認・調整ができる

これまた猫説のソースで申し訳ないんですが

調べたい箇所のHTMLタグをクリックすれば、そこに対応したCSSが表示されます。
CSSファイルの何行目の記述か、何ていうCSSファイルなのかなども分かります。
更にコーディングするときにイメージしづらいpaddingやmarginが視覚的に。

更に調整テストもできます。（テストなので実際はCSSファイルを編集してくださいね）

この行を無効にしたらどうなるんだろう？
この数字を変えたらどうなるんだろう？　がリアルタイムに分かります。

もちろんfloat:left等も切り替えできますので2カラム3カラム表示のテストにも使えます。

さらにさらに左のボタンを押して、マウスを見たい要素の上にもっていけば

こんな風にエリアが分かります。
これで編集したいタグがどこにあるのか分かりやすい！

私が主に使ってるのはこんな機能です。
他にも便利な使い方があればぜひ教えてください。

現役HTML/CSSコーディングされてる方も、これから勉強する方も便利なツールです。
FC2ブログもCSSが自分で触れますので、ブロガーの方も活用してみてください。

ありがとうございました。

この記事を共有しませんか？