開発者と 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 検査ツール
- 使用時 グーグルクローム, 右クリック ウェブサイトのどこでも。
- 右クリックのコンテキスト メニューが表示されます。
- 下部に、 検査する.
- クリック 検査する HTML および CSS コードを 右側パネル.
右クリックせずに Chrome で要素の検査を開くにはどうすればよいですか?
Google Chrome for Windows で Inspect Element ツールを開くための便利なショートカットがいくつかあります。 これらのホットキーは次のとおりです。
- コントロール + シフト + ハ
- ファンクションキー F12
上記のホットキーは、Windows 用の Mozilla ブラウザでも機能します。
Mozilla インスペクタ ツール
Mozilla ブラウザーでは、プロセスは Google Chrome と同じです。 しかし 検査官 ウィンドウは、Google Chrome のようにブラウザの右側ではなく下部に表示されます。
Microsoft 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 で開発者ツールを有効にする必要があります。 方法は次のとおりです。
- 走る の サファリブラウザ.
- Web 要素を検査する Web サイトにアクセスします。
- 選択する サファリ Safari ブラウザのトップ メニュー バーから
- クリック 環境設定 開いたコンテキストメニューから。
- 上で 設定画面、 選択する 高度.
- チェックマークを付ける 開発を表示 一番下のメニュー 詳細設定 画面。
Mac 版 Safari で開発者ツールを正常に有効にしました。 Inspect Element を使用するには、次の手順に従います。
- テキストや画像など、ウェブサイトのあらゆる要素で、 右クリック.
- コンテキスト メニューが表示されます。 下部に、 要素を検査.
- それをクリックして、HTML を表示する Web サイトの下のデバッグ セクションを開き、 CSS コード。
要素を検査するためのキーは何ですか?
Mac で Inspect Element のショートカットを探しているかもしれません。 次のものを使用できます。
- 指図 + シフト + ハ
- を押します。 コントロール キーを押してから、任意の要素を選択します。
- トラックパッドを 2 本の指でクリックする
Chromebook で要素を検査する方法
Chromebook は Google Chrome をデフォルトのブラウザとして使用します。 したがって、任意の Web サイトを開いた後、右クリックするだけで、次のコンテキスト メニューで [要素の検査] オプションを見つけることができます。
職場や学校で Chromebook を使用している場合、次の質問をすることがあります。
学校の Chromebook で検査できないのはなぜですか?
ほとんどの学校や企業の管理者は、仕事や勉強のために提供する Chromebook の高度な機能を無効にしています。 開発者ツールは高度な機能であるため、学校や職場の Chromebook に Inspect Element ツールが表示されない可能性があります。
iPad/iPhone で要素を検査する方法
残念ながら、Mac を使用していない iPhone や iPad で要素の検査ツールを使用することはできません。
iOS および iPadOS には、Safari アプリ用の Web Inspector があります。 ただし、Safari の開発者ツールを既に有効にしている Mac にモバイル デバイスを接続する場合にのみ機能します。 以下は、試すことができる手順です。
- iPad/iPhoneを開く 設定 アプリ。
- クリック サファリ 左側のナビゲーション ペインにあります。
- 次に、右側を下にスクロールして見つけて選択します 高度.
- のトグルを有効にします Web インスペクタ.
- 次に、モバイル デバイスを Mac に接続します。 USB.
- Mac で iPhone/iPad を認証します。
- モバイル デバイスの Safari で任意の Web サイトを開きます。
- ここで、Mac で Safari を実行し、 発展 上部のメニュー バーにあります。
- 表示されるコンテキスト メニューで、モバイル デバイスの名前を探します。
- モバイル デバイスにカーソルを合わせると、開いているすべての Web サイトが表示されます。
- 次に、任意の Web サイトを選択して、Mac の Safari ブラウザーで HTML および CSS ソース コードを表示します。
結論
要素の検査ツールを使用して一時的な Web ページを編集する方法をすべて調べました。 また、Mac、Windows、Chromebook、iPad、iPhone などのさまざまなデバイスの要素を検査する方法も学びました。
次回、趣味や専門的なニーズのために Web ページを変更する必要がある場合は、これらの方法を試してみてください。 他の場所で説明されている他の複雑な方法よりも、これらの簡単な手順が気に入るはずです.
上記の手順が役に立った場合、難しいと思われる方法、または要素の検査ツールに関する秘密のヒントがあれば、下にコメントを残すことを忘れないでください。
印刷されたリファレンスとして Web ページが必要ですか? やり方を学ぶ Web ページを PDF としてすばやく保存する 今！