Macな暮らし
Macと気ままな暮らし、コーヒーとiTunesのカントリーを聞きながら。
※日本語版での説明
メニューのCSSEdit>ブラウザとの連携 から
Open Browser…をクリック。
矢印のところをクリック
上のところに「X-ray」が表示される。
枠の中にURLを入れるか、ファイルをドラッグしていれる。
下のようにサイト（又はhtmlファイル）が表示される。
X-rayの所が停止中になっているのに注目。この状態でクリックしても選択できない。
アイコンをクリックして「実行中」にする。
ちなみにこのサイトでは以下のファイルで構成されている。
index.htmlが開いているレイアウト本体であり、3つのCSSファイルがリンクされている。
上の場合はその中のbase.cssが関係していることを表示しているわけですね。
以下のように html の構造が選択される（下の矢印）。
上の矢印のところに選択した枠のhtmlのタグが表示される。
上で選択した枠はindex.html内の「div#header」タグであることが分かる
更にその枠をダブルクリックすると「スタイルの適用状況」が表示される。（又は、選択して「インスペクタ」アイコンをクリック）
一番上に、このindex.htmlファイルに使用されているCSSファイル名が表示される。この場合は3つのCSSファイルがリンクされていることが分かる。
しかしその下に「合致するスタイルはありません」と出ている。
どの枠を選択しても何の変化もない。これを編集作業に入るにはCSSファイルを一つ開く必要がある。
画面の右側に上のアイコンがあるが左のスタイルシートアイコンには3つのCSSファイルがあることを示している。
クリックすると上のようにそのファイルが表示されるので、編集したいファイル、この場合はbase.cssをクリックすると下のように実際のファイルが読み込まれる。
このファイルが読み込まれると、編集作業に入れる。
下のように一番上の枠「1」を選択、インスペクタで見ると「#header」となっている所をクリックしてやるとCSSエディタが下のように開いて「#header」部分がハイライト表示される。これでどこにCSSが記述されているのかが一目瞭然となる。ここを編集すればいいわけですね。
※このスタイルを追加の「div#header」をもう一回クリックすると下図のようにCSSが適用されていないhtml表示になる。
CSSを適用しなおすにはもう一回、同じ所をクリック。
下のようにそのCSSの位置がハイライトで表示される。
上で開いた「スタイルの適用状況」では「#header」となっているので上から6番目のところにそれがありますね。
クリックするとその分のスクリプトがハイライト表示されます。
メニューのCSSEdit>ブラウザとの連携 から
Open Browser…をクリック。
矢印のところをクリック
上のところに「X-ray」が表示される。
枠の中にURLを入れるか、ファイルをドラッグしていれる。
下のようにサイト（又はhtmlファイル）が表示される。
X-rayの所が停止中になっているのに注目。この状態でクリックしても選択できない。
アイコンをクリックして「実行中」にする。
ちなみにこのサイトでは以下のファイルで構成されている。
index.htmlが開いているレイアウト本体であり、3つのCSSファイルがリンクされている。
上の場合はその中のbase.cssが関係していることを表示しているわけですね。
以下のように html の構造が選択される（下の矢印）。
上の矢印のところに選択した枠のhtmlのタグが表示される。
上で選択した枠はindex.html内の「div#header」タグであることが分かる
更にその枠をダブルクリックすると「スタイルの適用状況」が表示される。（又は、選択して「インスペクタ」アイコンをクリック）
一番上に、このindex.htmlファイルに使用されているCSSファイル名が表示される。この場合は3つのCSSファイルがリンクされていることが分かる。
しかしその下に「合致するスタイルはありません」と出ている。
どの枠を選択しても何の変化もない。これを編集作業に入るにはCSSファイルを一つ開く必要がある。
画面の右側に上のアイコンがあるが左のスタイルシートアイコンには3つのCSSファイルがあることを示している。
クリックすると上のようにそのファイルが表示されるので、編集したいファイル、この場合はbase.cssをクリックすると下のように実際のファイルが読み込まれる。
このファイルが読み込まれると、編集作業に入れる。
下のように一番上の枠「1」を選択、インスペクタで見ると「#header」となっている所をクリックしてやるとCSSエディタが下のように開いて「#header」部分がハイライト表示される。これでどこにCSSが記述されているのかが一目瞭然となる。ここを編集すればいいわけですね。
※このスタイルを追加の「div#header」をもう一回クリックすると下図のようにCSSが適用されていないhtml表示になる。
CSSを適用しなおすにはもう一回、同じ所をクリック。
下のようにそのCSSの位置がハイライトで表示される。
上で開いた「スタイルの適用状況」では「#header」となっているので上から6番目のところにそれがありますね。
クリックするとその分のスクリプトがハイライト表示されます。