開発者ツールは「Firebug」より「要素を調査」を使おう
普段コーディングをしているときに使うブラウザの開発者ツールですが、みなさんはどのツールを使用していますか？
有名な「Firebug」などを使用している人も多いと思いますが、私はFirefoxにデフォルトで入っている「要素を調査」をオススメしたいです。
※本ページは広告・アフィリエイトプログラムにより収益を得ています。
- 目次で流し読みする ･*･:≡( ε:)
開発者ツールとは
開発者ツールとは各ブラウザに入っているWEB制作者向けのツールです。これを使用することによって要素にどのスタイルが掛かっているのかチェックすることが出来ます。WEB制作をしている人なら誰もが使ったことがあるツールです。
開発者ツールの使い方
タグをチェックしたいページで右クリックをし「要素を調査」を選択します。
すると、ブラウザの下にHTMLとCSSのソースが出てきます。
左下にある「マウスで要素を選択」をクリックすると要素を直接選択することが出来ます。
要素を選択するとその要素に掛かっているCSSが右下に出てきます。
右下のCSSがあるところは左から順番に「ルール」「計算済み」「フォント」「ボックスモデル」の4つのタブに分かれています。
ルール
ルールタブには指定されてるCSSが並んでいます。ここでCSSを選択して値やプロパティを調整することが出来ます。
Firefox 22からカラーコードの前に色のプレビュー表示ができるようになりました。
Firebugだとこんな感じでカラーコードにマウスオーバーしたらカラーが出てきます。
計算済み
計算済みタブでは現在反映されているCSSのみが書かれています。更新作業が多いページで秘伝のソースコードを使いまわしている場合どれが反映しているか分かりづらいので、このタブから反映しているCSSをチェックします。
フォント
フォントタブでは現在適用されているフォントを調べることが出来ます。
ボックスモデル
要素の幅や高さ・マージンやパディング・ボーダーなどのボックスモデルを調べることが出来ます。
開発者ツールスクリーンショット
Firefox標準「要素を調査」
Firefoxのアドオン「Firebug」
Google Chrome標準「要素を検証」
Internet Explorer標準「開発者ツール」
ブラウザやアドオンによって見た目や使い勝手が違っています。
IEの開発者ツールはバージョンごとのレイアウトを確認することが出来ます。
要素を調査をオススメする理由
ここまでゴリ押しされると何が便利なのかと言われると思うのでまとめておきます。
標準で入っている
会社で使用している検証端末は、出来るだけ標準の状態にしているため検証ツールが入っておらず、検証機へアドオンの追加などが禁止されています。なのでレイアウト崩れを起こしたらどこが原因になっているのか探ることが難しいです。
そんなときFirefox標準で入っている「要素を調査」を使って検証すればすぐに不具合の原因を探ることが出来ます。
カーソルを固定することが出来る
Firebugなど他の開発者ツールでは要素からマウスカーソルが外れると選択がはずれてしまいますが、Firefoxの「要素を調査では」要素をクリックして選択し、カーソルを固定することが出来ます。ちょっとした違いですが、これがとても使いやすいです。
また、マウスオーバーの時のCSSの変化も簡単に調べることが出来ます。
まずは調べたい要素のところで右クリック→要素を調査を選択し、右の三角形を押します。すると「:hover」「:active」「:focus」といった選択肢が出てくるので、今回は「:hover」を選択してみます。
:hoverを選ぶとマウスオーバーした時の効果を見ることが出来ました。このときブラウザの右下にはマウスオーバーした時のCSSが書かれています。
「レスポンシブデザインモード」がスマホサイト制作に便利
スマホサイトを制作するときにはウィンドウサイズを小さくして要素を調べないといけないので、とても使いづらくなってしまいます。しかしFirefoxの「要素を調査」では「レスポンシブモード」というものがあり、ウィンドウサイズをいちいち縮めなくても検証をすることが出来ちゃいます！
まず「要素を調査」を起動し、ブラウザの右下にある「レスポンシブデザインモード」を選択します。
するとブラウザの表示される範囲が狭くなり、スマホ・タブレットのレイアウト確認をすることが出来ます。上のボタンや表示範囲のつまみで中のウィンドウサイズを変更することも出来ます。
このままだと右が大きく開いていてスペースが勿体ないので、下に表示されているHTMLやCSSを右に移動しちゃいます。
ブラウザの右下にある「ブラウザのサイドに表示」を選択します。
これでスペースをフルに活用することが出来ます。
3Dビューが面白い
HTML階層をタワーのように積み上げて構造を立体的に見ることが出来ます。
まずウィンドウ右下にある「3Dビュー」を選択します。
すると要素が立体化します。初めて見たときは驚きました。
中央でドラッグするとグルグルと回転させることが出来ます。マウスのホイールを回転させると拡大・縮小します。
[ネタ]Firefox11の新機能「要素の3D表示」でビルを建てる – WEBCRE8.jp
実用性はほぼありませんが、ネタとして楽しめます。
3D表示はFirefoxのバージョン11以降に実装されています。
Firefox 22から不便だったところが解消された
画像プレビュー機能
FirebugやGoogle Chromeの要素を検証では、HTMLやCSSの画像URLにマウスオーバーすると画像のプレビューが出てきました。
Firebugのプレビュー表示
Google Chromeの要素を検証プレビュー表示
今まではこの機能が要素を調査に無く、画像のリンク切れや画像幅の指定などを調べるときだけFirebugに切り替えていました。
しかしFirefox 22からはこの機能が実装されました。これでFIrebugを使うこと無く検証することが出来ます。
まとめ
うちの会社では誰一人この要素を調査を使う人が居なくて悲しいです。この記事を見た人が一人でも多くの人にこの良さを伝えて欲しいです！！
