ブラウザの要素検査ツールの使用方法

公開: 2021-02-16

あなたが多くのウェブサイトで働いているなら、あなたはおそらく物事を成し遂げるためのより速く、より効率的な方法を常に探し求めています。もしそうなら、ほとんどの主要なブラウザで利用可能なInspect Elementツールは、手元にあると便利な資産になる可能性があります。これを使用すると、CSSクラスをすばやく識別したり、ページ上の要素への変更をプレビューしたり、モバイルデバイスでサイトをシミュレートしたりすることができます。

この記事では、要素の検査ツールを紹介し、最も一般的なWebブラウザーでツールにアクセスする方法を示します。次に、Web開発ワークフローの一部として使用する方法の例をいくつか紹介します。

掘り下げましょう！

主要なブラウザで要素の検査ツールにアクセスする方法

Inspect Elementツールは、任意のWebページの基礎となるソースコードを表示できるようにするユーティリティです。さらに、これを使用して一時的な変更を加え、元のソースコードをそのままにして、結果をリアルタイムで確認できます。これは、変更をテストしたり、問題を診断したりする必要がある場合に非常に役立ちます。また、気に入った機能を備えたサイトに遭遇し、それがどのように実装されているのか知りたい場合にも役立ちます。

Chrome、Firefox、Safariなど、ほとんどの主要なブラウザは、このツールのバリエーションを提供します。それぞれでアクセスする方法を見てみましょう。

GoogleChromeでInspect要素にアクセスする

Chromeで要素の検査ツールにアクセスするには、次の3つの方法があります。

ページ上の要素を右クリックして、[検査]を選択します。
ウィンドウの右上隅にある3つのドットのメニューをクリックし、[その他のツール]> [開発者ツール]を選択します。
キーボードでCtrl + Shift + Cを押します（MacではCmd + Option + C ）。

ツールが開くと、分割ビューが表示されます。一方では、表示を調整し、さまざまな画面解像度をシミュレートするためのいくつかのコントロールとともに、検査しているWebサイトのプレビューがあります。

Chromeの要素の検査ツール。

一方、情報を含むいくつかのペインがあります。上部のペインはページのHTMLです。コードの一部にカーソルを合わせると、右側のページの関連領域が強調表示されます。

要素を強調表示して、HTMLペインでフォーカスします。

その下には、ページに関する情報を表示するペインがあります。ここに表示される詳細は、選択したタブによって異なります。上のスクリーンショットでは、ページのCSSスタイルが表示されています。

下のペインは、Chromeデベロッパーツールに関するニュースとアップデートです。 Xをクリックすると、これを安全に閉じて混乱を減らすことができます。

最後に、HTMLペインの右上隅にある3つのドットのメニューをクリックし、ドックオプションの1つを選択することで、これらのペインの場所を変更できます。

MozillaFirefoxでInspect要素にアクセスする

Firefoxの要素の検査ツールはChromeのツールとかなり似ており、同様の方法でアクセスできます。

ページ上の要素を右クリックして、[要素の検査]を選択します。
Firefoxウィンドウの右上隅にあるハンバーガーメニューをクリックし、[ Web開発者]> [インスペクター]を選択します。
キーボードでCtrl + Shift + Cを押します（MacではCmd + Option + C ）。

Firefoxは、デフォルトで情報ペインを画面の下部に配置します。

Firefoxの要素検査ツール。

ただし、3ドットメニューをクリックして別のオプションを選択することで、簡単に移動できます。

SafariでInspect要素にアクセスする

Macコンピューターでは、SafariWebブラウザーは要素の検査ツールも提供します。ただし、それにアクセスするには追加の手順があります。Safari開発ツールを有効にする必要があります。

これを行うには、画面上部のメニューバーに移動し、[ Safari]> [設定]> [詳細]に移動します。次に、関連するボックスをチェックして、開発ツールを有効にします。

Safariの開発ツールを有効にします。

有効にすると、他のブラウザと同じように要素の検査機能にアクセスできます。

要素を右クリックして、[要素の検査]を選択します。
上部のメニューバーで、 [開発]> [Webインスペクターの表示]に移動します。
キーボードのCmd + Option + Iを押します。

Safariのツールの初期レイアウトは、ブラウザとは少し異なります。

SafariのInspect要素。

ただし、ChromeやFirefoxと同様に、インスペクターウィンドウの左上隅にあるアイコンをクリックすることで簡単にカスタマイズできます。

要素検査ツールの5つの一般的な使用法

Inspect Elementツールにアクセスする方法がわかったので、それを使用して実行できる便利なことをいくつか見てみましょう。可能性はたくさんありますが、以下の使用法が最も一般的なものです。これらの例ではChromeを使用しますが、機能は他のブラウザでも同様に機能するはずです。

1.WebサイトでCSSクラスを検索します

Inspect Elementを活用できる最も便利な方法の1つは、ページのカスケードスタイルシート（CSS）で詳細を見つけることです。これはいくつかの理由で便利です。まず、インターネットを閲覧しているときに、そのスタイルが本当に好きなサイトに出くわした場合は、CSSを覗いて、独自のWebデザインのアイデアを集めることができます。

それはあなた自身のサイトでも役に立ちます。たとえば、要素が正しく表示されない場合は、要素をすばやく調べて、正しいCSSを使用していることを確認できます。

InspectElementを使用してスタイルをチェックする基本的な方法は2つあります。単一のアイテムをすばやく表示したい場合は、プレビューペインでそのアイテムにカーソルを合わせると、そのアイテムに関する基本情報が表示されます。

要素の検査ツールにカーソルを合わせたときのスタイル情報。

