ドリームウィーバーを使ったスタイルシートの外部化について・・・

質問

スタイルシート初心者です。
ドリームウィーバーでサイトを構築中なのですが、スタイルシートの外部化についてお尋ねしたいことがあります。

スタイルシートを外部化することでサイトの構造を軽くしたいのですが、ドリームウィーバーの編集画面の下のプロパティにある文字サイズの変更、色などを指定しながら文を作っていくと、どんどんhtmlソースの上の方にスタイルが追加されてしまいます・・・

これではファイルが重くなるばかりなのですが、スタイルシートを外部化して、全てそこから読み出すようにするにはどうすれば宜しいでしょうか？

この状態では各ページごとにスタイルシートがhtml上にでてきてしまいます。
スタイルシートを一括管理したいのです。

まだまだ初心者の為わかりやすいようにどうかよろしくお願い致します。

回答No.2

crepon133 · ベストアンサー

手順に問題がありそうです。
ファイル→新規ファイル→テキスト→CSSスタイル→
タグ：body　タイプ：HTMLタグの再定義　定義場所：新規スタイルシート　→
名前を付けて保存→bodyの定義をして→OK
これで外部CSSファイルが読み込まれるようになります。
（仕様を決めてあるのなら、ここで一気に基本のCSS設定を行ってしまいます。）

次ぎに新規ファイルを作るときは
ファイル→新規ファイル→テキスト→CSSスタイル→スタイルシートを添付→CSSファイルを指定
これで外部CSSファイルが読み込まれるようになります。
新しいCSSを設定するときは、現在のCSSファイルに追加するか、
現在のドキュメントに埋め込むか選択してください。

バージョンによって多少操作手順が違うかもしてません。

＞文字サイズの変更、色などを指定しながら文を作っていくと
蛇足ですが、CSSは最初の設計が大切です。作りながら設定していくと収拾がつかなくなります。

お礼

作りながら設定していくと収拾がつかなるんですね！

恥ずかしながら初めて知りました。

本当にありがとうございます！

回答No.3

kagamin

私の手順・やり方ですが、参考までに。（バージョン8での解説になります）

まず外部化したいスタイル記述のあるHTMLファイルを開きます。
メニューの「ファイル」→「書き出し」→「CSSスタイル」を選択して、お好きな名前を付けてサイト定義されている任意の場所に保存します。これでスタイルの外部ファイル化ができました。

次に、プロパティパネルの「スタイル」→「スタイルシートの適応」から先ほど保存したファイル（.css）を選択します。
これでHTMLファイルの上の方（＜head＞＜/head＞）にこんな感じのタグが追加されたと思います
＜link href="ファイルのパス/○○.css" rel="stylesheet" type="text/css" /＞
外部スタイルシートの添付はこれで終了です。

さて、次はすでに記述してあるスタイルシートを消さねばなりません。
ヘッドコンテンツを表示するようにしてあれば（メニュー「表示」にヘッドコンテンツにチェックがあればOK[）「楕円にS」のようなアイコンがあると思います。
そのアイコンをクリック選択してデリートキーを押せば、そのページでの
<style type="text/css">
<!--
-->
</style>
という記述部分が削除されます。以上で終了でございます。

今後はCSSスタイルパネルからそれぞれ変更すれば、添付されたファイルすべて同じように変わるようになるはずです。

手作業で消すのが面倒な場合、すでに記述済みのスタイルシートが全ページ全く同じであれば変更したい全ファイル対象の「検索/置換」でいっぺんにやってしまうことも可能ですが…
まだファイル数が少ないのであれば、ファイル１枚１枚やってみてください。

お礼

とても丁寧なご説明ありがとうございます。

特に
<style type="text/css">
<!--
-->
</style>
という記述部分を削除する方法は初めて知りました。
ありがとうございます。

回答No.1

yama3desu

こんにちは。

参考ページのように、
外部に、cssの拡張子のファイルを作成し、
(この場合は、general.css)

HTMLファイルのヘッダに、
<link href="general.css" rel="stylesheet" type="text/css" />
と、書き加えれば、良いです。

参考URL：

http://www.villagecenter.co.jp/atvc/wz/xhtml/xhtml/css.html