目次
検証ツールとは
例えば、好きな料理を食べているときに
「この料理って、どんな食材を使っているんだろうな」
と気になりますよね？
プログラムも同じように、好きなデザインのサイトなどを観ていると
「このサイトって、どんなコードで書いているんだろうな」
と気になってきます。
料理であれば、作ってくれた人に聞けば教えてくれます。
では、プログラムは誰に聞けばいいのでしょうか。
まさか、「本人に直接会って」なんてことは出来ないですよね…。
そんな時に活躍するのが、「検証ツール」です！
「デベロッパーモード」とも呼ばれます。
検証ツールを使えば、下の写真のようにコードが現れます。
この「検証ツール」はとても便利で、ほかにも「試しに違うコードを入れてみる」「デザインを変えてみる」など、いろいろできます！
特に、自分でサイトを作成しているときに
「思った通りの表示や動作ができない」
といった問題に直面した時には、とても力強い見方になってくれます‼
それでは、さっそく使い方を学んで行きましょう！
検証ツールを表示させる
まずは、検証コードを表示させてみましょう。
-
作ったコードをGoogle Cromeなどで表示させる。
-
右クリックをして、「検証」をクリック。
もしくは、キーボードの「F12」キーを押下する。
注意
呼び方が「検証」「要素の検証」「開発者向けツール」など、様々あります。
このように、コードがズラリと表示されました。
検証ツールの画面構成
検証ツールは、以下のような画面で構成されています。
赤枠… ＨＴＭＬなど、構造に関するコード。
青枠… ＣＳＳなど、装飾に関するコード。
ただし、コードの一部が「▶」に隠れています。
クリックをすると展開できるので、必要に応じて確認してみましょう。
見たいコードを選んでみよう
- 「セレクトアイコン」をクリック。青色に変化する。
- 見たいコードにカーソルを合わせる。クリックすると固定される。
コードを編集してみよう
- コードを右クリックし「Edit as HTML」を選択する。
- 編集モードになるので、好きなコードに編集する。
編集した部分は、サイトの「再読み込み」などで開きなおせば元通りになります。
要素の大きさや余白を確認しよう
CSSなどでレイアウトを構成するときに、要素の大きさや余白を「position」「margin」などで記述します。
しかし、文字だけではデザインの感覚が掴みづらいですよね…。
検証ツールでは「Metrics」と呼ばれる、要素の位置関係を示すツールも準備されています。
下の画像ように、検証ツールの一番下などに準備されていますので、ぜひ使ってみましょう！
デザインをいじってみよう
下の画像のように「チェック」を外すと、デザインの反映を変更できます。
編集した部分は、サイトの「再読み込み」などで開きなおせば元通りになります。
さらに、数値をクリック（もしくはダブルクリック）を行えば、フォントサイズや余白なども変更が簡単にできます！
まとめ
検証ツールはサイトを作るときに、とても重宝します。
また、他にも「consoleでJavaScriptの確認をする」などもできます！
いろいろな機能を活用をして、素敵なサイトを楽しく作っていきましょう！