Chrome、Safari、Firefox で要素を検査するにはどうすればよいですか?

多くの特徴や機能を備えた Web ページがなぜこれほど美しく見えるのか疑問に思ったことはありますか?魅力的で素晴らしい Web サイトを作成するには、すべてのコードをどのように組み合わせればよいでしょうか?

ブラウザの検査ツールを使用して Web サイトの要素を検査するだけで、すべての秘密を簡単に明らかにできます。

この組み込みツールを使用すると、Web サイトのレイヤーを簡単に剥がして、コードが各要素にどのように接続されているかを確認して、完全に機能する Web サイトを作成できます。これにより、フロントエンドで物事がどのように機能するかについてのアイデアが得られ、プロジェクトでそれを再現するきっかけにもなります。

この投稿では、一般的なブラウザーで Web サイトの要素を検査する方法と、それらを直接使用する短い方法を紹介します。

任意のブラウザで Web サイトの要素を検査するにはどうすればよいですか?

これらの要素の検査ショートカットに従うだけで、どのブラウザーでも Web サイトの要素を簡単に検査できます。

1. Google Chrome ブラウザの Elements ショートカットを検査する

キーボードのCtrl+Shift+Iキーの組み合わせを押すだけで、開発ツールまたは要素の検査ツールを起動して、Web サイトの要素にアクセスできます。

ただし、別のショートカットで簡単な方法を試すこともできます。それは、Web サイトの空白領域または任意の要素を右クリックし、「検査」を選択することです。その後、「要素」タブを使用して Web サイト全体の構造を表示したり、「コンソール」タブを使用してあらゆる種類の警告やエラーを確認したりできます。

ただし、開発ツールにアクセスするための 3 番目の、しかし長い方法は、Chrome ブラウザの右上隅にある 3 つの縦の点またはハンバーガー メニュー (3 つの点が重なったアイコン) をクリックし、次に [その他のツール] をクリックして、開発者ツール。

2. Firefox ブラウザの Elements ショートカットを検査する

Firefox ブラウザ ユーザーの場合は、ショートカット キーCtrl+Shift+C の組み合わせを試して、開発ツールを利用してWeb サイト要素を昆虫化することができます。または、Web サイトの空白領域または任意の要素を右クリックして、「検査」を選択することもできます。

3. Opera ブラウザの「Inspect Elements」ショートカット

Opera ユーザーの場合は、キーボードのCtrl+Shift+Iを押して開発ツールに直接アクセスし、Web サイトの要素を検査します。同様に、他のブラウザと同様に、Web サイトの空白領域または任意の要素を直接右クリックして、「検査」を選択することもできます。

4.Edge Browser の要素のショートカットを検査する

Edge が使用しているデフォルトのブラウザの場合。キーボードのF12 を押すと開発ツールが開きます。または、Web サイトの空白領域または任意の要素を右クリックし、「検査」を選択します。

5. Safari ブラウザで要素を検査する

Safari ブラウザには、Web サイトの要素を検査するためのショートカット方法はありませんが、以下の手順に従う必要があります。

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

• 上部メニューの「Safari」をクリックし、「設定」を選択します。

• 「詳細」タブに移動し、「メニューバーに開発メニューを表示する」チェックボックスをオンにします。

• 「環境設定」ウィンドウを閉じます。

これで、Web ページ上の任意の場所を右クリックし、「要素の検査」を選択して要素ペインを開くことができます。

ウィンドウの下部にペインがすぐに開きますが、見栄えが悪く、コードが見にくくなる可能性があります。

便宜上、ペインの左上隅 (「X」の隣) にあるアイコンをクリックしてウィンドウを横に移動し、「ウィンドウの右側にドッキング」または「ウィンドウの左側にドッキング」を選択します。 」 (すべてのブラウザに適用されます)

また、必要に応じて、ペインをウィンドウから分離することもできます。ペインのサイズを変更するには、カーソルをペインの端に移動して二重矢印に変わり、クリックしてドラッグしてサイズを変更します。

ここで、ペインを開いた後に何をすればよいのか、Web サイトについて確認できる主な要素は何なのかと疑問に思われるかもしれません。

そのためには、以下のセクションをチェックしてください。

Web サイト要素の検査開発ツールでできること

Elements ツールに正常にアクセスしてペインを開いたので、要件に応じて Web サイトを簡単に操作し、カスタマイズし、編集するのに役立つさまざまな組み込みツールが表示されます。

便宜上、デモンストレーション目的で Chrome を使用しますが、すべての機能、設定、オプション、手順はすべてのブラウザーで同じです。

1. Inspect Element 検索ツールを使用して、サイト上のあらゆるものを検索します

