Mac、Windows、iPhone、および iPad で要素を検査する方法

開発者と UI デザイナーは、Inspect Element 機能を使用して、ソース コードを変更せずに Web サイトをオンラインで変更します。しかし、Web 開発コースを受講せずに要素を検査するにはどうすればよいでしょうか?

Inspect Element は、一般的な Web ブラウザーですぐに使用できる便利な開発者ツールです。Web サイトの閲覧中に数回クリックするだけでツールをデプロイする方法を知っていれば十分です。

ウェブサイトのレイアウトを変更したり、テキストのないスクリーンショットを撮ったり、フォントを変更したり、数字を変更したりするなど、多くの手品を行うことができます.

要素を簡単に検査する方法については、以下の簡潔なステップバイステップ ガイドを参照してください。

インスペクト要素とは？

Inspect Element は、ほとんどの Web ブラウザーで使用できる Web 開発ツールです。これを使用して、アクセスしている Web サイトのフロントエンド ソース コードを編集できます。

行った変更は、Web ブラウザー内のサンドボックス内で行われます。したがって、実際の Web サイトに変更を加えることはありません。また、ページを更新すると、表面的な変更は消えます。

これを使用するいくつかの創造的な方法を次に示します。

• ウェブサイトからスクリーンショットを撮る必要があり、画像のテキストが気になります。これらのテキストを削除するには、要素の検査ツールを使用します。
• ニューヨーク タイムズやワシントン ポストに自分の名前を掲載して友達にいたずらしたいとします。Inspect Element はこれを行うための最良の方法です。
• Inspect Element ツールを使用してリアルタイムで適用することにより、Web サイトのデバッグ コードをテストします。動作する場合は、バックエンドのソース コードを変更できます。
• デジタル マーケティング担当者は、この強力な Web 開発ツールを使用して、競合他社のキーワード、SEO タイトル、メタ タグなどを明らかにすることができます。

Windows で要素を検査する方法

Windows で要素の検査ツールを使用するのは、驚くほど簡単です。Windows でさまざまな Web ブラウザーを使用して要素を検査するための段階的なガイドを以下に示します。

Google Chrome 検査ツール

Windows Chrome ブラウザで要素を検査する方法

• Google Chromeを使用している場合は、Web サイトの任意の場所を右クリックします。
• 右クリックのコンテキスト メニューが表示されます。
• 下部にInspectが表示されます。
• [検査]をクリックして、右側のパネルに HTML コードと CSS コードを表示します。

右クリックせずに Chrome で要素の検査を開くにはどうすればよいですか?

Google Chrome for Windows で Inspect Element ツールを開くための便利なショートカットがいくつかあります。これらのホットキーは次のとおりです。

• Ctrl + Shift + C
• ファンクションキーF12

上記のホットキーは、Windows 用の Mozilla ブラウザでも機能します。

Mozilla インスペクタ ツール

Windows Mozilla ブラウザで要素を検査する方法

Mozilla ブラウザーでは、プロセスは Google Chrome と同じです。ただし、Inspectorウィンドウは、Google Chrome のようにブラウザの右側ではなく下部に表示されます。

Microsoft Edge 検査ツール

Windows Edge ブラウザーで要素を検査する方法

驚いたことに、Microsoft Edge の Inspect Element は Google Chrome ブラウザーと同じように機能します。検査ツールは、右クリックで使用できます。また、HTML および CSS コードは、Google Chrome と同様に右側に表示されます。

Mac で要素を検査する方法

Apple の Mac コンピュータで Google Chrome、Mozilla Firefox、または Microsoft Edge を使用していますか? はいの場合は、上記の Windows セクションで説明した手順に従って、Inspect Element ツールをデプロイできます。

ただし、デフォルトの macOS Web ブラウザーである Safari を使用している場合、Inspect Element ツールを使用するのは難しいゲームです。デフォルトでは、Safari は Mac の Inspect Element を表示しません。必要な作業は次のとおりです。

