Google検証ツール使い方｜グーグルクロームChromeデベロッパーツール | タイクツマッカートニー|退屈はすべてを手に入れる

本ページはプロモーションです。掲載内容は予告なく変更される場合があります。

スポンサードリンク

Google検証ツール使い方｜GoogleChromeデベロッパーツールとは・グーグルクローム検証モード（デベロッパーモード）使い方

プログラミング初心者に覚えて欲しい「GoogleChrome（グーグルクローム）」の「デベロッパーツール（デベロッパーモード）」【※「検証ツール（検証モード）」とも呼ばれています。】の、使い方について、簡単に説明していきます。

スポンサードリンク

GoogleChrome｜デベロッパーツールとは（検証ツールとは）

「GoogleChrome（グーグルクローム）」の「検証ツール（デベロッパーツール）」とは、「WEBページ」を作ってる時に、「Google」の「Chromeブラウザ」で表示している「ページ」の「HTML」や「CSS」を「確認」したり、「編集」したりすることが出来る、「WEBページの開発者」にとっては、とても便利な「ツール（機能）」のことです。

この「GoogleChrome（グーグルクローム）」の「検証ツール（デベロッパーツール）」を使いこなすことで、「WEBページ作成」の「作業効率」を高めることが出来るため、「WEBページを制作する人」にとっては、「必須のツール」だと言えるでしょう。

ワンポイント

このような「WEBページ」の「HTML」や「CSS」を確認したり編集したりできる「検証ツール（デベロッパーツール）」は、「Google Chrome（グーグルクローム）」だけではなく、「Firefox（ファイヤーフォックス）」や「Safari（サファリ）」などの「他のブラウザ」にも独自に用意されています。また、このような「検証ツール」は、「開発者向けツール」や「要素の検証」などの「呼び方」をされることもあります。

Google Chrome 検証ツール（デベロッパーツール）使い方

「検証ツール」で「WEBページ」の「HTML」を確認する
「検証ツール」で「HTML」を編集する
「検証ツール」で「WEBページ」の「CSS」を確認する
「検証ツール」で「CSS」を編集する
「検証ツール」で「CSS」を追加する

「GoogleChrome（グーグルクローム）」の「検証ツール（デベロッパーツール）」の「使い方」を、上記の順番で解説していきます。

今回、「検証ツール（デベロッパーモード）」の「使い方」は「Windows（ウィンドウズ）」の画面を使って説明していきますが、「Mac（マック）」でも、同じように進めていくことが出来ますので、ご安心下さい。

Google検証ツール使い方｜GoogleChromeデベロッパーツールとは・グーグルクローム検証モード（デベロッパーモード）使い方

「GoogleChrome（グーグルクローム）」の「検証ツール（デベロッパーツール）」では、「文章」「HTML」「CSS」を「書き換えて編集する」ことが出来ますが、この操作は、「一時的に見た目を変えているだけで、実際にインターネット上のWEBページが書き換わることはありません」ので、安心して「使い方」を確認していって下さい。

Google検証ツール使い方｜Chromeデベロッパーツール（検証ツール）プログラミング初心者の使い方

「GoogleChrome（グーグルクローム）」の「検証ツール（デベロッパーツール）」は、「高機能なツール」で、「WEBページ開発者」にとっては、非常に便利な機能が用意されています。

その中でも、今回は「プログラミング初心者」にも使いやすい「HTML」と「CSS」を「確認＆編集する機能」について、説明していきます。

①「検証ツール」で「WEBページ」の「HTML」を確認する

まずは、「GoogleChrome（グーグルクローム）」の「検証ツール（デベロッパーツール）」を使って、「ブラウザ」で見ている「WEBページ」の「HTML」を確認する方法を、見ていきましょう。

最初に、「Google Chrome（グーグルクローム）」で、「HTML」を確認したい「任意のページ」にアクセスをして下さい。

開いているページ上で「右クリック」をすると、「メニュー」が表示されますので、「メニューの1番下」にある「検証」をクリックして下さい。

「メニュー」の「検証」をクリックすると、以下の画像のように、「画面の右側（または下側）」に、「白いウィンドウ」が表示されます。※これが検証ツール（デベロッパーツール）です。

「検証ツール（デベロッパーツール）」の「上側の部分」に、今見ている「WEBページ」の「HTMLコード」が表示されます。

より詳細な「HTMLコード」を見るためには、「検証ツール（デベロッパーツール）」の「上側の部分」の「HTMLコード」が書かれている箇所の「左上」に表示されている「カーソルアイコン」をクリックして下さい。

