FireFoxのFirebugでHTMLのID(エレメント)を取得する方法

firefox

HTMLのID(エレメント)を取得する方法を紹介します。

わたしはこの技を本当によく使います。
特にAjaxを実装していると「あれここdivのIDってなんだったっけ?」という場面が多々あるように感じます。
そういう時は今回紹介する方法を使えば、瞬殺でHTMLのIDが取得出来て便利です。

[スポンサーリンク]

このページでやること

FirebugでdivタグのようなHTMLのID(エレメント)を取得する方法を紹介します。
(今回は、FireFoxを使って実践していきます。)

サンプルページ

今回Firebugを使う対象のサンプルページを用意しました。
demo

HTMLのID(エレメント)を取得する

上記のURLをFireFoxの開いて、FirebugでHTMLのID(エレメント)を取得していきましょう。
Firebugのインストール方法については省略します。

まずは、FireFoxで上記のURLを開いて、Firebugを起動しましょう。

firebug-javascript-value-1

赤丸で囲っている矢印マークをクリックします。

firebug-html-id-get1

今回はサンプルページのボタンのID(エレメント)を取得していきましょう。
ボタンをクリックすると、画面下部分にボタンに対応するID(エレメント)が選択状態となります。
これでHTMLのIDを取得することが出来ます。
以上で終わりです。とても簡単な作業だったのではと思います。

firebug-html-id-get2

さいごに

今回紹介しました、divタグのようなHTMLのID(エレメント)を取得する方法は、Web系プログラマであるわたしは非常に多く使います。
恐らくWebデザイナやHTMLコーダの方などのWebに関わる人は必ずといっていいほど使用するのではないでしょうか。

たまにHTMLやJSPのソースファイルからIDやエレメントを取得しようとしている人をみかけます。
Firebugを使った方が数倍も作業効率がよいと思うので、是非Firebugを使うようにしてみてください。
楽ができますよ。(^^
それでは!