Macな暮らし Macと気ままな暮らし、コーヒーとiTunesのカントリーを聞きながら。

X-raying your web page（ウェブ・ページのレントゲン写真を撮ること）
X-ray（X線）は、ページの構造を見ることが簡単にできます。有益なオーバーレイ（層の重ね合わせ）は、そのマージンとパディングに加えて、選択された要素のサイズを示します。
オーバーレイの解釈は非常に簡単です:ちょっと見にくいんですが、下のように、矢（狭いスペースでは▼に見えます）はマージンを示します。また、点線はパディングを示します。（下図参照）
少しの点線も見えないならば、要素はパディングを持っていません。


たとえスタイルシートが開いていない場合でも、先進のＸ線インスペクターは選ばれた要素のためにすべての応用スタイルを見せます。これは、複雑なスタイルシートがどのように働くか知ることをとても簡単にします。

To enable X-ray:（エックス線を可能にするために:）
  1. Live Preview（ライブWebプレビュー）が開いていることを確認してください。
  2. URL入力欄に表示したいアドレスを入力、表示する。
  3. 左上で「"X-ray（Ｘ線）」ボタンをクリックします、それで起動します。（Activeと表示される）
  4. 一旦起動すると、情報を得るためにウェブページ上のどこでもクリックすることができます。クリックした場所が選択範囲としてハイライト表示されます。

To inspect the applied styles of an element:（要素に適用されたスタイルを点検するために:）
  1. ウェブページをクリックすることによって、要素を選択してください。
  2. X-ray（Ｘ線）インスペクターを表示するために、ツールバーで「Inspector」ボタンをクリックしてください。

To go through the element hierarchy:（要素階層を経験すること:）
  1. ウェブページで目的の要素をクリックして選択してください。
  2. DOM階層構造で上るのにウェブページの上の階層構造バーを使用してください。

下のDOM階層構造の部分は自分がクリックした場所がどの階層の位置にあるのかを見る事ができます。つまり、ヘッダーの中にあるのか、コンテンツの中にあるのか、サイドバーの中なのか、すぐに理解できるというわけですね。


右上の「Style Sheets」アイコンをクリックするとリンクされているCSSファイル名が表示される。



その中のどれかをクリックすると下のようなウインドウが表示される。
Override and Edit（無効にして編集）ボタンをクリック。



スタイルシートの内容が表示されます。ここで「無効にして編集」とは、ここで編集したことは実際のWebページに一切影響しないということらしい。つまり編集をしたその結果を見ることは出来るが、実際のページが変わる訳ではないということ。そうでなければ他人のページを勝手に変更できるということだから当たり前ですよね。

下の様に左のサイドバーの指定の部分を選択すると、中央のCSS内容のところにその関連部分がハイライト表示される。

最初にプレビュー画面でページのある部分を選択すると、インスペクターにそれが文字として表示され、その文字をクリックすると、下のCSS記述部分がハイライト表示されるので、画面とCSSの関係がすぐにわかるので便利です。