本ページにはプロモーションが含まれています。
Chrome検証機能(デベロッパーツール)の基本的な使い方を解説
![Chrome検証画面(デベロッパーツール)の基本的な使い方](https://plusoneweb.net/wp-content/uploads/2021/11/how-to-use-chrome-developper-tool-thumbnail.jpg)
Google Chromeにはウェブ制作者向けの検証機能(デベロッパーツール)がデフォルトで搭載されています。
これを使用することでテスト的にウェブサイトのデザインを変更してみたり、レイアウト崩れの原因究明、また様々な画面サイズのデバイスに合わせてサイトの表示を確認したりすることが可能です。
- テスト的にウェブサイトのデザイン(HTML・CSSコード)を変更する。
- レイアウト崩れの原因究明をする。
- 様々な画面サイズのデバイスに合わせてサイトの表示を確認する。
- 他サイトのソースコードをチェックする。
今回はGoogle Chromeの検証機能(デベロッパーツール)の基本的な使い方についてをご紹介します。
この記事を読むと分かること
- デベロッパーツールの起動方法について
- ウェブサイトのソースコードを確認する方法について
- HTML・CSSをテスト的に編集する方法について
- 様々なウィンドウ幅に併せてウェブサイトの表示を確認する方法について
デベロッパーツールの起動方法
まずはデベロッパーツールを起動する方法についてをご紹介します。
検証したいウェブページを開いている状態で、右クリック→「検証」をクリックします。
![右クリック→「検証」をクリック](https://plusoneweb.net/wp-content/uploads/2021/11/inspection-1024x706.jpg)
これでデベロッパーツールが開きます。
![デベロッパーツールが表示されている画面](https://plusoneweb.net/wp-content/uploads/2021/11/developer-tool-opened-1024x770.jpg)
※ショートカットキーは以下の通り。
: Command + Option + I
: Ctrl + Shift + I
なお上の例では下側にデベロッパーツールが表示されていますが、こちらの表示箇所は以下の手順で変更することも可能です。
表示位置を変更する方法
デベロッパーツールの表示位置はデフォルトで下側表示になっていますが、これを変更するにはデベロッパーツールの右上にある「⋮」アイコンをクリックし、「固定サイド」のアイコンを変更してあげます。
![「⋮」アイコンをクリックし、「固定サイド」のアイコンを変更](https://plusoneweb.net/wp-content/uploads/2021/11/dock-side-change-1024x818.jpg)
選択できる表示位置は、画面の左側 / 下側 /右側 / 別ウィンドウでの表示の4パターンです。
画面の左側に表示させている例
![画面の左側に表示させている例](https://plusoneweb.net/wp-content/uploads/2021/11/dock-side-left-1024x748.jpg)
画面の下側に表示させている例
![画面の下側に表示させている例](https://plusoneweb.net/wp-content/uploads/2021/11/dock-side-bottom-1024x752.jpg)
画面の右側に表示させている例
![画面の右側に表示させている例](https://plusoneweb.net/wp-content/uploads/2021/11/dock-side-right-1024x752.jpg)
別ウィンドウで表示させている例
![](https://plusoneweb.net/wp-content/uploads/2021/11/dock-side-another-window-1024x756.jpg)
デベロッパーツールの使い方
それではデベロッパーツールの使い方を解説していきます。
使い方①: 特定箇所のコードを表示する
デベロッパーツールで特定箇所のコードを表示するには、デベロッパーツールの左上にある「」アイコンをクリックします。
![セレクトモードのアイコンをクリック](https://plusoneweb.net/wp-content/uploads/2021/11/select-mode-click-2-1024x689.jpg)
するとアイコンが少し薄い青色になっている状態に変わると思います。
![アイコンをクリックすると青色に変わる](https://plusoneweb.net/wp-content/uploads/2021/11/select-mode-icon-color-1024x576.jpg)
この状態でコードが見たい箇所をクリックしてみましょう。
![セレクトモードで要素をクリックする](https://plusoneweb.net/wp-content/uploads/2021/11/select-mode-select-1.gif)
コードが見たい箇所をクリックすることで、その箇所のHTML・CSSコードがデベロッパーツール上に表示されます。
![選択した要素のHTML・CSS表示箇所](https://plusoneweb.net/wp-content/uploads/2021/11/chosen-element-html-css-1024x717.jpg)
要素に付いている色の意味
なお、「」アイコンをクリックしてから特定の箇所を選択する際、要素に青色、緑色、オレンジ色の3色が付いていることが分かります。
これら3色の意味は以下の通りになっています。
![要素に付いている色の意味](https://plusoneweb.net/wp-content/uploads/2021/11/color-meaning-1024x576.jpg)
- 緑色 = 要素に効いているpadding
- 青色 = コンテンツのサイズ
- オレンジ色 = 要素に効いているmargin
選択したHTML要素の子要素を表示する
要素を選択すると、始めは選択している要素の中身(子要素)が隠れた状態で表示されますが、「▶︎」箇所をクリック、あるいはキーボードの右矢印キー「 → 」をクリックしてあげればこちらを表示することができます。
![「▶︎」箇所をクリックすると、HTML要素を展開することができる](https://plusoneweb.net/wp-content/uploads/2021/11/html-open.gif)
CSSの見方・各項目の意味
つぎにCSSの見方・各項目の意味を解説します。
デベロッパーツール上の「スタイル」タブには上から下へ選択している要素に指定されているCSSが表示されています。
![デベロッパーツール上に表示されている選択中要素に指定されているCSS](https://plusoneweb.net/wp-content/uploads/2021/11/chosen-element-css-1024x702.jpg)
element.styleとは?
ここで1番上側に記述されている「element.style」と書かれた箇所がありますが、こちらは
インラインスタイルシート(HTMLタグ内に書かれたCSS)を意味します。
![](https://plusoneweb.net/wp-content/uploads/2021/11/inline-stylesheet.jpg)
今回は何も書かれていないので、選択している要素のHTMLタグ内には何もCSSが指定されていないという意味になります。
CSSが記載されているファイル名を確認する
選択されている要素に指定されているCSSがそれぞれどこのファイルに記述されているか確認するには、CSSの右側に書かれている箇所を見ます。
![CSSが記載されているファイル名の確認方法](https://plusoneweb.net/wp-content/uploads/2021/11/css-written-file.jpg)
指定されているCSSを修正したい場合などは、まずこちらからCSSが記載されているファイル名を確認すると良いでしょう。
取り消し線の意味とは?
記述されているCSSの中には、取り消し線が付いている指定もあります。
これは優先順位が低く、他の優先順位が高いCSSによって上書きされているという意味です。
![取り消し線の意味](https://plusoneweb.net/wp-content/uploads/2021/11/strikethrough-meaning.jpg)
つまり、こちらのCSSは適用されていません。
ユーザー エージェント スタイルシートとは?
「ユーザー エージェント スタイルシート」は、ブラウザ毎に始めから指定されているデフォルトCSSのことを言います。
![「ユーザー エージェント スタイルシート」は、ブラウザ毎に始めから指定されているデフォルトCSSのこと。](https://plusoneweb.net/wp-content/uploads/2021/11/user-agent-stylesheet.jpg)
使い方②: CSSをテスト的に編集する
デベロッパーツールではウェブサイトのソースコードを見るだけでなく、テスト的にHTML・CSSを編集し、サイトのデザインを変更することができます。(※公開中のサイトに何も影響を与えません。)
まずCSSをテスト的に編集する方法についてです。
プロパティの値を変更する
すでに指定されているプロパティの値を変更したい場合は、変更したい値の上でワンクリックします。
![プロパティの値を変更する方法](https://plusoneweb.net/wp-content/uploads/2021/12/property-value-change.jpg)
そうすると値が編集できるようになるので、ここで新しい値を入力して Enter を押してあげればOKです。
また、文字色や背景色といった色を変更したい場合は、カラーコードの左側に表示されているボックスをクリックするとカラーピッカーが表示されるので、こちらから好きな色を選択することができます。
![カラーピッカーを使用している例](https://plusoneweb.net/wp-content/uploads/2021/12/color-picker-1.gif)
なお、ここで検証画面で編集した内容はリアルタイムでデザインに反映されます。
![検証画面で編集した内容はリアルタイムでデザインに反映される](https://plusoneweb.net/wp-content/uploads/2021/12/real-time-change-1.gif)
プロパティを無効化する
指定してあるプロパティを無効化したい場合は、プロパティの左側に表示されているチェックマークを外してあげれば良いです。
![プロパティを無効化する方法](https://plusoneweb.net/wp-content/uploads/2021/12/remove-property-1.gif)
チェックマークを外されたプロパティの上には打ち消し線が付きます。
新しいプロパティを追加する
新しいプロパティを追加したい場合は、既存のプロパティの1番最後の下辺りの空白スペースをクリックします。
![新しいプロパティを追加する方法](https://plusoneweb.net/wp-content/uploads/2021/12/add-new-property.gif)
そうすると新たにプロパティの入力欄が追加されるので、ここで好きなプロパティを追加できます。
新しくセレクターを追加する
新しくセレクターを追加したい場合は、右上の「+」マークをクリックします。
「+」マークをクリックすると始めは選択されている要素を指定するセレクターが追加されますが、セレクター名の上をクリックすると任意のセレクター名に編集することが可能になります。
![新しくセレクターを追加する手順](https://plusoneweb.net/wp-content/uploads/2021/12/add-new-selector.gif)
hover時のCSSを確認する
ホバー時のCSSを確認するには、右上の「:hov」をクリックし、「:hover」にチェックを入れればOKです。
![ホバー時のスタイルを確認する方法](https://plusoneweb.net/wp-content/uploads/2021/12/hover-style-check.gif)
hover以外にも「:active」や「:focus」にチェックを入れることで、これらのCSSを確認することも可能です。
(補足): 仮編集した内容はリロードすると元に戻ります
なお、ここで仮編集したCSSはリロードすると元に戻ります。
その為、こちらで仮編集して気に入ったコードはまるっとコピーしてCSSファイルにペーストすることを忘れないようにしましょう。
![仮編集して気に入ったコードはまるっとコピーしてして、CSSファイルにペーストすることを忘れないようにする](https://plusoneweb.net/wp-content/uploads/2021/12/test-css-paste.jpg)
使い方③: HTMLをテスト的に編集する
つぎはHTMLをテスト的に編集する方法についてご紹介します。
HTMLソースを編集する
まずHTMLのソースを編集するには、編集したいタグの左側に表示されている「…」マークをクリックします。
![「…」マークをクリック](https://plusoneweb.net/wp-content/uploads/2021/12/html-edit-step1.jpg)
「HTMLとして編集」をクリックします。
![「HTMLとして編集」をクリック](https://plusoneweb.net/wp-content/uploads/2021/12/html-edit-step2-897x1024.jpg)
これでHTMLのコードを自由に編集できるようになります。
![HTMLコードが自由に編集できるようになる](https://plusoneweb.net/wp-content/uploads/2021/12/html-edit-step3.jpg)
不要な要素を削除する
不要な要素を削除する場合はソースを編集する際と同様、「…」をクリックし、「要素を削除」をクリックします。
![「…」をクリックし、「要素を削除」をクリック](https://plusoneweb.net/wp-content/uploads/2021/12/delete-element-897x1024.jpg)
使い方④: 様々なデバイスでの見え方を確認する
最後にデベロッパーツールの「デバイスモード」を使って、様々な画面サイズのデバイスに合わせてサイトの表示を確認する方法についてをご紹介します。
「デバイスモード」を起動するには、「」をクリックします。
![デバイスモードのアイコンをクリック](https://plusoneweb.net/wp-content/uploads/2021/12/device-mode.jpg)
するとアイコンが少し薄い青色になっている状態に変わると思います。
![アイコンをクリックすると青色に変わる](https://plusoneweb.net/wp-content/uploads/2021/12/device-mode-icon-changed-1024x576.png)
様々なデバイスでの見え方を確認する
デバイスモードが起動できたら画面上部にある「レスポンシブ▼」と書かれた箇所をクリックします。
![画面上部にある「レスポンシブ▼」と書かれた箇所をクリック](https://plusoneweb.net/wp-content/uploads/2021/12/responsive-click-1024x750.jpg)
すると様々な端末名が表示されます。ここで端末名をクリックすることで、その端末サイズでの表示を確認することが可能です。
![iPhone6を選択した例](https://plusoneweb.net/wp-content/uploads/2021/12/iphone6-display-check-1024x771.jpg)
レスポンシブモードで確認する
なお、端末名ではなく「レスポンシブ」にしておくと、自由にハンドルをドラッグしてウィンドウ幅を変更することができます。
![レスポンシブモードではドラッグして自由にウィンドウ幅を変更することができる](https://plusoneweb.net/wp-content/uploads/2021/12/responsive-mode-1024x707.jpg)
メディアクエリなどでブレイクポイントを境にどのようにレイアウトが変更されるかなど確認したい場合は、こちらを使うと良いでしょう。
まとめ
まとめです。今回はGoogle Chromeの検証機能(デベロッパーツール)の基本的な使い方についてをご紹介しました。
最低限ここで紹介している内容を抑えておけば、効率的にウェブサイトを作成していくことができるようになるはずです。
- テスト的にウェブサイトのデザイン(HTML・CSSコード)を変更する。
- レイアウト崩れの原因究明をする。
- 様々な画面サイズのデバイスに合わせてサイトの表示を確認する。
- 他サイトのソースコードをチェックする。
今回は以上になります。最後までご覧頂き、ありがとうございました。