CSS 開発

CSS を調査

Firebug が無い場合、もしあなたのページで黒く表示されるはずのヘッドラインが青く表示されてしまったら、頭を掻きむしるのを止められないでしょう。でも Firebug でその問題部分を調査すれば、どの CSS が問題を引き起こしているのかが瞬く間に明らかになります。

Firebug は要素のデザインを設定しているルールを表示します。ルールは優先順位でソートされ、上書きされたプロパティには取消線が引かれます。それぞれのルールは元ファイルへのリンクを持っており、リンクをクリックするとそのルールのある行へジャンプします。

画像と色のプレビュー

CSS タブ内の画像の URL やカラーコードをマウスオーバーすると、その画像や色をプレビューできる便利なツールチップが現れます。画像ツールチップには寸法も表示され、特に、ある要素を画像の大きさにぴったり合わせて構成したい場合にはとても役立ちます。

触って摘んで弄くって

かつてない程簡単に CSS を編集出来ます。CSS プロパティをクリックすると小さなテキストエディタが表示され、施した変更は打ち込むと同時に適用されます。オートコンプリート機能も備えており、タイプする毎に候補のリストが表示されます。また、Esc キーで施した変更をキャンセルしたり、Tab キーで次のプロパティにジャンプしたり出来ます。

小さくなるよ大きくなるよ

文字列の入力の際に時間の節約に多大な貢献をするのがオートコンプリート機能なら、数字の入力に役立つのが上矢印キーと下矢印キーです。Firebug で数字を編集するとき、上下の矢印キーで 1ずつ、[Page Up] と [Page Down] で 10ずつ数字を増減出来ます。

習うより慣れよ

まだあなたが CSS を習得中なら、Firebug はボキャブラリーを研ぎ澄ます優れたツールとなります。CSS プロパティを編集するとき、上下の矢印キーを使うとそこで使用できる全ての CSS プロパティがアルファベット順に表示されます。Firebug は標準的な CSS に加え、Mozilla 独自のプロパティまで完全に網羅した辞書を備えています。

ハイ消えた

いくつかの CSS プロパティを無効にして表示確認をすることで問題の解決法が見つかる、なんてことはよくあること。それぞれのプロパティにマウスカーソルを合わせると、プロパティの左に小さな丸いアイコンが表示されます。これをクリックすることでそのプロパティの無効・有効を切り替えることが出来ます。

もっと大雑把に、CSS タブのツールバーにある「無効」ボタンをクリックすることで全てのスタイルシートの無効・有効を切り替えたりも出来ます。

全てのスタイルシートを調査

HTML タブでは個々の要素のCSSを調査出来ますが、CSS タブではスタイルシート全体を見ることが出来ます。ツールバーのファイルリストをクリックすれば、ページにインポートされた全てのスタイルシートの概要が表示されます。

カラーコードと画像のURLをコピー

多くの人にとって、コピー＆ペーストこそが開発の中心です。Firebug ではカラーコードと画像の URL という二大重要スタイル要素のコピーが容易に出来るようになります。右クリックするだけでコンテキストメニューにオプションが表示されます。

画像の URL をコピーしたときは、CSS では相対パスで書かれていたとしても絶対パスでコピーされます。