要素の検査の使用方法

デバイスリンク

ほとんどの人は、自由に使える開発者ツールの宝庫があり、それがお気に入りのブラウザーに隠されていることを知りません。

要素の検査の使用方法

各 Web ブラウザには、Web サイトのコーディングをチェックアウトするための開発者ツールが用意されています。しかし、平均的なインターネットユーザーにとっては無縁の存在です。結局のところ、Web サイトのコーディングを見たい人はいないでしょう?

結局のところ、Web サイトのコーディングを見ることで学べることがたくさんあります。要素の検査機能が提供するものとその使用方法については、以下をお読みください。

ほとんどのブラウザには Web サイトの要素を検査するツールがありますが、通常はすべて同じように機能します。

Google Chrome での要素の検査の使用

検査したい Web サイトを開きます。
ページ上の任意の場所を右クリックし、「検査」を選択します。

また
ツールバーの右隅にある3 つの縦の点をクリックします。
[その他のツール]に移動します。
[開発者ツール]を選択します。

また
PC ではF12キーボードショートカットキーを押します( Mac ではCMD + オプション + I )。

Microsoft Edge での要素の検査の使用

Web サイトを開きます。
ブラウザのツールバーの右上隅にある3 つの縦の点をクリックします。
下にスクロールして[その他のツール]をクリックします。
[開発者ツール]をクリックします。

また
Web サイト上の任意の場所を右クリックし、[検査]をクリックします。

また
Ctrl + Shift + Iを押します。

これら 3 つの方法のいずれを使用しても、同じ結果が得られます。

これを正しく行うと、ブラウザの下部に新しいペインが開きます。これらは開発者ツールであり、[要素] タブが含まれます。これは要素を検査するために必要なツールです。

パネルはデフォルトで画面の下部に開きますが、表示方法はいつでも変更できます。次の簡単な手順に従って、開発者ツールパネルの位置を変更します。

[開発者ツール] パネルの上隅にある3 つの水平ドットをクリックします。
ドック側 (左、下、または右) を選択するか、別のウィンドウにドッキングを解除します。

[開発者ツール] パネルフレームの端の横にカーソルを置いてドラッグすると、ワークスペースを狭めたり広げたりできます。たとえば、パネルをブラウザウィンドウの右側にドッキングすることを選択した場合は、左側の境界線にマウスを移動してみてください。矢印カーソルが表示されたら、パネルをドラッグしてサイズを変更できます。

Inspect 要素の使用 (OS 固有)

関連する手順の多くは、ブラウザーで要素を検査する方法を説明するだけでカバーされているかもしれませんが、とにかくほとんどの OS での方法を説明します。

Chromebook で要素を検査する方法

Chromebook のデフォルトのブラウザは Google なので、Chrome ブラウザの指示に従ってInspect Elementにアクセスします。ここでは、ちょっとしたおさらいコースをご紹介します。

Web サイトを開きます。
ツールバーの右上隅にある3 つの縦の点をクリックします。
[その他のツール]を選択します。
[開発者ツール]をクリックします。

右クリック方法またはF12ファンクションキーを使用して、開発者ツールにすばやくアクセスすることもできます。

Android デバイスで要素を検査する方法

Android デバイスでの Inspect Element の実行は少し異なります。Android で [要素の検査] パネルにアクセスする方法を確認してください。

F12ファンクションキーを押します。
[デバイスバーの切り替え]を選択します。
ドロップダウンメニューから Android デバイスを選択します。

特定の Android デバイスを選択すると、モバイルバージョンの Web サイトが読み込まれることがわかります。ここからは、デスクトップから Android デバイスの要素の検査機能を自由に使用できるようになります。

この方法は、Chrome ブラウザと Firefox ブラウザの両方で機能します。これらのブラウザには、開発者ツールにデバイスシミュレーションと呼ばれる機能があるためです。

iPhone デバイスでも同様に機能します。ドロップダウンメニューから適切なものを選択するだけです。

Windows で要素を検査する方法

要素の検査ツールは必ずしも OS 固有ではありませんが、ブラウザー固有です。つまり、開発者ツールは使用するブラウザの機能であり、必ずしも Windows の機能である必要はありません。ただし、どのブラウザを使用していても、[要素の検査] パネルにアクセスできます。

Windows OS を使用している場合は、Microsoft Edge ブラウザも使用する可能性があります。MS Edge で Inspect Element にアクセスする方法を確認してください。

検査したい Web サイトを開きます。
ブラウザウィンドウの隅にある 3 つの縦の点をタップします。
下にスクロールして[その他のツール]を選択します。
[開発者ツール]をクリックします。

F12ファンクションキーを使用して、Inspect Element にすばやくアクセスすることもできます。また、Web ページを右クリックして「検査」を選択することもできます。

Mac で Inspect Element を使用する方法

Mac を使用している場合、選択するブラウザはおそらく Safari です。Safari で Inspect Elements を開く方法は、Chrome や Firefox で開く場合とは少し異なります。ただし、次の手順で簡単に実行できます。

Safari ブラウザを開きます。
ヘッダータブで[Safari]をクリックし、ドロップダウンメニューから[設定]を選択します。
画面上部にある高度な歯車アイコンをクリックします。
[メニューバーに開発メニューを表示]チェックボックスをオンにします。

これらの手順を実行すると、ブラウザで要素の検査機能が有効になります。最初に要素の検査を有効にしないと、Web サイトを開いたときにオプションが表示されません。

