![悩める人](https://kitsunecode.net/wp-content/uploads/2023/03/question_head_boy-1-e1678776208844-280x300.png)
検証ツールとはなんでしょうか?
![きつねコード](https://kitsunecode.net/wp-content/uploads/2023/02/kitsune-code-300x300.jpg)
検証ツールとは、Webサイトのコードを見るための無料機能です。誰でも利用できます。検証ツールを使えば、どんなwebサイトもコードの中身を覗くことが出来ます。初心者向けに使い方とショートカットキーをご紹介します。
ブログ運営、webサイトを運営している人は絶対に覚えておくべき機能です!簡単なので、早めにマスターしておきましょう。
検証ツールとは?
「検証ツール」とは、ブラウザで使える機能の一つで、誰でも無料で利用することができます。
検証ツールを使うとwebサイトのソースコードをブラウザ上で確認することができます。つまり、どんなサイトでも中身を覗けます。
(※「ブラウザ」とは、Google Chrome、Safari、Microsoft Edge、Fire Foxなどの検索ソフトのことです)
サイトのソースコードを調べて、不具合の原因を探したり、デザインやコードを参考にしたい時にも使えます。
プログラマーやwebデザイナーの人は、みんな使っているものになります。初心者でも使えますので絶対に覚えておいた方が良いですよ。
検証ツールを使う準備・Google Chromeをダウンロード
検証ツールは、大体どのブラウザでも利用することができますが、一番使いやすいのは「Google Chrome」のブラウザです。私も仕事の時はいつもChromeを使っています。
![](https://kitsunecode.net/wp-content/uploads/2023/08/google-chrome.png)
まだパソコンにインストールしていない方は、「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サイトを開いる時に、いつでも下のキーを押すと検証ツールが開閉します。
まとめ
ココがポイント
- 検証ツールとは、ブラウザで使える無料機能の一つ。webページのソースコードを確認できるもの。
- おすすめのブラウザは、「Google Chrome」。
- 検証ツールを開くには、画面右クリック≫「検証」をクリック。左上の矢印を押して青くなった状態でソースコード(HTMLやCSS)を探せる。