ソース コード全体から何かを検索するのは大変な作業であり、ソース コードは複雑で、場合によっては巨大です。このため、DevTools には検索ツールが組み込まれています。

これを利用するには、デフォルトの要素ペインを開き、Ctrl + F または Command + F を押してソース コードを検索します。 [検索] タブが DevTools ペインの下部にすぐに表示されます。

検索フィールドでは、CSS、JavaScript ファイル、ソース コード内の特定の要素など、あらゆるものを検索できます。

たとえば、検索フィールドに「meta name」と入力して Enter キーを押すと、コード内で「meta name」が出現するすべての箇所が検索されて表示されます。これは、Web ページのメタ、SEO キーワード、インデックス作成ステータスを確認するのに役立ちます。

同様に、Web デザイナーの場合は、検索フィールドに #98fb98db などの色の 16 進コードを入力して Enter キーを押すと、色を検索できます。これにより、サイトの CSS ファイルと HTML ファイル内のその色のすべてのインスタンスが表示されます。

コミュニケーションと修正:

• 検索ツールは、どこに間違いがあるのか​​、どこを変更する必要があるのか​​を正確に示すことで、開発者とのコミュニケーションに役立ちます。
• 迅速に修正できるよう、問題のある行番号を開発者に伝えてください。
• Chrome のデベロッパー ツールの中核部分である Elements を使用して、Web ページを自分で変更することもできます。

2. Web ページの個別/特定の要素を選択して検査します

ペインの左上隅にあるカーソル アイコンを直接クリックして、ページの特定の要素の HTML コードを表示することもできます。

これで、任意のページ要素をクリックして、検査パネルにそのソース コードを表示できるようになります。

3. 要素を含むものを編集または変更する

Web サイトのデザインを試したり遊んだりするのが好きで、すぐにアイデアを実現したい場合は、要素の検査ツールが役立ちます。

このツールを使用すると、CSS および HTML ファイルを変更または編集することで Web サイトの外観を一時的に変更し、その結果をリアルタイムで確認できます。

ただし、変更は永続的なものではありません。ページをリロードすると、変更内容は消えます。こうすることで、Web サイトのソース コードに干渉することなく、好きなだけ実験することができます。

ある時点で変更が魅力的だと感じた場合は、後で使用できるよう、変更をコピーして別の場所に保存することができます。

参考までにいくつかの例を見てみましょう。

でもその前に、遊び場の準備をしてきれいにしましょう。そのためには、[開発者ツール] ペインの[要素]タブをクリックします。さらにスペースを確保するには、 Escキーを押して検索ボックスを閉じます。

これで、完全なソース コードが画面に表示される準備が整いました。

• 「開発者」ペインの左上隅で、四角形の上にあるマウスのアイコンをクリックします。
• ページ上の要素を選択して変更します。

Web ページ上のテキストを変更する:

• マウスカーソル/四角形のアイコンをクリックします。
• ページ上の任意のテキストをクリックします。
• [開発者ツール] ペインで、強調表示されたテキストをダブルクリックして編集可能にします。

• 下の図に示すように、「プレミアム」ではなく「最速」などの新しいテキストを入力し、 Enter を押します。
• テキストの変更は一時的なもので、ページを更新すると元に戻ります。

要素の編集:

• [開発者] ウィンドウを閉じ、Web ページの任意の部分を強調表示して右クリックし、 [検査]を選択します。
• [開発者ツール] ペインでは、選択した文が強調表示されます。

要素の色とフォント サイズを変更する:

• [開発者ツール] ペインで、 [スタイル]タブに移動します。

• 「font-size」フィールドをクリックして、値を 22px に変更します。

• 「色」までスクロールし、#ff0000 に変更します。

• 「font-family」を「Arial」に調整します。

変更を加える前は、フォントは次のように見えていました。

変更後は次のようになります。

要素の状態を変更する:

訪問者がボタンやリンクの上にマウスを移動したり、ボタンやリンクを操作したりするときに Web サイトをより視覚的に魅力的なものにしたい場合は、要素の状態オプションを使用できます。

• マウス カーソル/ボックスのアイコンをクリックし、要素を選択します。
• [開発者ツール] ペインでコードを右クリックし、 [Force state]の上にマウスを置き、 [:active] をクリックします。
• 繰り返してクリックします:hover:

• 新しいホバー色を確認するには、「background-color」の値を #003b59 に変更します。

背景画像の変更:

• 画像アドレスのリンク、つまり (画像がホストされている場所) をコピーするだけです。

• [AI を使用してオートメーションを強化する] ボタンの [要素の検査] を開きます。
• 「background-color」コードを見つけて、その色をurl(“image-link”)に置き換えます。

さらに変更を加えて実験してください:

