【CSSの移動】使用するテンプレートをDreamweaverで開いたときにhead内にcssコードがある場合の対処法

【CSSの移動】使用するテンプレートをDreamweaverで開いたときに

head内にcssコード(ピンク色の文字)がある場合の対処法

↑ここにピンクの文字があると×

HTMLコードのhead内にピンク色の文字がある場合、

このままテンプレートをコピーしてカテゴリー(コンテンツ)別のページを作成すると、

コピー後にデザインを修正したときに

同じデザインのHTMLファイルの数だけ同じ部分のCSSを直さないといけなくなります。

(10枚同じデザインのHTMLファイルを作っていたら、

すべてのファイルの同じ箇所を１０回直さなければいけなくなります。)

これを防ぐために、

テンプレートを自分のオリジナルデザインに変更する作業が完成したら次の作業が必要です。

1.CSSスタイルのパネルの、<style>の中のCSSを全て選択します

2.CSSスタイルのパネルの右上の

↑このマークをクリックして、[CSSルールを移動]を選択する。

3.新規スタイルシートを選択するか、

または、移動したいcssファイルを「参照」ボタンから選択して、

OKをクリック

4.新規スタイルシートを選択した場合は名前をつけて保存。

(cssファイルなので拡張子は必ず.cssにすること)

これで、headの中のピンクの文字が消えました。

CSSスタイルのパネルで確認してみましょう。

<style>=head内 から 

website.cssと言う名前のcssファイルの中に移動しています。

ただし、まだこれでは機能しません。

なぜなら、<link href="~の部分をよくみてみましょう。

file:///で始まっています。

これは自分のパソコンの中でしか

機能しない状態になっています。

なぜこうなるのか？

編集中のhtmlファイルを保存していないためです。

Dreamweaver上で、htmlファイルを保存するまでの間、

表示ができるように仮に自動的に入れてくれているコードが

file:///なのです。

編集中のhtmlファイルをindex.htmlと言う名前で保存します。

すると、<link href="~の部分がwebsite.cssになります。

(これはindex.htmlと同じ階層にwebsite.cssを保存している場合です。

kadaisiteの課題でやったように「css」と言うフォルダ内にwebsite.cssを保存する場合は

この部分がcss/website.cssと言う書き方になります。)