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

名称未設定

下スペース内に編集したいhtmlファイルをドラッグして入れる。(又は左上「ファイルを追加」からファイルを選択するか「URLを追加」アイコンをクリックして入力欄を開く)

プレビュー

X-ray」が停止中になっているのでアイコンをクリックして「実行中」にする。

01_01 トップページA


01_01 トップページA-2


実行中になると構造枠を選択できるようになる。

CSSEdit-1

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


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

名称未設定4

どの枠を選択しても何の変化もない。これを編集作業に入るにはCSSファイルを一つ開く必要がある。
下図でスタイルシートアイコンの所に「3」とあるのはCSSファイルがこのhtmlには3つリンクされているという事。その中に編集できるCSSファイルがある。

01_01 トップページA-1-1

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

名称未設定1

base.css


このファイルが読み込まれると、編集作業を行うことが出来る。

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

名称未設定4

※ここで、最初にインスペクタをクリックしても変化がない場合があります。その時は、他の所をクリックすると表示されるようになります。表示されたら戻るとちゃんと設定ができるようになると思います。

編集してみましょう。