【HTML/CSS】サイトの指定箇所のHTMLソースやCSSを調べる - Firefox Firebug アドオン

ページのある箇所がHTMLのソースでどうなっているか、CSSがどのように適応されているか、これらをソースを上から下まで調べて場所を特定するのは大変です。FireFoxお使いの方はFireFoxのアドオン「Firebug」を使いましょう。(Chromeお使いの方はChrome デベロッパーズツールを使用します)

 

  1. FireFoxのアドオン「Firebug」をダウンロードしてインストールする。インストールすると、FireFoxのナビゲーションツールバー上に以下のアイコンが表示される。

     
  2. 調べたいページをFireFoxで開き、Firebugのアイコンをクリックする。ページ下部にFireBugのウィンドウが表示される。
     
  3. FireBugのウィンドウ内にある矢印ボタンをクリックして、ページ上の調べたい箇所をクリックする。FireBugのウィンドウ左側にクリックした要素のHTMLが、右側に適用されているCSSの情報が表示される。
     
タグ: