「検証ツール（デベロッパーモード）」を使ってみよう！

# 目次

* [検証ツールとは](#検証ツールとは)
* [検証ツールを表示させる](#検証ツールを表示させる)
* [検証ツールの画面構成](#検証ツールの画面構成)
* [見たいコードを選んでみよう](#見たいコードを選んでみよう)
* [コードを編集してみよう](#コードを編集してみよう)
* [要素の大きさや余白を確認しよう](#要素の大きさや余白を確認しよう)
* [デザインをいじってみよう](#デザインをいじってみよう)
* [まとめ](#まとめ)



# 検証ツールとは

例えば、好きな料理を食べているときに
「この料理って、どんな食材を使っているんだろうな」
と気になりますよね？

プログラムも同じように、好きなデザインのサイトなどを観ていると
「このサイトって、どんなコードで書いているんだろうな」
と気になってきます。

![Slide3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318398/45969fc8-78cd-1b11-df20-b6f9736446a5.jpeg)

料理であれば、作ってくれた人に聞けば教えてくれます。
では、プログラムは誰に聞けばいいのでしょうか。
まさか、「本人に直接会って」なんてことは出来ないですよね…。

そんな時に活躍するのが、「検証ツール」です！
「デベロッパーモード」とも呼ばれます。
検証ツールを使えば、下の写真のようにコードが現れます。

![スクリーンショット 2022-03-03 125439 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318398/663d879e-b879-a7bb-ec2e-042f7a008886.png)


この「検証ツール」はとても便利で、ほかにも「試しに違うコードを入れてみる」「デザインを変えてみる」など、いろいろできます！
<font color="red">
**特に、自分でサイトを作成しているときに
 「思った通りの表示や動作ができない」
といった問題に直面した時には、とても力強い見方になってくれます‼**
</font>

それでは、さっそく使い方を学んで行きましょう！

[目次に戻る](#目次)



# 検証ツールを表示させる

まずは、検証コードを表示させてみましょう。

1. 作ったコードをGoogle Cromeなどで表示させる。

2. 右クリックをして、「検証」をクリック。
もしくは、キーボードの「F12」キーを押下する。
:::note warn
注意
呼び方が「検証」「要素の検証」「開発者向けツール」など、様々あります。
:::

![10 appear.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318398/4fc533ce-03f4-cde6-8c15-4f4794685315.gif)
このように、コードがズラリと表示されました。

[目次に戻る](#目次)



# 検証ツールの画面構成

検証ツールは、以下のような画面で構成されています。

![Slide2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318398/b875c8e9-aa20-dcea-3d74-2ab5c9196b44.jpeg)
<font color="red">赤枠…　ＨＴＭＬなど、構造に関するコード。</font>
<font color="blue">青枠…　ＣＳＳなど、装飾に関するコード。</font>

ただし、コードの一部が「▶」に隠れています。
クリックをすると展開できるので、必要に応じて確認してみましょう。

[目次に戻る](#目次)



# 見たいコードを選んでみよう

1. 「セレクトアイコン」をクリック。<font color="blue">青色</font>に変化する。
![Slide2 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318398/5df97e34-bb98-ead5-eb88-26370297946e.jpeg)
1. 見たいコードにカーソルを合わせる。クリックすると固定される。




![30 select.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318398/8e250119-7074-2950-466e-967df3a0a2a4.gif)

[目次に戻る](#目次)



# コードを編集してみよう

1. コードを右クリックし「Edit as HTML」を選択する。
1. 編集モードになるので、好きなコードに編集する。

:::note info
編集した部分は、サイトの「再読み込み」などで開きなおせば元通りになります。
:::

![50 edit.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318398/41fe011b-a4dd-a7a2-ce93-80981d73f936.gif)


[目次に戻る](#目次)


# 要素の大きさや余白を確認しよう
CSSなどでレイアウトを構成するときに、要素の大きさや余白を「position」「margin」などで記述します。
しかし、文字だけではデザインの感覚が掴みづらいですよね…。
検証ツールでは「Metrics」と呼ばれる、要素の位置関係を示すツールも準備されています。
下の画像ように、検証ツールの一番下などに準備されていますので、ぜひ使ってみましょう！

![90 padding.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318398/d76c5d1a-2a57-3197-1274-8c32a329bbae.gif)

[目次に戻る](#目次)



# デザインをいじってみよう

下の画像のように「チェック」を外すと、デザインの反映を変更できます。

:::note info
編集した部分は、サイトの「再読み込み」などで開きなおせば元通りになります。
:::


![70 edit-design.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318398/82c6960a-35af-b00d-b6a1-4fbd002a7b44.gif)

さらに、数値をクリック（もしくはダブルクリック）を行えば、フォントサイズや余白なども変更が簡単にできます！

![100 edit-value.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318398/1518baad-a00d-5919-1913-f7f4d1c51039.gif)


[目次に戻る](#目次)



# まとめ

検証ツールはサイトを作るときに、とても重宝します。
また、他にも「consoleでJavaScriptの確認をする」などもできます！
いろいろな機能を活用をして、素敵なサイトを楽しく作っていきましょう！

[目次に戻る](#目次)