絶対覚えるべき「検証ツール」の基本の使い方とショートカットキー

悩める人

検証ツールとはなんでしょうか？

きつねコード

検証ツールとは、Webサイトのコードを見るための無料機能です。誰でも利用できます。検証ツールを使えば、どんなwebサイトもコードの中身を覗くことが出来ます。初心者向けに使い方とショートカットキーをご紹介します。

ブログ運営、webサイトを運営している人は絶対に覚えておくべき機能です！簡単なので、早めにマスターしておきましょう。

検証ツールとは？

「検証ツール」とは、ブラウザで使える機能の一つで、誰でも無料で利用することができます。

検証ツールを使うとwebサイトのソースコードをブラウザ上で確認することができます。つまり、どんなサイトでも中身を覗けます。

（※「ブラウザ」とは、Google Chrome、Safari、Microsoft Edge、Fire Foxなどの検索ソフトのことです）

サイトのソースコードを調べて、不具合の原因を探したり、デザインやコードを参考にしたい時にも使えます。

プログラマーやwebデザイナーの人は、みんな使っているものになります。初心者でも使えますので絶対に覚えておいた方が良いですよ。

検証ツールを使う準備・Google Chromeをダウンロード

検証ツールは、大体どのブラウザでも利用することができますが、一番使いやすいのは「Google Chrome」のブラウザです。私も仕事の時はいつもChromeを使っています。

まだパソコンにインストールしていない方は、「Google Chrome インストール」などで検索して、インストールを行ないましょう。

検証ツールの基本的な使い方

検証ツールの基本的な使い方を画像付きで解説します。

• step.1

  まずは、検証ツールを開きます。

  Google Chromeブラウザで任意のwebサイトを開きましょう。画面のどこでも良いので右クリックを押してください。

  

  右クリックメニューの中の「検証」をクリックしましょう。これで、検証ツールが開きます。

  画面の右側に色々と出てくるものが検証ツールです。

  画面右上部のタブバーに「Elements / Console / Sources / … 」などメニューが並んでいますが、初心者の人が普段利用するのは「Elements」になります。

  下は、参考動画です。

  下の参考動画のように、ヨコとタテに画面を引き伸ばしできますので、見やすいように都度調整してみてくださいね。

  次のステップへ進みます。




• step.2

  次は、webページ内に確認したい要素がある場合に「HTML」を調べます。

  今回の事例では、「記事ページのタイトルが何タグで書かれているのか調べたい」とします。

  下の参考動画のような手順で探します。

  検証ツールの「左上の矢印」をクリックすると画面が青くなり探すモードになりますので、その状態で調べたい要素にカーソルを当ててクリックしましょう。

  上の事例では、ページタイトル「バックアップのやり方」は<h1>タグで記述されていることが分かります。class名はentry-titleとなっていますね。

  他の事例として、「サイドバーの"人気記事"の要素のid名もしくはclass名を調べたい」とします。

  その場合は下のよう手順で探します。

  サイドバーの人気記事は<aside>タグで書かれており、id名はpopular_entries-2となっていることが分かります。

  これが、htmlを調べる基本の使い方になります。次のステップへ進みましょう。




• step.3

  次は、webページ内に確認したい要素のデザインを調べたい場合に「CSS」を確認します。色、フォントサイズ、枠線などのことですね。

  事例として、「"公式ページへ"というボタンの色を確認したい」とします。

  このような手順で確認します。

  ただし、cssは重複してかけられていることが多いので、初心者の方が見ると混乱することも多いと思います。

  実際にどのcssが効いているのかは、ある程度のcssの知識が必要になってきます。検証ツールを使いながら、cssも都度勉強できれば良いかもしれませんね。

  いずれにしても、検証ツールでhtmlとcssを調べられるようになると何かと便利ですので、ぜひ挑戦してみてください。




• step.4

  最後に、検証ツールでのスマホ表示確認の使い方です。これも便利なので覚えておくと良いでしょう。

  検証ツール上部「スマホマーク」をクリックすると、ブラウザ上でスマホ表示の確認をすることができます。

  小さいスマホ、大きいスマホ、タブレットなど表示サイズを変更することも可能です。

  レスポンシブ表示（スマホでみた時の画面）を確認するときにとても重宝します。

  表示が崩れていないか、スマホで見にくくなっていないかを確認しましょう。特にパソコンユーザーよりも、スマホユーザーの方が多いwebサイトの場合には、レスポンシブの方がむしろ大事になります。

検証ツールを開くショートカットキー

検証ツールは、下記のショートカットキーでも開くことができます。

何度も使うものなので、ショートカットキーを覚えた方が楽かもしれません。ブラウザでwebサイトを開いる時に、いつでも下のキーを押すと検証ツールが開閉します。

まとめ