Mac 上の Safari、Chrome、Firefox で要素を検査する方法
![Mac 上の Safari、Chrome、Firefox で要素を検査する方法](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/feature-image-how-to-inspect-element-on-a-mac-640x375.webp)
要素を検査することは、誰もが Web サイトの構築方法を理解し、必要な調整を行うことを可能にする重要なスキルです。Web 開発者でなくても、Mac 上で最新のブラウザを使用して数回クリックするだけで要素を検査できます。幸いなことに、要素の検査は最新のすべてのブラウザーに組み込まれているツールなので、それを行うために特別なソフトウェアは必要ありません。このチュートリアルでは、Mac 上の Safari、Chrome、Firefox で要素を検査する方法を段階的に説明します。
要素の検査とは何ですか?
要素の検査は、最新のすべての Web ブラウザで利用できる強力な機能で、Web ページの構造、レイアウト、スタイルなど、Web ページについて詳しく知ることができます。開発者やオンライン コンテンツ デザイナーは、 Web プロジェクトのデバッグ、実験、トラブルシューティングにこれらのツールをよく使用します。Web サイトの要素を簡単に選択でき、検査ツールは色、フォント、サイズ、その他の要素など、特定の要素の下にあるすべての情報を提供します。
検査ツールを使用すると、コードを一時的に変更し、Web ページに適用されている変更をリアルタイムで表示することもできます。ただし、変更はあなたにのみ表示されます。これは、経験豊富な開発者であっても、特定の Web サイトがどのように構築されるかを知りたいだけであっても、強力なツールです。
Mac 上の Google Chrome で要素を検査する方法
最も人気のあるブラウザである Chrome で要素を検査する方法から始めましょう。手順は非常に簡単なので、すぐに始めることができます。
Google Chromeで検査パネルを開く方法
- Chrome ブラウザを開き、検査したい Web サイトにアクセスします。
![Mac 上の Google Chrome アイコン Mac 上の Google Chrome アイコン](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/google-chrome-icon-on-mac.webp)
- 任意の空白スペースを右クリックし、「検査」を選択します。
![Chrome で強調表示された検査ボタン Chrome で強調表示された検査ボタン](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/highlighted-inspect-button-on-chrome.webp)
- 画面に検査パネルが表示されます。
![Mac の Chrome で要素パネルを検査する Mac の Chrome で要素パネルを検査する](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/inspect-element-panel-on-chrome-in-a-mac.webp)
Google Chrome で Web ページの特定の要素を検査する方法
検査パネルを正常に開くことができたので、要素を操作する方法を学びましょう。
- 検査パネルの左隅にある「検査する要素を選択」をクリックします。
![Chrome で要素を選択して検査するオプション Chrome で要素を選択して検査するオプション](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/select-an-element-to-inspect-it-option-on-chrome.webp)
- 任意の要素を選択します。この例では、Web ページ上の画像を検査しています。これは、任意の要素で行うことができます。要素のタイプ、ファイル名などの基本情報を含む白いボックスが表示されます。右側には、特定の要素に関連付けられたコードが表示されます。
![Chrome での画像要素の検査 Chrome での画像要素の検査](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/inspecting-an-image-element-on-chrome.webp)
Google Chrome でウェブサイトのモバイル版を表示する方法
- 検査パネルの左側で、「デバイスツールバーの切り替え」オプションをクリックします。
![Chrome 検査パネルのデバイス ツールバー オプションの切り替え Chrome 検査パネルのデバイス ツールバー オプションの切り替え](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/toggle-device-toolbar-option-on-chrome-inspection-panel.webp)
- ウェブサイトがモバイルデバイスで反応することがわかります。要素をクリックすることで引き続き検査を実行できます。情報はスマートフォンに基づいています。
![Chrome 検査ツールのモバイル ビュー Chrome 検査ツールのモバイル ビュー](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/mobile-view-on-chrome-inspection-tool.webp)
- 上の「レスポンシブ」ドロップダウンをクリックすると、リストから選択したデバイスを選択できます。そうすると、特定のスマートフォンのモデルに対して Web ページがどのように反応するかがわかります。
![Chrome 検査ツールでサポートされているモバイル デバイス Chrome 検査ツールでサポートされているモバイル デバイス](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/supported-mobile-devices-on-chrome-inspection-tool.webp)
Google Chromeで検査パネルの位置を変更する方法
- 検査パネルの右隅にある縦方向の 3 点の省略記号をクリックします。
![Mac の Chrome で開発ツール ボタンをカスタマイズおよび制御する Mac の Chrome で開発ツール ボタンをカスタマイズおよび制御する](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/customize-and-control-dev-tools-button-on-chrome-in-a-mac.webp)
- 検査ドックの場所を左側、下、またはポップアップ ウィンドウ上から選択します。
![Chrome でドック側の設定を強調表示する Chrome でドック側の設定を強調表示する](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/highlighting-dock-side-settings-on-chrome.webp)
Mac の Safari で要素を検査する方法
要素の検査機能は開発者向けオプションの一部であるため、Safari ではデフォルトでオフになっています。したがって、まず「開発メニュー」を有効にする必要があります。
Safariで検査パネルを開く方法
- Safari を開き、検査したい Web サイトにすでにアクセスしている場合は、上部のメニュー バーにある「Safari」アイコンをクリックし、「設定」を選択します。
![トップメニューのSafari設定ボタン トップメニューのSafari設定ボタン](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/safari-settings-button-from-top-menu-.webp)
- 「全般」タブが表示されます。右端の「詳細」タブを選択します。
![設定パネルからの Safari の詳細設定 設定パネルからの Safari の詳細設定](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/safari-advanced-settings-from-the-settings-panel.webp)
- 「メニューバーに開発メニューを表示」の横にあるチェックボックスをクリックすると、Safari のすべての高度な機能にアクセスできます。
![Safari設定のメニューバーオプションに開発メニューを表示 Safari設定のメニューバーオプションに開発メニューを表示](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/show-develop-menu-in-menu-bar-option-on-safari-settings.webp)
- Web サイト上の任意の場所を右クリックし、「要素を検査」を選択します。これにより、Safari で要素の検査パネルが開きます。
![Safari の「要素を検査」ボタン Safari の「要素を検査」ボタン](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/inspect-element-button-on-safari.webp)
- さらに高度なオプションを使用するには、メニュー バーの「開発」タブをクリックします。
![メニューバーの現像オプション メニューバーの現像オプション](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/develop-option-on-menu-bar.webp)
Safari で Web ページの特定の要素を検査する方法
- 検査ペインの左隅にある目玉のような「検査」アイコンをクリックします。
![Mac の Safari で要素の選択を開始する Mac の Safari で要素の選択を開始する](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/start-element-selection-on-safari-in-a-mac.webp)
- カーソルを使用して、検査する要素を選択します。この例では title タグを検査していますが、必要な要素を検査することもできます。
![Safari 検査ツールで見出しタグを検査する Safari 検査ツールで見出しタグを検査する](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/inspecting-a-heading-tag-on-safari-inspect-tool.webp)
Safari で Web サイトのモバイル版を表示する方法
- 上部のメニューバーから「開発」オプションをクリックし、「レスポンシブデザインモードに入る」を選択します。
![Safari 検査ツールで応答モードに入る Safari 検査ツールで応答モードに入る](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/enter-responsive-mode-on-safari-inspection-tool.webp)
- Web ページの検査に使用するデバイス モデルを選択します。
![Safari 検査ツールで iPhone を表示 Safari 検査ツールで iPhone を表示](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/iphone-view-on-safari-inspection-tool.webp)
Safari で検査パネルの位置を変更する方法
検査パネルの左側から希望の場所を選択すると、検査パネルがそれに応じて移動します。
![Safari で検査ドックの場所を変更する Safari で検査ドックの場所を変更する](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/change-inspection-dock-location-on-safari.webp)
Mac 上の Firefox で要素を検査する方法
Firefox は、Web プロジェクトに取り組む場合、経験豊富な開発者やデザイナーの間で人気の選択肢です。Mac 上の Firefox で要素を検査する方法を見てみましょう。
Firefox で検査パネルを開く方法
- Firebox ブラウザで検査したい Web ページにアクセスしたら、右クリックして [検査] を選択します。
![Mac の Firefox のボタンを検査する Mac の Firefox のボタンを検査する](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/inspect-button-on-firefox-in-a-mac.webp)
- これにより、Firefox ブラウザで検査パネルが開きます。
![Mac の Firefox の検査パネル Mac の Firefox の検査パネル](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/inspection-panel-on-firefox-in-a-mac.webp)
Firefox で Web ページの特定の要素を検査する方法
- 検査パネルの左隅に表示される「カーソル」アイコンをクリックします。
![Firefox でページから要素を選択する Firefox でページから要素を選択する](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/pick-an-element-from-the-page-on-firefox.webp)
- 検査したい要素にカーソルを移動します。この例では見出しタグを検査していますが、任意の要素でこれを行うことができます。
![Firefox 検査ツールでタイトルタグを検査する Firefox 検査ツールでタイトルタグを検査する](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/inpecting-a-title-tag-on-firefox-inspection-tool.webp)
Firefox で Web サイトのモバイル版を表示する方法
- 検査パネルの右隅にあるスマートフォンのアイコンをクリックします。
![Mac の Firefox のレスポンシブ デザイン モード Mac の Firefox のレスポンシブ デザイン モード](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/responsive-design-mode-on-firefox-in-a-mac.webp)
- これにより、Web サイトがスマートフォン型のビューアに変換されて読み込まれます。「レスポンシブ」トグルをクリックして、選択したモバイルデバイスを選択できます。
![Mac の Firefox の応答性の高いドロップダウン ボタン Mac の Firefox の応答性の高いドロップダウン ボタン](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/resposive-drop-down-button-on-firefox-in-a-mac.webp)
Firefox で検査パネルの場所を変更する方法
- 検査ドックの右隅にある水平方向の 3 点の省略記号をクリックします。
![Mac の Firefox での検査ドックの設定 Mac の Firefox での検査ドックの設定](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/inspection-dock-settings-on-firefox-in-a-mac.webp)
- 有効にする場所を選択すると、それに応じて検査パネルが移動します。
![Mac の Firefox で検査ドックの場所が異なる Mac の Firefox で検査ドックの場所が異なる](https://cdn.thewindowsclub.blog/wp-content/uploads/2023/06/different-inspection-dock-location-on-firefox-in-a-mac.webp)
よくある質問
要素の検査とページのソースの表示はどう異なりますか?
Inspect elements は、Web ページの HTML、CSS、JavaScript の操作、変更、トラブルシューティングを行うために最新のブラウザーに組み込まれている開発者ツールです。Web ページのページ ソースを確認すると、サーバーからブラウザに配信された静的な HTML コードが表示されるだけです。全体的な構造、コンテンツ、メタデータなどのタグを分析できますが、検査ツールはすべての要素を含む Web ページをレンダリングし、エラーを修正します。
要素検査ツールを使用すると、他にどのような種類のデータを検出できますか?
インスペクト要素を使用すると、Web サイトがどのように構築されているかを包括的に把握できます。階層とネストを使用して実際の HTML コードにアクセスできます。CSS を変更し、色やフォント サイズなどの要素を含む変更をリアルタイムで確認できます。また、JavaScript コードを確認して、コードをデバッグして分析することもできます。「ネットワーク リクエスト」機能を使用すると、コンソール出力フォント、DOM 操作など、外部から読み込まれるリソースを理解しやすくなります。
Web サイトの所有者は、Web サイト上の要素のアクティビティを検査することができますか?
技術的にはそうです。明確にしておきますが、最近のすべての Web サイトには分析ツールやその他の追跡ツールがインストールされており、サイトに滞在している時間からクリックした場所まで、Web サイト上でユーザーが行ったすべてのことを基本的に追跡します。ただし、Web サイトによって個人が特定されることは決してなく、ユーザーの人口統計や行動に一致するユーザーのクラスター内の単なるデータ ポイントにすぎません。これらのシステムは、 Web サイトのパフォーマンスを監視し、ユーザー エクスペリエンスを向上させるために設置されています。
画像クレジット: Unsplash。すべてのスクリーンショットは Abbaz Uddin によるものです。
コメントを残す