本記事では、このような疑問にお答えしていきます。
Googleクロームブラウザに搭載されている検証（ディベロッパーツール）ってご存じですか？
結論、検証機能の使い方を知っていると、初心者の方はもちろん、ガリガリとサイトを作成する方のコーディングスキルがアップできます。
この機会に初心者が知っておくべきポイントを押さえていきましょう。
こんにちは、Ronpeee(@ronpeee0809)です。
プログラミング学習を独学で2019年の夏ごろから学習してきました。
学習を進めていくと、他サイトの模写をしたり、自分でオリジナルサイトの作成に挑戦することになります。
どうしても初心者の間ってコーディングする方法が分からなかったり、かっこいいサイトがどのように作られているか分からないですよね。
Googleクロームのディベロッパーツールを使用すると、サイトの裏側（テキストエディタの状態）を見ることができます。
これを参考にして、プログラミング作成に役立ててください。
目次
検証機能が出来ること
検証機能とは
Googleクロームブラウザに標準装備されているディベロッパーツール
です。
要は、サイトの裏側がどのように作られているか確認できるものです。
まず検証機能でどんなことが出来るのか見ていきましょう。
- ウェブサイトのコードをチェック
- ウェブサイトのコードを試しに変更
- レスポンシブ表示の確認
初心者の方は上記３点を覚えておくといいです。
起動方法を確認したら、説明していきますね。
検証機能の起動方法
検証（ディベロッパーツール）を起動させるのはとっても簡単です。
Googleクロームブラウザさえあればすぐに、もちろん無料で使用可能です。
起動手順
①自分の気になるサイトを開いてみましょう。
②画面のどこでもいいので、右クリックします。
④一番下に「検証」という項目があるのでクリックしましょう。
④コードが表示されました。
ちなみに、ショートカットも準備されています。
Windows⇒Ctrl+Shift+I
Mac ⇒Command＋Option+I
です。
よく使うことになると思うので、覚えてしまいましょう。
ウェブサイトのコードをチェック
実際にコードのチェック方法を見ていきます。
HTML（Elements）の検索方法
①表示されたコードの右上にある矢印をクリックします。
②画面の中から参考にしたい場所をクリックしてみましょう。
すると、対応するコードを表示してくれます。
③選択されたコードに「▶」印があればクリックすることで、より詳細なコードを表示してくれます。
CSS(Styles)の検索方法
Elementsで検索したコードをクリックすると、同様にStylesに対応するCSSが表示されます。
この際、取り消し線が引いてあるプロパティもありますが、今は適用されていないだけなので気にせず大丈夫です。
ウェブサイトのコードを試しに変更
コードが見れるようになったので、これで知りたい場所を参考にできるようになりました。
次は、仮に文字や色、デザインを変更していきましょう。
文字や色を変えてみるだけでも、サイトの印象がガラリと変わるのでおもしろいですよ。
HTMLを編集
テキストを変更して、どんな表示がサイトに合うかいろいろ試してみましょう。
テキストの編集
①右上の矢印を選択後、画面上の変更してみたいテキストをクリックしましょう。
②表示されたHTMLの変更したい文字をダブルクリックして、選択モードにします。
③新しいテキストを入力すれば、サイトの表示が変わります。
class名やid名の編集
テキストの編集と同じ方法で、class名やid名の編集も行えます。
CSSを編集
CSSも編集することが可能です。
配色やフォントなどはサイトのイメージに大きな影響を与えます。
こちらもいろいろ試してみましょう。
既存CSSの変更
①右上の矢印をクリックし、変更したいHTMLを選択します。
②選択したStylesの変更したいプロパティをダブルクリックします。
③新しい内容を入力すれば、変更が適用されます。
CSSのプロパティを追加
①既存のプロパティの最後の方をクリックすると、入力モードになる。
②新たなプロパティを入力すると、変更が適用される。
プロパティの適用を外す
プロパティ右横のチェックボタンを外すと、プロパティの適用が解除される。
レスポンシブ表示の確認
検証（ディベロッパーツール）を使用すれば、様々なデバイスでの表示方法を確認することが出来ます。
近年様々なデバイスに対応するレスポンシブデザインは必須です。
表示のされ方を確認しながらプログラミングしていくことが大切ですね。
①右上のデバイスマークをクリックします。
②「Responsive」をクリックすると、各端末を選択することが出来ます。
まとめ：検証機能を使いこなしてスキルアップ
今回
検証機能とは何か。
検証機能の起動の方法。
検証機能の基本的な使い方。
についてまとめました。
初心者の方は検証（ディベロッパーツール）を知らずにプログラミングすることは大変もったいないです。
便利な機能はどんどん使用し、効率よくプログラミングに役立てていきましょう。
それでは。
初回投稿：2020年2月21日