HTMLやCSSを書いてWEBサイトを作っていると、レイアウトが崩れてしまったりと思ったように表示されない部分が出てきますよね。
Google ChromeやFirefoxなどのブラウザに搭載されているデベロッパー・ツールを使いこなせるようになると、そうした箇所の原因究明・修正がスムーズに行えるようになります。
デベロッパーツールとは
ブラウザには搭載されている検証機能（デベロッパーツール）とは、WebサイトのHTML構成や表示スピード、通信状況などを確認できる機能のことです。検証ツールと呼ぶこともあります。
サイト作成時、デバッグ（不具合とその原因を見つけ修正する）を行う際によく利用します。
ブラウザに搭載されている検証ツールは 検証したいWEBページ上で右クリックし、
- Google Chromeであれば「検証」
- Firefoxであれば「要素を調査」
を選びます。 Windowsの場合F12キー Macの場合はCommand＋Option＋Iキー でも開くことができます。
検証ツールを開くと
下図のようにサイト表示部分に加え、ソースコードや適用されているcssを確認できる画面が立ち上がります。
ブラウザごとに検証ツールの呼び名やレイアウトには違いがありますが、 どのブラウザであっても基本的な機能部分で大きな差異はありません。 HTML/CSSの確認と修正であれば、どのブラウザの検証ツールでも行えます。
この講座ではGoogle Chromeに搭載されている検証ツールの基本的な使い方を中心に紹介していきます。