本記事にはPR広告が含まれています。
本記事にはPR広告が含まれています。掲載されている広告についての詳細はプライバシーポリシーをご参照ください。
本記事にはPR広告が含まれています。掲載されている広告についての詳細はプライバシーポリシーをご参照ください。
Google Chromeにはウェブ制作者向けの検証機能(デベロッパーツール)がデフォルトで搭載されています。
これを使用することでテスト的にウェブサイトのデザインを変更してみたり、レイアウト崩れの原因究明、また様々な画面サイズのデバイスに合わせてサイトの表示を確認したりすることが可能です。
今回はGoogle Chromeの検証機能(デベロッパーツール)の基本的な使い方についてをご紹介します。
この記事を読むと分かること
まずはデベロッパーツールを起動する方法についてをご紹介します。
検証したいウェブページを開いている状態で、右クリック→「検証」をクリックします。
これでデベロッパーツールが開きます。
※ショートカットキーは以下の通り。
: Command + Option + I
: Ctrl + Shift + I
なお上の例では下側にデベロッパーツールが表示されていますが、こちらの表示箇所は以下の手順で変更することも可能です。
デベロッパーツールの表示位置はデフォルトで下側表示になっていますが、これを変更するにはデベロッパーツールの右上にある「⋮」アイコンをクリックし、「固定サイド」のアイコンを変更してあげます。
選択できる表示位置は、画面の左側 / 下側 /右側 / 別ウィンドウでの表示の4パターンです。
それではデベロッパーツールの使い方を解説していきます。
デベロッパーツールで特定箇所のコードを表示するには、デベロッパーツールの左上にある「」アイコンをクリックします。
するとアイコンが少し薄い青色になっている状態に変わると思います。
この状態でコードが見たい箇所をクリックしてみましょう。
コードが見たい箇所をクリックすることで、その箇所のHTML・CSSコードがデベロッパーツール上に表示されます。
なお、「」アイコンをクリックしてから特定の箇所を選択する際、要素に青色、緑色、オレンジ色の3色が付いていることが分かります。
これら3色の意味は以下の通りになっています。
要素を選択すると、始めは選択している要素の中身(子要素)が隠れた状態で表示されますが、「▶︎」箇所をクリック、あるいはキーボードの右矢印キー「 → 」をクリックしてあげればこちらを表示することができます。
つぎにCSSの見方・各項目の意味を解説します。
デベロッパーツール上の「スタイル」タブには上から下へ選択している要素に指定されているCSSが表示されています。
ここで1番上側に記述されている「element.style」と書かれた箇所がありますが、こちらは
インラインスタイルシート(HTMLタグ内に書かれたCSS)を意味します。
今回は何も書かれていないので、選択している要素のHTMLタグ内には何もCSSが指定されていないという意味になります。
選択されている要素に指定されているCSSがそれぞれどこのファイルに記述されているか確認するには、CSSの右側に書かれている箇所を見ます。
指定されているCSSを修正したい場合などは、まずこちらからCSSが記載されているファイル名を確認すると良いでしょう。
記述されているCSSの中には、取り消し線が付いている指定もあります。
これは優先順位が低く、他の優先順位が高いCSSによって上書きされているという意味です。
つまり、こちらのCSSは適用されていません。
「ユーザー エージェント スタイルシート」は、ブラウザ毎に始めから指定されているデフォルトCSSのことを言います。
デベロッパーツールではウェブサイトのソースコードを見るだけでなく、テスト的にHTML・CSSを編集し、サイトのデザインを変更することができます。(※公開中のサイトに何も影響を与えません。)
まずCSSをテスト的に編集する方法についてです。
すでに指定されているプロパティの値を変更したい場合は、変更したい値の上でワンクリックします。
そうすると値が編集できるようになるので、ここで新しい値を入力して Enter を押してあげればOKです。
また、文字色や背景色といった色を変更したい場合は、カラーコードの左側に表示されているボックスをクリックするとカラーピッカーが表示されるので、こちらから好きな色を選択することができます。
なお、ここで検証画面で編集した内容はリアルタイムでデザインに反映されます。
指定してあるプロパティを無効化したい場合は、プロパティの左側に表示されているチェックマークを外してあげれば良いです。
チェックマークを外されたプロパティの上には打ち消し線が付きます。
新しいプロパティを追加したい場合は、既存のプロパティの1番最後の下辺りの空白スペースをクリックします。
そうすると新たにプロパティの入力欄が追加されるので、ここで好きなプロパティを追加できます。
新しくセレクターを追加したい場合は、右上の「+」マークをクリックします。
「+」マークをクリックすると始めは選択されている要素を指定するセレクターが追加されますが、セレクター名の上をクリックすると任意のセレクター名に編集することが可能になります。
ホバー時のCSSを確認するには、右上の「:hov」をクリックし、「:hover」にチェックを入れればOKです。
hover以外にも「:active」や「:focus」にチェックを入れることで、これらのCSSを確認することも可能です。
なお、ここで仮編集したCSSはリロードすると元に戻ります。
その為、こちらで仮編集して気に入ったコードはまるっとコピーしてCSSファイルにペーストすることを忘れないようにしましょう。
つぎはHTMLをテスト的に編集する方法についてご紹介します。
まずHTMLのソースを編集するには、編集したいタグの左側に表示されている「…」マークをクリックします。
「HTMLとして編集」をクリックします。
これでHTMLのコードを自由に編集できるようになります。
不要な要素を削除する場合はソースを編集する際と同様、「…」をクリックし、「要素を削除」をクリックします。
最後にデベロッパーツールの「デバイスモード」を使って、様々な画面サイズのデバイスに合わせてサイトの表示を確認する方法についてをご紹介します。
「デバイスモード」を起動するには、「」をクリックします。
するとアイコンが少し薄い青色になっている状態に変わると思います。
デバイスモードが起動できたら画面上部にある「レスポンシブ▼」と書かれた箇所をクリックします。
すると様々な端末名が表示されます。ここで端末名をクリックすることで、その端末サイズでの表示を確認することが可能です。
なお、端末名ではなく「レスポンシブ」にしておくと、自由にハンドルをドラッグしてウィンドウ幅を変更することができます。
メディアクエリなどでブレイクポイントを境にどのようにレイアウトが変更されるかなど確認したい場合は、こちらを使うと良いでしょう。
まとめです。今回はGoogle Chromeの検証機能(デベロッパーツール)の基本的な使い方についてをご紹介しました。
最低限ここで紹介している内容を抑えておけば、効率的にウェブサイトを作成していくことができるようになるはずです。
今回は以上になります。最後までご覧頂き、ありがとうございました。
元日本語教師。2020年12月にフリーランスのWeb制作者・SEOライターとして独立。
ポートフォリオ: https://ryouslashweb.com/
詳細は運営者情報ページに記載。