Chromebookでビジュアル要素のソースコードを表示する方法について質問がありますか？そのためには、Google Chromeアプリ、または任意のブラウザページで、特別なDevToolsを使用することができます。DevToolsは、Google Chromeブラウザに組み込まれている特別な開発者ツールのリストです。これにより、ユーザーは外出先でページを編集したり、起こりうる問題を把握したりすることができます。
ChromebookでInspect Elementを使用する方法
Chromebookでは、デフォルトのブラウザはGoogleです。このデバイスで開発者ツールを開くには、以下が必要です。
- 目的のページを開く
- アプリケーションの右上にある3つの点をクリックしてください。
- “More Tools “を選択
- デベロッパーツール “をクリック
この機能を利用するには、F12ボタンを押すか、目的の項目を右クリックする方法もあります。
これは、Windowsやその他のシステムのほとんどのブラウザに適用される普遍的な手順です。
MacやIphoneでInspect Elementを使用する方法
MacでもiPhoneでも、同じことができるのでしょうか？以下の簡単なステップを踏むだけでOKです。
Macでの使用方法
Macをお使いの場合、ブラウザはSafariが最適です。このブラウザでデベロッパーツールを開くには、ChromeやFirefoxで同じプロセスを行う場合とは若干異なります。必要となります。
- ブラウザを開く
- タブ名のSafariをクリック
- “Preferences “を選択
- 次に、画面上部に表示されているAdvancedの歯車アイコンをクリックします。
- メニューバーに開発メニューを表示する」にチェックを入れる
これを行うと、Web ページで Inspect Element が利用できるようになります。CMD + Option + I で呼び出すこともできます。
iPhoneでの使用方法
要素の検査」機能を使って、モバイル版のウェブページがiPhoneでどのように見えるかを確認したい場合は、まず、iOSデバイスのウェブインスペクタを有効にする必要があります。
- 設定画面へ
- Safariアプリを選択
- 一番下までスクロールして、”Advanced Menu “をクリックします。
- “Web Inspector “のチェックボックスをオンにします。
また、上記の指示に従って、Macで開発メニューを有効にする必要があります。iOSデバイスとMacでこれらの機能を有効にすると、Macの上部に「開発」メニューが表示されるようになります。これをクリックすると、添付のiPhoneとその上で開いているWebページが表示されるようになります。別のページに切り替えると、Macのそのページのウェブインスペクタウィンドウも切り替わります
エレメンタルパネルとは
まず知っておきたいのは、「要素パネル」とは何かということです。ページのデザインや外部の要素を変更したい場合は、CSSやHTMLを編集する必要があります。これには、エレメントパネルと呼ばれる開発者用ツールを使います。これを使えば、フロントエンドからページをチェックして変更することができます。パネルに表示される要素には、以下のようなものがあります。
- 画像のサイズや出典など、画像に関する情報
- CSSパネル – このオプションは、ページの外部スタイルを変更するために使用します。ここでは、フォント、サイズ、色などのパラメータを変更することができます。
- DOM 情報または DOM パネル このオプションでは、ページの外観を制御できます。要素の位置を変更したり、HTMLファイルに完全にナビゲートすることができます。
- コンソールパネルには、開発者用ツールの新機能が表示されます。
- 要素のイベントリスナー
- HTMLコメント
- フィードバック
画像のレンダリングサイズとナチュラルサイズを検査する
ウェブページに掲載されている画像についての情報を知りたい場合、画像を「検査」することができます。これにより、例えば画像のサイズを知ることができます。これを行うには、DOMツリーにいるときに、IMGの上にマウスポインターを置く必要があります。
ソースセット（srcset）から特定の使用画像を検査する
そして、どのバージョンの画像が読み込まれたか、正確なsrcsetソースは何かを確認します。srcsetは、ブラウザが実際の画像よりもわずかに大きい、最小サイズの画像のバージョンを要求するのに役立ちます。これは、ブラウザが選択できるように異なる解像度の画像セットを表示するために使用します。まず、IMGの項目を選択し、コンソールで$0.currentSrcの情報を確認します。なお、DPIの高いデバイスを使用する必要がある場合は、srcsetで画像の特性を上げることができます。
