【新型コロナウイルス(COVID-19)】UberEatsパートナーセンター営業休止中の「アカウント有効化方法」のお知らせ

Google検証ツール使い方|グーグルクロームChromeデベロッパーツール

Google 検証ツール 使い方 GoogleChrome グーグルクローム デベロッパーツールとは デベロッパー機能とは Google Chrome 検証ツール 検証機能 使い方 HTML CSS 出し方 Mac マック Windows ウィンドウズ

Google検証ツール使い方|GoogleChromeデベロッパーツールとは・グーグルクローム検証モード(デベロッパーモード)使い方

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

GoogleChrome|デベロッパーツールとは(検証ツールとは)

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

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

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

Google Chrome 検証ツール(デベロッパーツール)使い方

  1. 「検証ツール」で「WEBページ」の「HTML」を確認する
  2. 「検証ツール」で「HTML」を編集する
  3. 「検証ツール」で「WEBページ」の「CSS」を確認する
  4. 「検証ツール」で「CSS」を編集する
  5. 「検証ツール」で「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(ピクセル)」にするかを悩む人も多いかと思いますので、そのような時に「検証ツール(デベロッパーツール)」を使うことで、「見た目」で感覚的に「余白の値」を決めることが出来るので、とても便利です。

⑤「検証ツール」で「CSS」を追加する

最後に、「CSS」を追加する方法を、説明していきます。

今回は、「任意の文字列」に対して、「背景色」を付けてみます。

まずは、今まで通り、「検証ツール(デベロッパーツール)」の「左上」にある「カーソルアイコン」をクリックして、「カーソルアイコン」を「グレー色」から「青色」にしてから、「WEBページ」の「任意の文字列」を選択して下さい。

 

「検証ツール(デベロッパーツール)」内の、先ほど使用した「:hov」というボタンの「右側」に「+(プラスマーク)」の「アイコン」が表示されていますので、その「+(プラスマーク)」の「アイコン」をクリックしてみて下さい。

 

すると、以下のように「h1」に対する「CSS」を記述するための「欄」が追加されます。

 

この状態で、「h1{ 」の後ろ辺りを「クリック」すると、以下の画像のように「:(コロン)」と「;(セミコロン)」の間に、「1行」が追加されます。

 

この状態で、背景色を追加するために、background-color と入力して、「Enter」キーを押します。

 

さらに、その後に、#02ccba と入力して、再度、「Enter」キーを押します。

 

これで、「任意の文字列」に、背景色が付いたかと思います。

 

途中で、間違ってボタンを押してしまったりすると、上手く表示されない場合がありますので、そのような時は、もう1度、最初の「+(プラスマーク)」を押すところから、やり直しましょう。

Google検証ツール使い方|GoogleChromeデベロッパーツールとは・グーグルクローム検証モード(デベロッパーモード)使い方【まとめ】

今回は、「プログラミング初心者」の為に、「Google Chrome(グーグルクローム)」の「検証ツール(デベロッパーツール)」の「使い方」を、解説してきました

Google検証ツール使い方|Chrome検証モード(デベロッパーモード)【まとめ】

今回、紹介した「機能や使い方」以外にも、「Google Chrome(グーグルクローム)」の「検証ツール(デベロッパーツール)」には、便利な機能が沢山ありますので、是非、徐々に使いこなしていって下さい。

 

注意
紹介している情報は、2020年4月時点の情報です。現在は変更になっている場合もありますので、詳細は、「公式サイト」にて、ご確認ください。
儲け方 Uber Eats ウーバーイーツ 本登録 副業 いくら稼げるウーバーイーツ登録|UberEats配達員・注文方法・商品頼み方・地域範囲・配達時間帯

「UberEats(ウーバーイーツ)」って何?

var wpcf7 = {"apiSettings":{"root":"https:\/\/www.taikutsu-mccartney.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}};