この「カーソルアイコン」を、1回クリックすると、「カーソルアイコン」の色が「グレー色」から「青色」に変わったかと思います。

次は、「カーソルアイコン」を「青色」にした状態で、WEBページに表示されている「文字列」まで「マウスのカーソル」を移動させて、試しに、任意の文字列をクリックして下さい。

任意の「文字列」をクリックすると、「検証ツール（デベロッパーツール）」の「上側の部分」の「HTMLコード」が書かれている箇所の「HTMLの1行の背景」が「青色」になったのが、確認できると思います。

この「HTMLコード」が「青色」に塗つぶされた部分が、先ほどクリックした「任意の文字列」の「HTMLコード」だということが、ひと目で分かります。

ただし、このままの状態では、「タグの中の文章が隠れた状態」で表示されていますので、「青色」に塗りつぶされた「タグ」の「左側」に表示されている「三角形のアイコン」部分をクリックして下さい。

「三角形のアイコン」部分をクリックすると、以下の画像のように、隠れていた「タグの中の文章」が、表示されるようになります。

同じ要領で、試しに「他の部分のHTMLコード」も確認してみましょう。

もう1度、「検証ツール」の左上の「カーソルアイコン」をクリックして、「カーソルアイコン」の色を「青色」にしてから、別の「文字列」をクリックしてみて下さい。

任意の「文字列」をクリックすると、「検証ツール（デベロッパーツール）」の「上側の部分」の「HTMLコード」が書かれている箇所の「HTMLの1行の背景」が「青色」に塗りつぶされますので、「青色」に塗りつぶされた「タグ」の左側の「三角形のアイコン」部分をクリックして、隠れている「タグ」を全て表示させましょう。

この「操作方法」を利用すると、「WEBページ」上にある、様々な部分の「HTMLコード」を、確認することが可能となります。

②「検証ツール」で「HTML」を編集する

次は、先ほど確認した「HTML」を「検証ツール（デベロッパーツール）」内で編集して、「WEBページ内」の「文章」や「見た目」を変更していきましょう。

※あくまで、「検証ツール（デベロッパーツール）」内で、見た目を変更するだけなので、「WEBページ」自体の「HTML」を書き換える行為ではありませんので、安心して下さい。

先ほどと同じように、「検証ツール（デベロッパーツール）」の「左上」の「カーソルアイコン」をクリックして、今度は、「WEBページ」内の「別の文章」をクリックしてみましょう。

「検証ツール（デベロッパーツール）」の「上側の部分」の「HTMLコード」が書かれている箇所の「HTMLの1行の背景」が「青色」に塗りつぶされたかと思いますので、この「青色」で塗りつぶされた「1行」の上で「右クリック」をして下さい。

「右クリック」をして、表示された「メニュー」の中から、「Edit as HTML」という項目を選択して、クリックして下さい。

「Edit as HTML」という項目を選択して、クリックすると、上記の画像のように、「HTMLを編集するためのフォーム」が表示されます。

まずは試しに<p>タグの中の文章を、好きな文章に編集してみましょう。

「HTMLを編集するためのフォーム」の中に書かれている「文章」を削除して（タグは残して）、好きな文章に書き換えてみましょう。

文章を書き替えたら、「Windows（ウィンドウズ）」の人は、【「Ctrlキー」を押しながら「Enterキー」を押します】。

※「Mac（マック）」の人は、【「command（⌘）キー」を押しながら「Enterキー」を押します】

すると、「WEBページ」に表示されている「文章」が変わったかと思います。

「検証ツール（デベロッパーツール）」では、このように「文章」だけではなく、「HTMLタグ」なども書き換えることが可能です。

もう1度、<p>タグ上で「右クリック」をして、「Edit as HTML」を選択して、クリックをし、「HTMLを編集するためのフォーム」を表示させて下さい。

今度は、先頭の<p>タグと末尾の終了タグ</p>を、それぞれ<h2>と</h2>に書き換え、「Windows（ウィンドウズ）」の人は、【「Ctrlキー」を押しながら「Enterキー」を押してください】

※「Mac（マック）」の人は、【「command（⌘）キー」を押しながら「Enterキー」を押します】

そうすると、表示されている文章部分が「pタグ」から「h2タグ」に切り替わったことで、少し文字が大きく表示されたかと思います。

先ほども言及しましたが、これまでに変更した内容は、「検証ツール（デベロッパーツール）」内で、「一時的に見た目を変えている」だけで、実際に「インターネット上のWEBページ」の「HTML」を書き換えているわけではありません。

