すべてのWebページのHTMLとCSSを参照してください。
ウェブサイトはコード行で構築されていますが、結果として画像、ビデオ、フォントなどの特定のページが作成されます。 これらの要素の1つを変更したり、要素の構成要素を確認するには、要素を制御する特定のコード行を見つけなければなりません。 これは要素検査ツールで行うことができます。
ほとんどのWebブラウザでは、インスペクションツールをダウンロードしたり、アドオンをインストールしたりすることはありません。 代わりに、ページ要素を右クリックし、「 検査」または「要素を検査 」を選択します。 ただし、ブラウザによってプロセスが多少異なる場合があります。
Chromeで要素を検査する
Chromeの最新バージョンでは、いくつかの方法でページを閲覧できます。これらのページには、Chrome DevToolsが組み込まれています。
- ページ上の何か（または空白の部分）を右クリックして、 Inspectを選択します。
- Ctrl + Shift + Iのキーボードショートカットを入力してください
- Chromeメニューを使用して、 [その他のツール]> [デベロッパーツール ]オプションにアクセスします
Chrome DevToolsを使用すると、HTML行を簡単にコピーまたは編集したり、要素を非表示にしたり削除したりすることができます（ページが読み込まれるまで）。
DevToolsがページの横に開いたら、ページの位置を変更したり、ページからポップアップしたり、すべてのページのファイルを検索したり、特定の検査のためにページから要素を選択したり、ファイルやURLをコピーしたり、の設定の。
Firefoxで要素を検査する
Chromeのように、FirefoxにはInspectorというツールを開く方法がいくつかあります。
- ページ上の空白部分を右クリックするか、要素を選択し、要素の検査を選択します。
- キーボードでCtrl + Shift + TまたはCtrl + Shift + Iを入力します。
- Firefoxメニューから、「 開発者」 >「 インスペクタ」をクリックします。
- [ ツール ]メニューの[ Web開発 ] > [インスペクタ ]をクリックします。
Firefoxのさまざまな要素にマウスを移動すると、Inspectorツールは要素のソースコード情報を自動的に見つけ出します。 要素をクリックすると、「オンザフライ検索」が停止し、インスペクタウィンドウから要素を調べることができます。
要素を右クリックして、サポートされているすべてのコントロールを見つけます。 HTMLとしてページを編集したり、内部または外部のHTMLコードをコピーまたはペーストしたり、DOMプロパティを表示したり、スクリーンショットを作成したり、ノードを削除したり、新しい属性を簡単に適用したり、ページのCSSをすべて表示したりできます。
Operaの要素を検査する
Operaは要素を検査することもできますが、これはChromeの機能と同じDOM Inspectorツールです。 ここに到達する方法は次のとおりです。
- キーボードショートカットCtrl + Shift + Iを使用する
- [メニュー]> [その他のツール]> [開発者の表示]メニューに移動し 、 メニュー>開発者>開発者ツールを使用してメニューを開きます。
- ページ上の任意の要素の右クリックメニューから、「要素の検査 」を選択します。
Internet Explorerで要素を検査する
開発ツールと同様の検査要素ツールは、Internet Explorerで利用できます。
- キーボードのF12を押す
- ツール> F12開発者メニューオプションを使用します（ [ ツール ]メニューが表示されていない場合はAlt + Xキーを押します）
- ページを右クリックし、[ 要素の検査 ]をクリックします。
IEにはこの新しいメニューの要素選択ツールがあり、ページ要素をクリックするとHTMLとCSSの詳細が表示されます。 また、 DOM Explorerタブをブラウズしている間、要素の強調表示を簡単に無効/有効にすることもできます。
上記のブラウザの他の要素インスペクタツールと同様に、Internet Explorerでは、要素の切り取り、コピー、貼り付け、HTMLの編集、属性の追加、スタイル付きの要素のコピーなどを行うことができます。