この手順を完了したら、開いている Web ページを右クリックして「検査」を選択します。クイックキーコマンド: CMD + Option + I (検査) を使用することもできます。

iOS で要素を検査する方法

要素の検査機能を使用して、Web ページのモバイルバージョンが iPhone でどのように表示されるかを確認したいですか? いくつかの簡単な手順を実行するだけで、これ以上のことを行うことができます。ただし、要素を確認する前に、iOS デバイスのWeb Inspectorを有効にする必要があります。

[設定]に移動します。
次に、「Safari」を選択します。
一番下までスクロールし、「詳細メニュー」をタップします。
次に、トグルスイッチをタップしてWeb Inspectorをオンにします。

また、上記のセクションの手順に従って、Mac で [開発] メニューが有効になっていることを確認してください。

iOS モバイルデバイスと Mac の両方を有効にすると、Mac の上部バーに [開発] メニューが表示されます。それをクリックすると、接続されている iPhone とデバイス上でアクティブな Web ページが表示されます。Web ページを選択すると、Mac 画面上に同じページの Web インスペクターウィンドウが開きます。

ただし、これらの手順は Mac を実行している Safari でのみ機能し、Windows の Safari では機能しないことに注意してください。

ブロックされているときに要素を検査する方法

場合によっては、Web ページを検査できず、Web ページを右クリックしようとすると、検査選択がグレー表示になる場合があります。ブロックされていると思われるかもしれませんが、これを回避する方法は数多くあります。

方法 1 – Javascript をオフにする

[設定]に移動します。
JavaScriptを検索します。
JavaScriptをオフにします。

方法 2 – 開発者ツールに長距離アクセスする

マウスを右クリックして検査する代わりに、次のようにします。

ブラウザの「設定」に移動します。
[その他のツール]を選択します。
下にスクロールして[開発者ツール]をクリックします。

方法 3 – ファンクションキーを使用する

また、右クリックによる検査がブロックされている Web ページでF12ファンクションキーを使用してみることもできます。

要素の検査の使用方法

自分に合った方法を見つける前に、これらの方法をすべて試してみることが必要な場合があります。最後の手段として、 view-source: [enter full url]と入力してソースコードを表示してみることもできます。

要素の検査の使用方法

学校の Chromebook で Inspect Element を使用する方法

Chromebook が学校から発行されたものである場合、要素の検査機能を使用するには、いくつかの簡単な手順が必要です。

Web ページを右クリックまたは 2 本指でタップし、「検査」を選択します。
Ctrl + Shift + Iを押します。
view-source:[url] メソッド ( view-source:https://www.wikipedia.comなど) を使用してみてください。

ただし、一部の学校や組織ではこの機能がブロックされているため、うまく機能しない場合は、組織または学校の管理者に連絡する必要がある場合があります。

要素の検査を使用して答えを見つける方法

Inspect Element を使用すると、次のようなさまざまな問題に対する答えを見つけることができます。

モバイルデバイスでのサイトデザインのプレビュー。
競合他社が使用しているキーワードを調べます。
スピードテスト。
Web ページ上のテキストを変更する。
開発者に必要なものを示すための簡単な例を見つけてください。

[要素の検査] パネルを起動すると、Web サイトのすべてのコーディングが表示されます。これには、組み込まれている JavaScript、CSS、HTML コーディングがすべて含まれます。コードを変更できる点を除けば、Web ページのソースコーディングを見るのと似ています。さらに、実装された変更をリアルタイムで確認できます。

このツールは、マーケティング担当者、デザイナー、開発者にとって、デザインの変更を最終決定する前に確認できる非常に貴重なツールです。ただし、Inspect Element を使用してコーディングを変更しても、それが永久に続くわけではありません。ページをリロードすると、デフォルトの状態に戻ります。

追加のよくある質問

上記を読んでも Inspect Element の専門家でない場合は、ここにさらに詳しい回答があります。

要素の検査コマンドを使用して答えを見つけるにはどうすればよいですか?

要素の検査機能を使用して答えを見つける唯一の方法は、送信後に Web サイトが即座に答えを明らかにする場合です。この場合、答えはコーディングの中にあります。

それ以外の場合は、要素の検査機能を使用するときに、クイズまたはテストのコーディングと、送信した回答を表示するだけになります。

検査要素は違法ですか?

いいえ、要素の検査ツールは違法ではありません。Web 開発者向けに設計されています。Web サイトのソースコードを表示することは違法ではありません。問題となるのは、収集した情報を悪用の試みなどの不正な目的に使用する場合のみです。

ブラウザの要素の検査を無効にすることはできますか?

簡単に言うと「ノー」です。

ブラウザーで要素の検査を無効にすることはできませんが、ユーザーが Web ページでの右クリックなどの特定のアクションを実行できないようにするパラメーターを設定することはできます。特定のイベントを無効にする適切なスクリプトを設定するためのチュートリアルがオンラインに多数あります。ただし、実際には要素の検査機能全体を無効にすることはできません。

Web ページの内部を理解する

Web ページの要素の検査機能をチェックすることは、開発者でなくても、おそらく必要性を知らなかった開発者ツールでしょう。ウェブサイトをよりスムーズに実行できるデザインおよびマーケティングアプリケーションがたくさんあります。そしてもしかしたら、競合他社よりも優位に立つことができるかもしれません。

要素の検査は何に使用しますか? 以下のコメントセクションでそれについて教えてください。