検証ツール（デベロッパーモード）の使い方
この記事では「Google Chrome」の検証ツール（デベロッパーモード）の使い方について説明していきます。
検証ツールとはWebページなどを作成する際に、ブラウザで表示しているページのHTMLやCSSを確認・編集することができる、開発者にとって便利なツールです。使いこなすことでかなり作業効率を上げることができるため、Webページを制作する人にとっては必須のツールとなってきています。
検証ツールは「Google Chrome」だけでなく、「Firefox」や「Safari」などの他のブラウザでも用意されていますが、今回は「Google Chrome」を使用しながら進めていきましょう。また、検証ツールは「開発者向けツール」や「要素の検証」などと呼ばれる場合もあります。
・HTMLおよびCSSの基礎的な知識
Progate「HTML & CSS 学習コース 初級編」をクリアしていれば十分です。
Progate「HTML & CSS 学習コース 初級編」をクリアしていれば十分です。
※ 記事内で使用している画像は全て「Mac」で撮影したものですが、「Windows」でも同じように進めることができるのでご安心ください。
1. ページのHTMLを確認する
検証ツールは非常に高機能なツールで、開発者にとって便利な様々な機能が用意されています。今回は、その中でもWebページ制作でもっとも使用されている「HTML」および「CSS」を確認・編集することができる機能について学習していきましょう。
まずはブラウザで表示しているページのHTMLを確認する方法を見ていきましょう。「Google Chrome」で以下のURLのページにアクセスしてください。
今回はこのページを使用しながら検証ツールの使い方を学習していきます。
開いているページ上で右クリックをしてください（画面内なら場所はどこでも大丈夫です）。以下の画像のようにメニューが表示されたら、一番下の「検証」を選択してください。
以下の画像のように、画面右側（または下側）から白い画面がでてきたでしょうか？これが検証ツールです。
検証ツールの上半分の部分に注目してください。この部分には今見ているページのHTMLのコードが表示されています。
より詳しくHTMLを調べてみましょう。検証ツールの左上に表示されている、カーソルアイコン（下図参照）をクリックしてください。
一度クリックすると、以下の図のようにアイコンの色がグレーから青色に変わったかと思います。
この状態で、サイト中央に表示されている「LEARN TO CODE」という文字の部分までカーソルを移動させてクリックしてください。
すると、検証ツール内のHTMLの1行の背景が青色になったかと思います。
<h1>...</h1>
この部分が、先ほどクリックした「LEARN TO CODE」という文字の部分のHTMLです。ただ、この状態ではタグの中の文章が隠れた状態で表示されてしまっています。
<h1>というタグの左側に表示されている三角形のアイコンをクリックしてください。
以下の画像のように、隠れていた部分が表示され「LEARN TO CODE」という文字が表示されたかと思います。
試しに他の部分のHTMLも確認してみましょう。
もう一度検証ツール左上のカーソルアイコンをクリックしてから、今度は「新規登録はこちら」という緑色のボタンをクリックしてみてください。
もう一度検証ツール左上のカーソルアイコンをクリックしてから、今度は「新規登録はこちら」という緑色のボタンをクリックしてみてください。
以下のようなHTMLが表示されたでしょうか？
<a href="#" class="btn signup">新規登録はこちら</a>
このボタンは
<a> タグで作成されていて、「btn」と「signup」という2つのクラスが付けられていることが確認できました。
2. HTMLを編集する
次は先ほど確認したHTMLを編集して、ページ内の文章などを変更してみましょう。
検証ツール左上のカーソルアイコンをクリックし、今度は「Progateはオンラインプログラミング学習サービスです。」という文章をクリックしてください。
検証ツール左上のカーソルアイコンをクリックし、今度は「Progateはオンラインプログラミング学習サービスです。」という文章をクリックしてください。
検証ツールでは以下のような
<p> タグ部分が青く表示されたかと思います。
<p>...</p>
この1行の上で右クリックをしてください。表示されたメニューの中から「Edit as
HTML」という項目を選択してください。
上の画像のように、HTMLを編集するためのフォームが表示されたかと思います。まずは
<p> タグの中の文章を編集してみましょう。「Progateはオンラインプログラミング学習サービスです。」という部分を消し、以下の文章を貼り付けてください。
Progate is a web service where you can learn programming online.
文章を貼り付けたら、「command（⌘）」キー（Windowsの方は「Ctrl」キー）を押しながら「Enter」キーを押します。すると、ページに表示されている文章が実際に変わったかと思います。
検証ツールでは文章だけでなく、HTMLのタグなども書き換えることが可能です。もう一度
<p> タグの上で右クリックをし「Edit
as HTML」を選択して、編集画面を表示してください。今度は先頭の <p> と末尾の終了タグ </p> を、それぞれ <h2> と </h2> に書き換え、commandキー（Ctrlキー）とEnterキーを押してください。
今度は表示されている文章部分が
<h2> タグに変わり、少し大きく表示されたかと思います。
なお、これまでに変更した内容は一時的に見た目を変えているだけであり、実際にインターネット上のこのWebページのHTMLが書き換わることはありません。そのため、ブラウザの左上に表示されている更新ボタンをクリックし、このページを再読み込みすることで元の状態に戻すことが可能です。
このように検証ツールを用いてHTMLを書き換えることで、Webページを制作する際にわざわざコードを書き換えなくても、簡単に見た目の変更を試してみることができます。
3. ページのCSSを確認する
HTMLの次は、WebページのCSSを確認する方法を学習していきましょう。
検証ツール左上のカーソルアイコンをクリックし、青色の「Facebookで登録」というボタンをクリックしてください。検証ツール内のHTMLの下、または右に表示されている「Styles」という箇所にCSSのコードが表示されているかと思います。
検証ツール左上のカーソルアイコンをクリックし、青色の「Facebookで登録」というボタンをクリックしてください。検証ツール内のHTMLの下、または右に表示されている「Styles」という箇所にCSSのコードが表示されているかと思います。
ここには今クリックしたボタンのCSSが表示されています。この要素には「btn」と「facebook」の2つのクラス名がついていますので、それぞれが別で表示されるようになっています。
.btn {
padding: 8px 24px;
color: white;
display: inline-block;
opacity: 0.8;
border-radius: 4px;
text-align: center;
}
.facebook {
background-color: #3b5998;
margin-right: 10px;
}
このようにすることで、Webページに表示されている各要素のCSSを確認することが可能です。
次に、今CSSを確認した場所の下、または右側に表示されている、オレンジ・黄・緑・青の四角形を見てください（以下の画像参照）。
この図は、今確認している要素の大きさや余白をまとめた図です。
内側の青い部分はその要素自体の幅と高さを表しています。上の画像では、幅が139.188px、高さが24pxということを表しています。
その周りの緑はpaddingの大きさを、黄色はborder、オレンジはmarginを表しています。上の画像では、paddingの上下が8px、左右が24px、borderは上下左右とも0、marginは右にだけ10pxある、ということが分かります。
内側の青い部分はその要素自体の幅と高さを表しています。上の画像では、幅が139.188px、高さが24pxということを表しています。
その周りの緑はpaddingの大きさを、黄色はborder、オレンジはmarginを表しています。上の画像では、paddingの上下が8px、左右が24px、borderは上下左右とも0、marginは右にだけ10pxある、ということが分かります。
このボタンはマウスを乗せる（ホバーする）ことで背景の青色が少し濃くなるようになっています。次はこのホバー時のCSSを確認する方法を学習してみましょう。
先ほど確認したCSSが表示されている箇所の右上あたりに「:hov」というグレーの文字が表示されていますので、この文字の部分をクリックしてみてください。
すると、以下の画像のように「Force element state」という選択欄がでてきたかと思います。これを用いることで、HTML要素の様々な状態でのCSSを確認することができます。
例えば「:active」にチェックをすることでその要素をクリックした時のCSSを、「:hover」にチェックをすることでマウスを乗せた時のCSSを確認することが可能です。
今回は「:hover」にチェックを入れてみてください。
すると、CSSが表示されている箇所に、以下のようなCSSが追加で表示されたかと思います。
.btn:hover {
opacity: 1;
}
これより、この「btn」クラスはホバー時には「opacity（透過度）」の値が「1」に書き換わっていることが確認できました。
4. CSSを編集する
では、先ほど確認したCSSを編集してみましょう。まずは初期状態に戻すために一度ページを再度読み込み、検証ツールで「Facebookで登録」を選択してください。
今回は「btn」クラスの「border-radius」（角の丸さ）に関する値を編集してみましょう。検証ツールを用いることで、現在は「4px」という値になっていることが確認できるかと思います。
この「4px」という文字の部分をクリックしてください。以下の画像のように編集フォームが表示されましたか？
この状態で「4px」という文字を消し、代わりに「20px」と入力して「Enter」キーを押してください。
表示されているボタンが、以下の画像のように角が丸くなったかと思います。
marginやpaddingなどの余白に関しては、先ほど紹介したオレンジや緑の図からも編集することができます。
オレンジ色のmarginを表している部分の右側の「10」という数字をダブルクリックし、代わりに「50」と入力してみてください。
オレンジ色のmarginを表している部分の右側の「10」という数字をダブルクリックし、代わりに「50」と入力してみてください。
正しく更新できれば、FacebookとTwitterのボタンの間の余白が広がったはずです。
実際にWebページを制作したことがある人は、「ここの余白は何pxがいいかな？」と試行錯誤したことがあるかと思います。検証ツールを使うことで、簡単にCSSの値を調整し、適切な値を判断することができます。
5. CSSを追加する
最後に、CSSを追加する方法を学習してみましょう。今回は「LEARN TO CODE」という文字の部分に背景色を付けてみます。
まずは今まで通り、検証ツール左上のアイコンをクリックして「LEARN TO CODE」という部分を選択してください。
まずは今まで通り、検証ツール左上のアイコンをクリックして「LEARN TO CODE」という部分を選択してください。
検証ツール内の、先ほど使用した「:hov」というボタンの右側にプラスマーク「+」のアイコンが表示されているかと思います。そのアイコンをクリックしてみてください。
すると、以下のように「h1」に対するCSSを記述するための欄が追加されたかと思います。
この状態で、「h1 {」の後ろ辺りをクリックしてください。
すると、以下の画像のようにコロンとセミコロンだけの行が1行追加されたかと思います。
この状態で、
さらにその後、
background-color と入力し、「Enter」キーを押します。さらにその後、
#02ccba と入力して再度「Enter」キーを押してください。
以下の画像のような表示に変更できましたか？
これで「LEARN TO CODE」という文字の部分に背景色がついたかと思います。
途中で誤って別の箇所をクリックしたり、違うキーを押したりするとうまくできない場合もあります。間違ってしまった場合には、落ち着いてもう一度「+」ボタンを押すところからやり直してみましょう。
検証ツールの使い方説明は以上です。検証ツールを用いて他のWebページを参考にしたり、自分のページを調整してみてください！
コメントをお書きください