そのため、「ブラウザ」の「更新ボタン」をクリックして、「WEBページ」の「再読み込み」をすると、元の状態に戻すことが可能です。

このように、「検証ツール（デベロッパーツール）」を使って「HTML」を書き換えることで、「WEBページ」を制作する際に、わざわざコードを書き換えなくても、簡単に「見た目の変更」を「試してみる」ことが可能になるのです。

③「検証ツール」で「WEBページ」の「CSS」を確認する

さて、「HTML」の次は、WEBページの「CSS」を確認する方法について、説明していきます。

「HTML」を確認した時と同じように、「検証ツール（デベロッパーツール）」の「左上」にある「カーソルアイコン」をクリックして、試しに「WEBページ」の「ボタン要素」をクリックしてみます。

そうすると、「検証ツール（デベロッパーツール）」内の「HTMLの下側（もしくは右側）」にある「Style」という「箇所（フォーム）」に、その部分の「CSSコード」が表示されます。

ここには、今クリックした「箇所（この場合はボタン）」の「CSS」が表示されています。

このようにクリックすることで、「HTML」だけではなく、WEBページに表示されている「各要素」の「CSS」も、確認することが可能です。

次に、今、「CSS」を確認した場所の「下側（もしくは右側）」に表示されている、以下のような「青色・緑色・黄色・オレンジ色の四角形の画像」を見て下さい。

この「青色・緑色・黄色・オレンジ色の四角形の画像」は、今確認している「要素」の「大きさ」や「余白」を、分かりやすくまとめた「図」になります。

最も内側の「青色の四角の中に書かれている数字」は、その要素自体の「幅」と「高さ」を表しています。

さらに、その外側の「緑色の四角の中に書かれている数字」は、「paddingの大きさ」を表しており、1つ外側の「黄色の四角の中に書かれている数字」は「borderの大きさ」を表し、1番外側の「オレンジ色の四角の中に書かれている数字」は、「marginの大きさ」を表示してくれています。

また、「WEBページ」の「ボタン要素」などで、「マウスのカーソルを乗せた時に背景の色が少し濃くなる（hover：ホバーする）」ような設定がされている場合がありますが、この「ホバー時」の「CSS」を確認する方法もあります。

先ほど確認した「CSS」が表示されている箇所の「右上」あたりに、「：hov」という「グレーの文字」が表示されているのが見えると思いますので、この「：hov」という「文字の部分」をクリックしてみて下さい。

すると、以下の画像のように「Force element state」という「選択欄」が出現したかと思います。

これを使うことで、「HTML要素」の様々な状態での「CSS」を、試して確認することが出来るようになります。

例えば「：active」に「チェックマーク」を入れることで、「その要素をクリックした時のCSSを確認することが可能」となりますし、一方、「：hover」に「チェックマーク」を入れてることで、「その要素にマウスを乗せた時のCSSを確認することが可能」となっています。

今回は、試しに選択した「ボタン要素」に「カーソルを乗せた場合のCSSを確認しようと思う」ので、「：hover」に「チェックマーク」を入れてみます。

すると、「CSS」が表示されている箇所に、以下のような「CSS」が追加で表示されたのが分かるかと思います。

この追加された「CSS」を見ることで、この「ボタン要素」は、「〇〇〇」という「CSS」に書き換わっていることが確認できます。

④「検証ツール」で「CSS」を編集する

では、次は、先ほど確認した「CSSを編集」してみましょう。

まずは「初期状態」に戻すために、1度、「WEBページを再度読み込み」して、「検証ツール（デベロッパーツール）」で、もう1度、先ほどの「ボタン要素」を選択してみます。

試しに、この「ボタン要素」の値を、「検証ツール（デベロッパーツール）」内で、変更してみます。

表示されている「ボタン要素」が、以下のような画像に変更されました。

また、「margin」や「padding」などの「余白」に関しては、先ほど紹介した、「青色・緑色・黄色・オレンジ色の四角形の画像」から、「値」を編集（変更）することが可能です。

例えば、「オレンジ色」の「margin」を表示している部分の「右側」の「数字（値）」を「ダブルクリック」すると、「値」が変更できるようになりますので、変更したい「数値」を入力してみて下さい。

「プレビュー」を見ると、変更した「値」に、見た目が変わっているのが分かるかと思います。

実際に「WEBページ」を作成したことがある人や、プログラミング初心者で、これから「WEBページ」を制作していきたい人などは、「余白を何px（ピクセル）」にするかを悩む人も多いかと思いますので、そのような時に「検証ツール（デベロッパーツール）」を使うことで、「見た目」で感覚的に「余白の値」を決めることが出来るので、とても便利です。