ここでは、ブログのヘッダーの配色、フォント、余白などを確認できます。詳細ペインでは、ツールは関連するコードも強調表示するため、何が起こっているかを正確に確認できます。プレビューで要素をクリックすると、スタイルペインが更新され、CSSも表示されます。

[要素の検査]ウィンドウに表示されるCSSクラス。

要素にカーソルを合わせても何も起こらない場合は、インスペクターペインのカーソルアイコンが青色で強調表示されていることを確認してください。

Chromeインスペクターでホバービューオプションを有効にします。

探している特定のCSSクラスまたはスタイルがわかっていて、それを使用しているすべての要素を確認したい場合は、検索機能を使用することもできます。インスペクターを開いた状態で、キーボードのCtrl + Shift + F （Macの場合はCmd + Shift + F ）を押します。これにより、ページのコードを検索できる検索ボックスが開きます。ドキュメントを検索する場合と同じように、関連する結果が強調表示されます。

2.サイトのトラブルシューティング

要素の検査ツールは、問題のトラブルシューティングに非常に便利です。たとえば、要素の色やフォントが正しく表示されない場合は、前のセクションで説明したツールを使用してすばやく確認できます。

[要素の検査]ツールからページのHTMLを直接編集することもできます。変更するコードをダブルクリックするだけで編集できます。

コードは実際にはWebサイトで変更されていないことに注意してください。ページを更新すると、元の形式に戻ります。ただし、この機能は、迅速なテストとトラブルシューティングに非常に役立ちます。

最後に、組み込みデバッガーは、舞台裏でスローされているエラーメッセージを確認するために使用できるより高度なツールです。アクセスするには、[インスペクター]ウィンドウの上部にある[コンソール]をクリックします。

InspectElementデバッグコンソール。

ソースやネットワークアクティビティなどを表示するために利用できる他のタブもあります。完全なリストにアクセスするには、インスペクターの上部にある二重矢印アイコンをクリックします。

3.テキストを編集して変更をプレビューします

Inspect Elementの最適な使用法の1つは、ページのテキスト、フォント、または色の変更をすばやくプレビューすることです。このようにして、WordPressダッシュボードにログインしなくても、アイデアがどのように見えるかを正確に確認できます。

要素を編集するには、要素を右クリックして[検査]を選択します。これにより、その要素のコードにフォーカスがあるツールが開きます。すでに要素の検査を開いている場合は、プレビューペインの項目をクリックして、関連するコードを強調表示することもできます。

次に、コードをダブルクリックして編集可能にします。たとえば、ここでブログのタイトルを変更しました。

GoogleChromeの要素の検査ツールでテキストを変更します。

色を変えることもできます。要素を選択し、[スタイル]ペインをスクロールして、関連するセクションを見つけるだけです。色の四角をクリックして、カラーピッカーを表示できます。

要素の検査ツールのカラーピッカー。

使用したい色がわかっている場合は、色の16進コードを直接編集することもできます。

4.画像の変更をプレビューする

Inspect Elementを使用すると、画像の変更を簡単にプレビューすることもできます。これは、さまざまな画像サイズを試すための優れた方法でもあります。

プレビューペインで変更する画像を選択し、HTMLペインでそのURLをダブルクリックするだけです。

[要素の検査]ペインの画像ソースコード。

次に、別の画像のURLを貼り付けてテストできます。画像がWordPressメディアライブラリにある場合は、添付ファイルの詳細でURLをすばやく見つけることができます。

WordPressメディアライブラリで画像のURLを特定します。

URLをクリップボードにコピーするための便利なボタンもあります。繰り返しになりますが、インスペクターで行った変更は一時的なものであり、表示されるだけなので、自由に試してみてください。

5.デバイスエミュレーションを使用してサイトをテストする

最後に、Inspect Elementのもう1つの便利な機能は、さまざまな画面サイズや特定のデバイスをエミュレートする機能です。これにより、サイトの応答性をテストし、さまざまなモバイルフォームファクターでどのように表示されるかを正確に確認できます。

インスペクターを開いた状態で、積み重ねられた電話とタブレットのようなアイコンをクリックします。

InspectElementデバイスエミュレーターをオンにします。

これにより、デバイスのエミュレーションが可能になります。インスペクターを開くと、デフォルトで有効になっている場合があることに注意してください。ページの周りのハンドルを使用してページのプレビューのサイズを変更するか、プレビューペインの上部にあるドロップダウンをクリックして、さまざまなデバイスを選択します。

要素の検査ツールのデバイス選択メニュー。

プレビューペインの上部にある[回転]アイコンをクリックして、特定のアスペクト比を入力したり、モバイルデバイスを回転させたときにページがどのように表示されるかを確認したりすることもできます。場所やタッチなどのさまざまなセンサーをエミュレートするには、インスペクターペインの3ドットメニューをクリックし、[その他のツール]> [センサー]を選択します。

結論

あなたがウェブ開発に不慣れであろうとベテランの専門家であろうと、InspectElementツールは間違いなくあなたの武器にあるべき強力なユーティリティです。アクセスが簡単で、ほぼ世界中で利用でき、さまざまな操作をすばやく簡単に行うことができます。

この記事では、Chrome、Firefox、SafariでInspectElementにアクセスする方法を示しました。また、CSSクラスの検索、Webサイトのトラブルシューティング、テキストと画像の一時的な変更、モバイルデバイスのエミュレートに使用する方法も示しました。このツールキットを使用すると、InspectElementをワークフローの一部にするために必要なすべてが揃っています。

Inspect Elementの使用について質問がありますか？ 以下のコメントセクションでお知らせください！

Kinjugraphics /shutterstock.com経由の注目の画像。