こんにちは、みつたです。
などの上記疑問や悩みを解決してまいります。
検証ツールはWeb開発において必須ツールです。
かなり多機能な検証ツールですが、主に以下のことができます。
検証ツールでできること
ブラウザで表示されているコードを編集・確認ができる
タブレット、スマホサイズの画面幅で確認ができる
レイアウトの崩れ、修正できない原因が判明しやすい
高機能であり開発には欠かせない検証ツールですが、パッと見た感じ色々あり難しそうに思う方もいるかと思います。
それではまいりましょう。
検証ツールの開き方
検証ツールを開くには「F12」、もしくは右クリック ⇒ 「検証」をクリックします。
検証ツールを開くには
「F12」、もしくは右クリック ⇒ 「検証」をクリック
すると上のような画面になったかと思います。これが検証ツールです。
たしかに検証ツールは多機能ですが、全てを覚える必要はありません。
今回は、検証ツールの基礎知識と、Web制作において特に使う機能にピックアップしていきます。
主な検証ツールの見方を覚えよう
主に使用する画面は以下4つになります。
●黄色枠 ⇒ レスポンシブ設定
表示画面の幅を設定することができます。
例えばiPad、iPhoneサイズでのレイアウトを確認したい場合はここで表示幅を切り替えます。
もし表示されていない場合は以下ボタンをクリックします。
●赤色枠 ⇒ 表示画面
表示内容を確認できます。
●緑色枠 ⇒ HTML
表示されているWebページを構成しているHTMLが表示されます。
実際にこの場でHTMLを確認したり、編集、削除などして表示内容を変更することもできます。
上のタブで「Elements」が選択されている場合はHTMLが表示されるので、もし表示されていなければタブを確認してください。
●青色枠 ⇒ CSS
選択したHTML要素に指定しているCSSを確認することができます。
こちらもHTML同様その場でCSSを編集、削除などして表示内容を変更することもできます。
上のタブで「Styles」が選択されている場合にCSSが表示されるので、もし表示されていなければタブを確認してください。