【初学者必見!】コーディングに役立つ検証ツールの使い方

【初学者必見!】コーディングに役立つ検証ツールの使い方

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

コーディングができるようになるためのステップとして検証ツールが使用できるようになることはとても重要なステップです。

しかし、使い始めの方だと自分が探しているところがなかなか見つからなかったりとストレスを感じる場面もよくあるかと思います。

今回は、そのような方々に向けてどこよりもわかりやすく検証ツールの使い方を解説しています。

この記事を読んで、検証ツールの使い方をマスターしていきましょう!

検証ツールとは

検証ツールとは、ウェブ制作を行う際にブラウザ上で表示をしているページのHTML/CSS/JavaScriptを確認することができる機能のことを意味します。

検証ツールはコードの確認だけでなく編集も行うことができるため、コーディングを行う際には必要不可欠な機能となります。
※リロードすると編集前の状態に戻ります。

Image from Gyazo

検証ツールの機能

HTMLの確認と編集

検証ツールでは、HTMLを確認することができます。

Image from Gyazo

HTMLを確認するだけでなく削除や追加も行うことができます。
※ただし、リロードすると元に戻ります。

Image from Gyazo

CSSの確認と編集

検証ツールでは、HTMLだけでなくCSSも確認することができます。

Image from Gyazo

CSSの編集も行うことができます。
※ただし、リロードすると元に戻ります。

Image from Gyazo

画面幅の変更(レスポンシブに役立ちます)

PCからスマートフォンやタブレットのサイズに変更することができます。

Image from Gyazo

検証ツールの使い方

グーグルクロームのダウンロードをしよう!

まずはこちらをクリックしてください。

上記リンクページを開けたら「Chromeをダウンロード」をクリックするとダウンロードができます。

あとは、アプリケーションフォルダにChromeを保存できたら完了です。

Image from Gyazo

検証ツールを表示させよう

検証ツールは、Google Chromeを開いた状態から右クリックをすると検証という項目が出てくるので、それをクリックすることで使用することができます。

Image from Gyazo

HTMLを確認・編集しよう

HTMLを確認したい時は、Elementsという項目を確認しましょう。

Image from Gyazo

そして編集する際は、Elementsの項目にあるHTMLをダブルクリックすることで編集ができたり、デリートすることで削除もできます。

Image from Gyazo

CSSを確認・編集しよう

CSSを確認したい時は、stylesという項目を確認しましょう。

Image from Gyazo

そして編集する際は、stylesの項目にあるプロパティをダブルクリックすることで編集ができたり、デリートすることで削除もできます。

Image from Gyazo

また、右上の下記画像の赤枠のところをクリックすると確認したい箇所のHTMLやCSSをすぐに表示できるので活用しましょう!

Image from Gyazo

ウェブ制作に役立つ使い方

コーディングの際に、VS CodeやAtomなどのエディタを使用するかと思います。
その際に、上手くいかない点をエディタで修正してchromeで見ていくのは面倒ですよね。

そういう時にも検証ツールを活用することができます。

以下のように検証ツール上でコーディングの確認を行うことで画面遷移せずにコーディングの調整を行うことができます。
しかし、検証ツールでの変更はエディタに保存されないので、調整を終えたら調整した点を必ずエディタに記述するのを忘れないようにしてください。

Image from Gyazo

レスポンシブの確認

レスポンシブなコーディングを確認する際には必ず検証ツールを使用します。
その際の使い方を紹介していきます。

検証ツールを開いたら、青枠をクリックします。

すると、以下のような画面になりデバイスを選択して画面幅を変更することができます。

レスポンシブコーディングが当たり前になっている今は検証ツールを使いこなすことは必要不可欠です!

Image from Gyazo

これまでに説明してきたことを活用すると、Google Chromeで見ることができるWebサイトやWebサービスのコードを確認することができます。

検証ツールを使用してご自身が好きなサイトやコーディングする時の参考にしているサイトのコードを確認することで良い勉強になるので、ぜひ確認してみてください♪

この記事がいいと思ってくださった方は、SNSでのシェアをお願いします![addthis tool=”addthis_inline_share_toolbox_mqi1″]

質問をTwitterから募集します!

無料でwebデザインに関する質問にお答えします。
クリ★スタは未経験からwebデザイナーを目指す方を応援しています!そのため、学習していく中での些細な疑問に記事で回答していきます。
お気軽にご連絡ください。→クリ★スタ(@cresta_design)

Youtubeでは動画学習コンテンツを配信しています!

動画での学習は、テキストでの学習の3倍以上の効果を得られると言われています。そのため、クリスタでは、初学者の方に効果的な学習をして頂くためにYoutubeで学習コンテンツを提供しています。
ぜひチャンネル登録お願いします→クリ★スタYoutubeチャンネル