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

※日本語版での説明

メニューのCSSEdit>ブラウザとの連携 から
CSSEdit

Open Browser…をクリック。
矢印のところをクリック
CSSEdit 2 Browser Integration-4

上のところに「X-ray」が表示される。
枠の中にURLを入れるか、ファイルをドラッグしていれる。

CSSEdit 2 Browser Integration-5

下のようにサイト(又はhtmlファイル)が表示される。
X-rayの所が停止中になっているのに注目。この状態でクリックしても選択できない。
アイコンをクリックして「実行中」にする。

01_01 トップページA

ちなみにこのサイトでは以下のファイルで構成されている。
index.htmlが開いているレイアウト本体であり、3つのCSSファイルがリンクされている。
上の場合はその中のbase.cssが関係していることを表示しているわけですね。

css

以下のように html の構造が選択される(下の矢印)。
上の矢印のところに選択した枠のhtmlのタグが表示される。

CSSEdit-2

上で選択した枠はindex.html内の「div#header」タグであることが分かる
index.html

更にその枠をダブルクリックすると「スタイルの適用状況」が表示される。(又は、選択して「インスペクタ」アイコンをクリック)
一番上に、このindex.htmlファイルに使用されているCSSファイル名が表示される。この場合は3つのCSSファイルがリンクされていることが分かる。
しかしその下に「合致するスタイルはありません」と出ている。

名称未設定4

どの枠を選択しても何の変化もない。これを編集作業に入るにはCSSファイルを一つ開く必要がある。

01_01 トップページA

画面の右側に上のアイコンがあるが左のスタイルシートアイコンには3つのCSSファイルがあることを示している。

名称未設定1

クリックすると上のようにそのファイルが表示されるので、編集したいファイル、この場合はbase.cssをクリックすると下のように実際のファイルが読み込まれる。

base.css

このファイルが読み込まれると、編集作業に入れる。

下のように一番上の枠「1」を選択、インスペクタで見ると「#header」となっている所をクリックしてやるとCSSエディタが下のように開いて「#header」部分がハイライト表示される。これでどこにCSSが記述されているのかが一目瞭然となる。ここを編集すればいいわけですね。

名称未設定4




※このスタイルを追加の「div#header」をもう一回クリックすると下図のようにCSSが適用されていないhtml表示になる。
CSSを適用しなおすにはもう一回、同じ所をクリック。

01_01 トップページA-1




下のようにそのCSSの位置がハイライトで表示される。

上で開いた「スタイルの適用状況」では「#header」となっているので上から6番目のところにそれがありますね。
クリックするとその分のスクリプトがハイライト表示されます。