主にCSS初心者・初級者の方に向けた内容になりますが、CSSのスタイリング作業が苦手な方に是非参考にしていただければと思います。私もこれでCSSを克服することができ、今では切っても切り離せれない相棒ツールのひとつです。
CSSの理解が飛躍的に向上し仕事においてあらゆる点で有利になりますので、HTMLやCSSを覚えている最中の方には是非導入してみてください。
Firebugとは
一般的な言い方でいうならば、「WEBデベロッパーツール」の1つです。
いまではGoogle ChromeやInternet Explorer、Edge、Safaiなどのモダンブラウザには標準搭載されている機能で、ブラウザ上でCSSやHTMLのライブ操作ができます。
とくに既存の運用コンテンツであれば、迅速な課題解決には必須となってきます。
そして「Firebug」とはFirefoxブラウザのアドオンで導入する「WEBデベロッパーツール」です。
（※もちろんFirefoxにも標準機能として搭載されていますが別物です。）
もちろんCSS専用のツールではなくHTMLもJavasriptも調査できます。今回はあえてCSSにフォーカスしておすすめしていきたいと思います。
尚Chrome版もアドオンでありますが、Firefox版と使い勝手が違うのでまずはFirefoxに導入してみましょう。
Firebug Lite for Google Chrome
Firebugのいいところ
個人的な主観になってしまいますが、どのブラウザ同梱のWEBデベロッパーツールより、だんぜんUIが見やすいです。細かいところですが、色分けもしっかりされているので、最も使いやすくお気に入りのWEBデベロッパーツールです。
この使いやすさが実は非常に大事なポイントでして、UIが使いにくにい、メニューがすぐに探せないというツールは使いこなす前に手放してしまうことが多いです。
結局は自分の使いやすいものをまた探してしまうのですが、まだ不慣れな方はまずFirebugをおすすめします。
Firebugを使うべき理由①：課題解決の速さ
冒頭に申し上げましたが、Firebugを使うことでCSSの理解が飛躍的に向上します。
これは私の実体験でもあり、私がCSSの理解が一気に開放されたのはこのツールのおかげです。
もちろん今でも愛用しており、コーディング時にはとても助けられています。
「WEBデベロッパーツール」全般に言えることですが、何が最も優れているかというと、
「どこの要素にどのスタイルが当てられているか」が、
視覚的に１発で判明すること。
さらにそれをライブ修正できてしまうことです。
企業にお努めの運用系WEBデザイナーの方（昔は私もその一人です）の仕事として、新規のWEBコンテンツ作りより既存コンテンツの修正や改修の依頼が圧倒的に多いです。
ディレクターや営業の方とやりとりしているときに、
「ここの文字大きくしてよ、あと色も変更したいな」
「スマホで見た時ズレてるから直しておいて」
「ここのスペース空けてくれない」
「この動きCSSで何とかできない？」
といった依頼が山ほど来ますよね。自分が担当しているコンテンツであれば「アイアイサー！」ですぐ着手できますが、他の部署が担当している全く見たこともないページの修正が投げられてきたり、、、まあ色んな依頼があるわけです。
その時に、パッと調べて、サッ直せればいいですよね。
わざわざHTMLのソースコードからCSSをファイルを追いかけて該当のスタイルを見つけるなんて遠回りなことをしていたらいけません。
Firebugを使えば、どこに問題がありどこを直せばばよいかが一瞬で解決できてしまいます。
これを知っているか知らないか、さらには使いこなしているかで、仕事の速度が10倍変わってきます。
Firebugを使うべき理由②：CSS知識の蓄積
CSSにはさまざまなスタイルがあり、それをいかに効率よく組み合わせていくかが重要です。
paddingやmarginを
padding-top: 10px
padding-bottom: 10px
padding-left: 20px
padding-right: 20px
と４行使って書いていませんか？
省略化したショートハンドで
padding: 10px 20px 10px 20px;
と書いても同じですよね？
さらには
padding: 10px 20px ;
と書いてもいいわけです。
このように、ショートハンドで書けるコードもFirebug上のスタイルをいじっているときに自動で生成してくれますし、スタイルを補完してくれているうちに自然と覚えてくるようになります。
表示されている画面とHTML・CSSのソースを１画面で確認しながらライブ修正をしていると、スタイルの効果を見て覚える＆直して覚えるの繰り返しで自分自身の学習力が飛躍的に上がります。
私個人としては、CSSだけを一生懸命調べて覚えていくより、スタイルはうろ覚えでも、画面を見ながら色々なスタイルを当てて効果を実際に見ていくほうが実戦向きでおすすめだと思います。
というかこれがCSSマスターへの最も近道であると思っています。
でもFirebugを過信してはいけない
WEBデザイナーとして一人前になった自分でも、当然ですがFirebugだけを過信してはいません。
それは複数のモダンブラウザが存在する以上、全て同じレンダリングにならないからです。
新規で制作したコンテンツは、まず100％ブラウザによって小さな見た目の差異が生じています。
この差異を埋めていく作業もけっこうしんどいのですが、ここからはFirebugだけで解決出来る領域ではなくなり、各ブラウザのWEBデベロッパーツールを駆使していかなくてはなりません。
その作業をしているなかで、「このスタイルで回避できそうだ」「これをハックにして追加で当てておこう」と道筋を見つけ、徐々に完成へと向かって行くわけです。
レベルアップしたあとは・・・
最初はFirebugだとしても、レベルアップしたときお気に入りのWEBデベロッパーツールは変わっているかもしれません。私の周りではGoogle ChromeのWEBデベロッパーツールを使っている方が多いですが、Javascriptを弄るときはChromeのWEBデベロッパーツールが使いやすい印象です。
それでもHTML/CSSレベルではFirebugのほうが操作性が良く全然使いやすいので、私はFirebugをメインで使っています。
まとめ
いかがでしたでしょうか。
WEBの世界に飛び込んだものの、ソースコードを触ることが苦手またはなかなか伸び悩んでいる方はまだまだいらっしゃると思います。CSSに関しては今回紹介したレベルではまだまだ序の口です。
アニメーション、変形、疑似要素を理解すればもっと表現力が上がり、もっと高度なソースコードが書けるようになります。
それを実現してくれるのは、毎日の不断の努力をコツコツ積み重ねた結果でしかありませんが、そのサポートをガッチリしてくれるWEBデベロッパーツールを使いこなして、是非とも制作の良き相棒にしてくださいね。
