【検証ツールの使い方】検証ツールの開き方、見方を知ろう

こんにちは、みつたです。

なやむくん

検証ツールってどうやって開くの？

なやむさん

検証ツールの画面色々あって理解するの難しそう・・・

などの上記疑問や悩みを解決してまいります。

検証ツールはWeb開発において必須ツールです。

かなり多機能な検証ツールですが、主に以下のことができます。

高機能であり開発には欠かせない検証ツールですが、パッと見た感じ色々あり難しそうに思う方もいるかと思います。

それではまいりましょう。

検証ツールの開き方

検証ツールを開くには「F12」、もしくは右クリック　⇒　「検証」をクリックします。

すると上のような画面になったかと思います。これが検証ツールです。

なやむくん

なんかたくさん出てきたなぁ…覚えることたくさんありそう

たしかに検証ツールは多機能ですが、全てを覚える必要はありません。

今回は、検証ツールの基礎知識と、Web制作において特に使う機能にピックアップしていきます。

主な検証ツールの見方を覚えよう

主に使用する画面は以下4つになります。

●黄色枠　⇒　レスポンシブ設定

表示画面の幅を設定することができます。

例えばiPad、iPhoneサイズでのレイアウトを確認したい場合はここで表示幅を切り替えます。

もし表示されていない場合は以下ボタンをクリックします。

●赤色枠　⇒　表示画面

表示内容を確認できます。

●緑色枠　⇒　HTML

表示されているWebページを構成しているHTMLが表示されます。

実際にこの場でHTMLを確認したり、編集、削除などして表示内容を変更することもできます。

上のタブで「Elements」が選択されている場合はHTMLが表示されるので、もし表示されていなければタブを確認してください。

●青色枠　⇒　CSS

選択したHTML要素に指定しているCSSを確認することができます。

こちらもHTML同様その場でCSSを編集、削除などして表示内容を変更することもできます。

上のタブで「Styles」が選択されている場合にCSSが表示されるので、もし表示されていなければタブを確認してください。