[B! css][Firebug] keijixのブックマーク

Firebugで始めるCSSデバッグ

Firebugで始めるCSSデバッグ FirebugはWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。CSSデバッグに関してはWeb Developerよりこちらを使っている人のほうが多いと思います。個人的にもFirebugなしでCSSは書きたくないと思うぐらい重宝しています。インストール Firefoxで配布サイトにアクセスして「Firefoxへの追加」をクリックします。インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてインストールを開始してください。インストールが終了したらFirefoxの再起動が求められるので、Firefoxを再起動してください。 Firebugの使い方 Firebugをインストールするとブラウザの右下に

keijix 2010/10/25

リンク

CSSファイル内のセレクタが使用されているか確認できるFirefoxのアドオン -CSS Usage

ページに読み込まれたCSSファイル内のセレクタが、実際に使用されているか確認できるFirefoxのアドオンを紹介します。 CSS Usage 「CSS Usage」を起動すると記述されているセレクタが一覧表示され、CSSファイルごとに結果が表示されます。表示のグリーンは一回以上適用、レッドは未適用、グレーはhoverなどの確認できないセレクタです。各ファイルの末尾には結果が数字で表示されます。

keijix 2010/08/21

リンク

Firebug の使い方：(X)HTML と CSS の確認・修正方法のまとめ

Firefox アドオンの「Firefbug」はご存知の方も多いと思いますが、Firefbug を使って表示しているページの(X)HTMLマークアップや CSS を確認・修正する方法のまとめを紹介します。特に３項に記した、(X)HTMLとCSSを一発で確認する方法はおすすめです。動作は Firefox 3.5 + Firebug 1.4.0b7 で確認しています。１．基本：(X)HTML マークアップと CSS を表示する確認したいページを表示した状態で、メニューバーの「表示」→「Firebug」を選択します。または F12 を押下します。これでページ下半分に Firebug のウィンドウが表示され、左側に(X)HTMLマークアップ、右側にそのページで使われている左側のウィンドウで選択状態になっている要素の CSS が表示されます。この手順で Firebug の画面を開くと、bo