FireFoxの「要素を調べる」が何気に凄いです。今まであんまりこの機能を使っていなかったのですが、表示崩れやDOMがどのように絡みあってるのかを調べるに、かなり使えそうなので今日はそれを紹介します。

まずは、ブラウザ上の任意の場所で右クリックしてください。するとコンテキストの項目上に要素を調べるというものが表示されますので、それをクリックしてください。

brows01

そうすると、以下のようなUIが表示されます。ここで調べたい箇所にマウスカーソルを合わせると、選んだ箇所意外が暗転し、その箇所のDOMのノード情報が表示され、右側にノード内のスタイルの内容が表示されます。ここでCSSのクラスやスタイルの継承状況が一覧で確認できるようになっています。グラフィカルでめちゃくちゃわかりやすいです!

brows02

更に凄いのがここからですが、クラス名の上にどのCSSファイルのどの行数で記述されているかが書かれており、クリックできるようになっています。そこをクリックすると、スタイルエディタなるウインドウが開きます。

brows03

テキストが打ち込めるようになっているので、ためしに画面幅を90%から70%に変えてみたところ……、

brows04
よ、横幅が変わった~~~っ!凄ぇ!しかもこれ、変更した内容を保存できるですよ。さすがにローカルに保存なので、本番に適用するにはWEBサーバーにアップロードしなければなりませんが、これは凄い。もしかして僕が今まで知らなかっただけで、WEB制作者の中では常識かもしれませんが、割とびっくりしました。ちょっと凝ったデザインだと、スタイルの継承が訳わからんことになって追っていくのが大変なんですが、これがあれば一目瞭然ですし、その場で解決することも出来るのでDreamWeaverを立ち上げる回数が減りそうです 。

他のサイトなどで、気になるデザインをこの機能をつかって調べられるので、HTMLやスタイルシートを勉強中の人にももってこいですね!