開発者ツールは「Firebug」より「要素を調査」を使おう

普段コーディングをしているときに使うブラウザの開発者ツールですが、みなさんはどのツールを使用していますか?
有名な「Firebug」などを使用している人も多いと思いますが、私はFirefoxにデフォルトで入っている「要素を調査」をオススメしたいです。

スポンサードリンク

開発者ツールとは

開発者ツールとは各ブラウザに入っているWEB制作者向けのツールです。これを使用することによって要素にどのスタイルが掛かっているのかチェックすることが出来ます。WEB制作をしている人なら誰もが使ったことがあるツールです。

インスペクタ – 開発ツール | MDN

開発者ツールの使い方

タグをチェックしたいページで右クリックをし「要素を調査」を選択します。
すると、ブラウザの下にHTMLとCSSのソースが出てきます。

左下にある「マウスで要素を選択」をクリックすると要素を直接選択することが出来ます。

要素を調査16

要素を選択するとその要素に掛かっているCSSが右下に出てきます。

要素を調査17

右下のCSSがあるところは左から順番に「ルール」「計算済み」「フォント」「ボックスモデル」の4つのタブに分かれています。

ルール

ルールタブには指定されてるCSSが並んでいます。ここでCSSを選択して値やプロパティを調整することが出来ます。

Firefox 22からカラーコードの前に色のプレビュー表示ができるようになりました。
要素を調査3

Firebugだとこんな感じでカラーコードにマウスオーバーしたらカラーが出てきます。
firebug3

計算済み

計算済みタブでは現在反映されているCSSのみが書かれています。更新作業が多いページで秘伝のソースコードを使いまわしている場合どれが反映しているか分かりづらいので、このタブから反映しているCSSをチェックします。

要素を調査11

フォント

フォントタブでは現在適用されているフォントを調べることが出来ます。

要素を調査12

ボックスモデル

要素の幅や高さ・マージンやパディング・ボーダーなどのボックスモデルを調べることが出来ます。
要素を調査13

開発者ツールスクリーンショット

Firefox標準「要素を調査」

要素を調査1

Firefoxのアドオン「Firebug」

firebug1

Google Chrome標準「要素を検証」

要素を検証

Internet Explorer標準「開発者ツール」

開発者ツール

ブラウザやアドオンによって見た目や使い勝手が違っています。
IEの開発者ツールはバージョンごとのレイアウトを確認することが出来ます。

要素を調査をオススメする理由

ここまでゴリ押しされると何が便利なのかと言われると思うのでまとめておきます。

標準で入っている

会社で使用している検証端末は、出来るだけ標準の状態にしているため検証ツールが入っておらず、検証機へアドオンの追加などが禁止されています。なのでレイアウト崩れを起こしたらどこが原因になっているのか探ることが難しいです。
そんなときFirefox標準で入っている「要素を調査」を使って検証すればすぐに不具合の原因を探ることが出来ます。

カーソルを固定することが出来る

Firebugなど他の開発者ツールでは要素からマウスカーソルが外れると選択がはずれてしまいますが、Firefoxの「要素を調査では」要素をクリックして選択し、カーソルを固定することが出来ます。ちょっとした違いですが、これがとても使いやすいです。

また、マウスオーバーの時のCSSの変化も簡単に調べることが出来ます。
まずは調べたい要素のところで右クリック→要素を調査を選択し、右の三角形を押します。すると「:hover」「:active」「:focus」といった選択肢が出てくるので、今回は「:hover」を選択してみます。

要素を調査14

:hoverを選ぶとマウスオーバーした時の効果を見ることが出来ました。このときブラウザの右下にはマウスオーバーした時のCSSが書かれています。

要素を調査15

「レスポンシブデザインモード」がスマホサイト制作に便利

スマホサイトを制作するときにはウィンドウサイズを小さくして要素を調べないといけないので、とても使いづらくなってしまいます。しかしFirefoxの「要素を調査」では「レスポンシブモード」というものがあり、ウィンドウサイズをいちいち縮めなくても検証をすることが出来ちゃいます!

まず「要素を調査」を起動し、ブラウザの右下にある「レスポンシブデザインモード」を選択します。

要素を調査7

するとブラウザの表示される範囲が狭くなり、スマホ・タブレットのレイアウト確認をすることが出来ます。上のボタンや表示範囲のつまみで中のウィンドウサイズを変更することも出来ます。

要素を調査8

このままだと右が大きく開いていてスペースが勿体ないので、下に表示されているHTMLやCSSを右に移動しちゃいます。
ブラウザの右下にある「ブラウザのサイドに表示」を選択します。

要素を調査9

これでスペースをフルに活用することが出来ます。

要素を調査10

3Dビューが面白い

HTML階層をタワーのように積み上げて構造を立体的に見ることが出来ます。

まずウィンドウ右下にある「3Dビュー」を選択します。

要素を調査4

すると要素が立体化します。初めて見たときは驚きました。

要素を調査5

中央でドラッグするとグルグルと回転させることが出来ます。マウスのホイールを回転させると拡大・縮小します。

要素を調査6

[ネタ]Firefox11の新機能「要素の3D表示」でビルを建てる – WEBCRE8.jp

実用性はほぼありませんが、ネタとして楽しめます。
3D表示はFirefoxのバージョン11以降に実装されています。

Firefox 22から不便だったところが解消された

画像プレビュー機能

FirebugやGoogle Chromeの要素を検証では、HTMLやCSSの画像URLにマウスオーバーすると画像のプレビューが出てきました。

Firebugのプレビュー表示

firebug2

Google Chromeの要素を検証プレビュー表示

要素を検証2

今まではこの機能が要素を調査に無く、画像のリンク切れや画像幅の指定などを調べるときだけFirebugに切り替えていました。
しかしFirefox 22からはこの機能が実装されました。これでFIrebugを使うこと無く検証することが出来ます。

要素を調査2

まとめ

うちの会社では誰一人この要素を調査を使う人が居なくて悲しいです。この記事を見た人が一人でも多くの人にこの良さを伝えて欲しいです!!

鹿
writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。