目次
1.起動方法
デベロッパーツールは、Google Chromeブラウザを使っている方であれば、誰でも無料で利用することができます。
利用方法は、調べたいページを右クリックし、「検証」の項目がありますので、それをクリックします。
ショートカットキーでは、【Ctrl+Shift+I（MacではCommand + Option + I）】もしくは【F12】キーで起動できます。
2.要素選択
検証ツール画面の左上にある要素とカーソルのアイコンをクリックし、ホームページ上の各要素を選択することができます。
カーソルを合わせたサイト上の項目は背景色が変わり、一つ一つの要素がどのようソースコードで構成されているのかを検証ツール上で確認することが可能です。
3.モバイルエミュレーション/表示切り替え
上記要素選択の右隣、スマートフォン,タブレットの形をしているアイコンをクリックすると表示が切り替わります。
スマートフォンやモバイルPC、タブレットなどのデバイスごとにエミュレーション表示が行えますので、デバイスチェックを擬似的に行うことができます。
ページ上中央にある"サイズ"のプルダウンメニューからデバイスサイズを選択することができます。
選択できるデバイスもiOSからAndroid端末、タブレット等で多岐にわたります。
4.Elementsパネル
画面右側に設置されているElementsパネルでは、現在表示されているページのソースコードを確認することが可能です。
ソースコード内の各要素を詳細に調べたい場合は、Elementsパネル左上のカーソルのアイコンをクリックし、表示されているページの調べたい箇所をクリック（ショートカットキー：Ctrl+Shift+C Mac：Control + Option + C ）を実行するとページを構成するソースコードと右側「Styles」に対応するCSSを表示することができます。
また、Stylesに記載されているCSSにコードを書き加えたり削除・調整することで、検証画面内で擬似的に表示を反映することができます。
その他、Stylesの隣"Compted"には、選択している要素のmargin、border、paddingの値を視覚的に確認することもできます。
どの要素にどれくらいの値が入っているかなど、レイアウトの微調整を行う際に活用できます。
活用例
上記の使用方法を活用し、PC上でSP表示のテスト検証を行えたり、フロントコーディング上の問題を発見することが可能です。
また、応用してCSSやコードを編集できれば、色や大きさを変える等の簡単な調整依頼であればエンジニアにコーディングを任せる前にコード実装イメージを社内やクライアントに共有することも可能です。
また、応用してCSSやコードを編集できれば、色や大きさを変える等の簡単な調整依頼であればエンジニアにコーディングを任せる前にコード実装イメージを社内やクライアントに共有することも可能です。
終わりに
いかがでしたでしょうか。
この検証ツールは、エンジニアだけでなくWEBディレクターとしても覚えていて損はない
(且つ無料で使える)機能だと思います。
実際に業務内で検証やイメージを共有する際によく使用しています。
皆さんもぜひ検証ツールを使ってスムーズな業務、社内での連携を実現させましょう！