Mac で Inspect Element を開く方法

まず、Mac の Safari で開発者ツールを有効にする必要があります。方法は次のとおりです。

• Safariブラウザを実行します。
• Web 要素を検査する Web サイトにアクセスします。
• Safari ブラウザーの上部のメニュー バーから[Safari]を選択します。
• 表示されるコンテキスト メニューから[基本設定]をクリックします。
• [プリファレンス] 画面で、[詳細設定]を選択します。
• 詳細設定画面の下部にある[開発]メニューを表示するにチェックマークを付けます。

Mac 版 Safari で開発者ツールが正常に有効になりました。Inspect Element を使用するには、次の手順に従います。

• テキストや画像などの Web サイトの要素を右クリックします。
• コンテキスト メニューが表示されます。下部にInspect Element が表示されます。
• それをクリックして、Web サイトの下にあるデバッグ セクションを開き、HTML およびCSSコードを表示します。

What Are the Keys for Inspect Element?

Mac で Inspect Element のショートカットを探しているかもしれません。次のものを使用できます。

• Command + Shift + C
• Controlキーを押してから、任意の要素を選択します。
• トラックパッドを 2 本の指でクリックする

Chromebook で要素を検査する方法

Chromebook は Google Chrome をデフォルトのブラウザとして使用します。したがって、任意の Web サイトを開いた後、右クリックするだけで、次のコンテキスト メニューで [要素の検査] オプションを見つけることができます。

職場や学校で Chromebook を使用している場合、次の質問をすることがあります。

Why Can’t I Inspect on My School Chromebook?

ほとんどの学校や企業の管理者は、仕事や勉強のために提供する Chromebook の高度な機能を無効にしています。開発者ツールは高度な機能であるため、学校や職場の Chromebook に Inspect Element ツールが表示されない可能性があります。

iPad/iPhone で要素を検査する方法

残念ながら、Mac を使用していない iPhone または iPad では、Inspect Element ツールを使用できません。

iOS および iPadOS には、Safari アプリ用の Web Inspector があります。ただし、Safari 用の開発者ツールを既にアクティブ化している Mac にモバイル デバイスを接続する場合にのみ機能します。以下は、試すことができる手順です。

• iPad/iPhone設定アプリを開きます。
• 左側のナビゲーション ペインで[Safari]をクリックします。

iPad または iPhone で Safari 設定を開く

• 次に、右側を下にスクロールして[Advanced]を見つけて選択します。

iPad および iPhone での Web インスペクターのアクティブ化

• Web Inspectorのトグルを有効にします。
• 次に、 USBを使用してモバイル デバイスを Mac に接続します。
• Mac で iPhone/iPad を認証します。
• モバイル デバイスの Safari で任意の Web サイトを開きます。
• 次に、Mac で Safari を実行し、上部のメニュー バーで[開発]を選択します。
• 表示されるコンテキスト メニューで、モバイル デバイスの名前を探します。
• モバイル デバイスにカーソルを合わせると、開いているすべての Web サイトが表示されます。
• ここで、任意の Web サイトを選択して、Mac の Safari ブラウザーで HTML および CSS ソース コードを表示します。

結論

要素の検査ツールを使用して一時的な Web ページを編集する方法をすべて調べました。また、Mac、Windows、Chromebook、iPad、iPhone などのさまざまなデバイスの要素を検査する方法も学びました。

次回、趣味や専門的なニーズのために Web ページを変更する必要がある場合は、これらの方法を試してみてください。他の場所で説明されている他の複雑な方法よりも、これらの簡単な手順を気に入っていただけるはずです。

上記の手順が役に立った場合、難しいと思われる方法、または要素の検査ツールに関する秘密のヒントがあれば、下にコメントを残すことを忘れないでください。

印刷されたリファレンスとして Web ページが必要ですか? 今すぐWeb ページを PDF としてすばやく保存する方法を学びましょう!