Macな暮らし
Macと気ままな暮らし、コーヒーとiTunesのカントリーを聞きながら。
下スペース内に編集したいhtmlファイルをドラッグして入れる。（又は左上「ファイルを追加」からファイルを選択するか「URLを追加」アイコンをクリックして入力欄を開く）
「X-ray」が停止中になっているのでアイコンをクリックして「実行中」にする。
実行中になると構造枠を選択できるようになる。
上で選択した枠はindex.html内の「div#header」タグであることが分かる
更にその枠をダブルクリックすると「スタイルの適用状況」が表示される。（又は、選択して「インスペクタ」アイコンをクリック）
一番上に、このindex.htmlファイルに使用されているCSSファイル名が表示される。この場合は3つのCSSファイルがリンクされていることが分かる。
しかしその下に「合致するスタイルはありません」と出ている。
どの枠を選択しても何の変化もない。これを編集作業に入るにはCSSファイルを一つ開く必要がある。
下図でスタイルシートアイコンの所に「3」とあるのはCSSファイルがこのhtmlには3つリンクされているという事。その中に編集できるCSSファイルがある。
クリックすると下のようにそのファイルが表示されるので、編集したいファイル、この場合はbase.cssをクリックするとその下のように実際のファイルが読み込まれる。
このファイルが読み込まれると、編集作業を行うことが出来る。
下のように一番上の枠「1」を選択、黒のダイアログのインスペクタで見ると「#header」となっている所をクリックしてやるとCSSエディタが下のように開いて「#header」部分がハイライト表示される。これでどこにCSSが記述されているのかが一目瞭然となる。ここを編集すればいいわけですね。
※ここで、最初にインスペクタをクリックしても変化がない場合があります。その時は、他の所をクリックすると表示されるようになります。表示されたら戻るとちゃんと設定ができるようになると思います。
編集してみましょう。