ホームページ上のCSSをチェックしたい場合

自分のホームページですといいですが、他のホームページのCSSやクラスをチェックしたい場合、どうしたらいいでしょう。ソースの中をチェックするのもいいですが、もっといい方法があります。それがこちらの Firefoxの拡張機能の「Web Developer」です。

Web Developerとは・・・

Web Developerは、Mozilla Firefox のエクステンション（拡張機能）で、CSSを編集する機能など、アクセシビリティ以外にもWebコンテンツを制作する上で便利な機能が満載です。

まずこちらのホームページを開いてください。そして赤い枠内のクリックしてください。

次に、ディスクの保存するを選んで、OKボタンをクリックします。その後デスクトップに戻ってください。

次に、
デスクトップに戻ってきたら、「webdeveloper.xpi」というフォルダができているので、そのフォルダをドラッグ＆ドロップでFirefoxのアイコンの上に持ってきます。

そうすると、
インストール画面が出てきますので、ここで
「今すぐインストール」をクリックすればOKです。インストール後にFirefoxを開くとツールバーにインストールされているのがわかります。

Firefoxを開き、「枠表示」をクリックして、「ブロックレベル要素を枠で囲う」、「マウスカーソル箇所の要素を枠で囲う」、「枠表示には要素名も表示する」の3つをクリックすれば、各要素がチェックできます。
サマリーには < p class = "summary" >を入れてるな、などと一目瞭然です。

先ほどのサマリーが< p class = "summary" >を入れてるな、とわかったら、
「CSS」をクリックして、「CSSを編集する」から、検索窓に検索の言葉、ここだと「summary」をいれれば、検索結果が出てきます。これで簡易にCSSもチェックできます！