Webサイトはコード行から構築されますが、結果は画像、ビデオ、フォント、およびその他の機能を備えたページになります。 これらの要素のXNUMXつを変更したり、要素が何で構成されているかを確認するには、要素を制御するコード行を見つけます。 これを行うには、要素検査ツールを使用します。 検査ツールをダウンロードしたり、お気に入りのWebブラウザ用のアドオンをインストールしたりする必要はありません。 click the page element, then select代わりに、ページ要素を右クリックして、 検査する or 要素の検査。 ただし、このツールへのアクセス方法はブラウザによって異なります。
この記事では 右クリックします Windows PCでのマウスデバイスアクション、およびMacでのControl +クリックアクションを参照します。
GoogleChromeで要素を検査する
Google Chromeでは、ブラウザの組み込みChromeDevToolsを使用してウェブページを検査する方法がXNUMXつあります。
- ページ上または空白の領域で要素を右クリックし、[ 検査する.
- に行きます クロム メニューをクリックし、 その他のツール > 開発者ツール.
:max_bytes(150000):strip_icc()/01_Inspect_Element_Chrome-756549-14d8f0f1d8fe4f8a8996c9650875f833.jpg)
Chrome DevToolsを使用して、ハイパーテキストマークアップ言語（HTML）マークアップをコピーまたは編集し、ページが再読み込みされるまで要素を非表示または削除します。
Chrome DevToolsがページの横で開いたら、その位置を変更し、ページからポップして、ページファイルを検索し、ページから要素を選択して詳細を確認し、ファイルとURLをコピーして、設定をカスタマイズします。
MozillaFirefoxで要素を検査する
Mozilla Firefoxには、Inspectorと呼ばれる検査ツールを開くXNUMXつの方法があります。
- Webページの要素を右クリックして、[ 要素の検査.
- Firefoxのメニューバーから、 BHツール > ウェブ開発者 > 検査官。
:max_bytes(150000):strip_icc()/02_Inspect_Element_Firefox-756549-bbfd425841fe472492a57401403f19af.jpg)
Firefoxで要素の上にポインタを移動すると、Inspectorは要素のソースコード情報を自動的に検出します。 the-要素を選択すると、オンザフライ検索が停止し、[インスペクター]ウィンドウから要素を調べることができます。
Right-要素を右クリックして、サポートされているコントロールを見つけます。 コントロールを使用して、ページをHTMLマークアップとして編集し、内部または外部のHTMLマークアップをコピーまたは貼り付け、ドキュメントオブジェクトモデル（DOM）プロパティを表示し、ノードのスクリーンショットを撮るか削除し、新しい属性を適用します。カスケードスタイルシート（CSS）を参照してください。 、 もっと。
Safariで要素を検査する
SafariでWeb要素を調べる方法はいくつかあります。
- Webページ上の任意のアイテムまたはスペースを右クリックして、[ 要素の検査.
- に行きます 開発する メニューをクリックし、 Webインスペクタを表示.
:max_bytes(150000):strip_icc()/03_Inspect_Element_Safari-756549-ba1a5ebbc9b646f7b22c75365ed67f5a.jpg)
[開発]メニューが表示されない場合は、 サファリ メニューを選択し 環境設定。 上の 高度な タブを選択 メニューバーに[現像]メニューを表示する チェックボックスをオンにします。
Webページ上の個々の要素を選択して、そのセクション専用のマークアップを表示します。
InternetExplorerで要素を検査する
開発ツールを有効にしてアクセスする同様の要素検査ツールは、InternetExplorerで使用できます。 To enable Developer Tools, press開発ツールを有効にするには、を押します F12。 Or, go to theまたは、 BHツール メニューを選択し 開発者ツール.
[ツール]メニューを表示するには、を押します Alt + X.
Webページの要素を調べるには、ページを右クリックして、[ 要素の検査。 Internet Explorerの要素選択ツールから任意のページ要素を選択して、HTMLまたはCSSマークアップを表示します。 DOMエクスプローラーを参照しているときに、要素の強調表示を無効または有効にすることもできます。
:max_bytes(150000):strip_icc()/04_Inspect_Element_Internet_Explorer-756549-4bbad38d90374e288db153b0d747a451.jpg)
他の要素インスペクターツールと同様に、Internet Explorerを使用して、要素の切り取り、コピー、貼り付け、HTMLマークアップの編集、属性の追加、スタイルが添付された要素のコピーなどを行います。
MicrosoftEdgeの要素を検査する
Microsoft Edgeで要素を検査する前に、検査を有効にする必要があります。 There are two ways to enable inspection:検査を有効にする方法はXNUMXつあります。
- アドレスバーに移動して、 about：フラグ。 In the dialog box, select theダイアログボックスで、 コンテキストメニューに[ソースの表示]と[要素の検査]を表示する チェックボックスをオンにします。
- プレス
F12、その後、選択し DOMエクスプローラー.
要素を検査するには、Webページ上の要素を右クリックして、[ 要素の検査.
:max_bytes(150000):strip_icc()/05_Inspect_Element_Microsoft_Edge-756549-7072c664271f47668a397b7c220c5435.jpg)