• テキストを変更したり、画像を交換したり、色やスタイルを変更したりできます。
• さまざまな変更を試して、サイトがどのように見えるかを確認してください。

4. 任意の画面サイズまたはデバイスで Web サイトをテストする

最近では、Google さえも、Web サイトが応答性が高く、どのデバイスや画面サイズでも簡単にアクセスできるようにすることを強く推奨しています。インターネット ユーザーの大多数は、ラップトップやデスクトップではなくスマートフォンで Web サイトにアクセスすることを好みます。

したがって、Web 管理者にとって、Web サイトを構築する際に、Web サイトを応答性が高く、モバイル対応にすることが重要になっています。

ただし、Web 開発者やデザイナーにとって、あらゆる種類のデバイスや画面サイズで Web サイトを一度にチェックすることは現実的ではないかもしれません。この問題を解決するために、エミュレーション ツールを使用すると、さまざまなデバイスを使用しているさまざまなユーザーに Web サイトがどのように表示されるかを確認して確認できます。

これは、さまざまなデバイスでの実際のテストをスキップする必要があるという意味ではありませんが、良いアイデアを得ることができます。

次のように実行できます。

• [開発者ツール] ウィンドウで、左上隅にある小さな電話アイコンをクリックします。
• ページが電話スタイルのビューに変わり、上部にサイズを変更するためのメニューが表示されます。
• 小さなブラウザのサイズを変更して、タブレット、携帯電話、または小さな画面などのさまざまなデバイスでページがどのように表示されるかを確認します。

• 上部のメニューをクリックして、Surface Duo や iPhone 12 Pro などのデフォルトのデバイス サイズを選択します。
• Web ページは、選択したデバイスのサイズに合わせて調整されます。寸法の横にあるパーセンテージのドロップダウンを使用して拡大します。
• デバイスのプリセットで「レスポンシブ」を選択し、Web ページの右端をドラッグしてビューを調整します。
• トップメニューの最後にある回転アイコンをクリックして、縦向きビューと横向きビューを切り替えます。
• さまざまなデバイスを試して、Web ページと画面の解像度がどのように変化するかを確認してください。
• 他のすべての開発者ツールもデバイス ビューに反応します。

5. エミュレートされたモバイル ネットワーク上で Web ページのパフォーマンスをテストする

すべてのビジュアル テストとは別に、5G、4G、3G、または低速ネットワークなどのさまざまなモバイル ネットワーク上で Web サイトがどのように動作するかを確認することもできます。

これを実証するには、

• ペインの右上隅にあるハンバーガー メニューをクリックします。
• [その他のツール]にカーソルを合わせて、 [ネットワーク条件]を選択します。

ネットワークの状態:

• 高速 4G、低速 4G、オフラインなどのネットワーク条件を選択して、インターネットなしでページがどのように動作するかを確認します。

• [追加…] をクリックして、テスト速度を含めます (たとえば、ダイヤルアップ インターネットをテストする場合は 56Kbps)。
• ページを再読み込みして、低速接続での読み込みにかかる時間と、読み込み中の表示を確認します。
• これは、接続が遅い場合にサイトの読み込み時間を改善することの重要性を理解するのに役立ちます。

ユーザーエージェントの変更:

• 「ユーザーエージェント」フィールドで、 「ブラウザーのデフォルトを使用」のチェックを外します。
• 別のユーザー エージェント (Firefox、Mac など) を選択して、サイトのレンダリングが他のブラウザに対して変更されるかどうかを確認します。
• この機能を使用すると、Web がどのように動作するかを確認できます。ページの読み込みたとえ別のブラウザでのみ動作すると主張している場合でも。

結論

Dev Tools や Inspect Elements に関する詳細な情報を大量に入手した後は、お気に入りの Web サイトについて、パブリック ドメインで入手可能な情報が大量にあることに気づいたはずです。

わずか数回クリックするだけで、元のファイルをチェックすることなく、Web サイトを完全に剥がして、視覚的に素晴らしい特徴や機能の秘密をすべて明らかにすることができます。

使用されている CSS スタイル、複雑な機能の背後にあるロジック、コード レベルでの検索エンジンの最適化がどのように行われるかなどを分析して表示できるようになりました。

ラーフル

Rahul Kumar は Web 愛好家であり、WordPress と Web ホスティングを専門とするコンテンツ ストラテジストです。長年の経験と業界のトレンドを常に最新の状態に保つことに注力し、トラフィックを促進し、エンゲージメントを高め、コンバージョンを増やす効果的なオンライン戦略を作成しています。ラーフル氏は、細部へのこだわりと魅力的なコンテンツを作成する能力により、オンラインでの存在感を向上させようとしているあらゆるブランドにとって貴重な人材となっています。