WEB制作初心者です。ドリームウィーバー8を使って制作していますが、テンプレートと外部CSSの使い方で悩んでいます。どうすれば効率的で修正作業などもしやすくなるのか、アドバイスをいただきたいです。


例えば、下の3つのページがあったとします。

●●.html
▲▲.html
■■.html

ヘッダーやナビボタンの部分などには共通の外部CSSを適用し、テンプレートにしているとします。
各ページのコンテンツ部分は共通ではないので、別々のCSSを記述して適用させたいのですが、

1…●●.css、▲▲.css、■■.cssのように、それぞれのページ用に外部スタイルシートを作った方がいいでしょうか?

2…それとも、div id="●●" div id="▲▲" div id="■■"と、各ページのコンテンツ用のdivを作って、CSSファイルは共通の外部CSSファイル1つのみにした方がいいでしょうか?

3…それとも、他に何かよい方法がありますでしょうか?

1の方法がそもそも上手くいくのかどうかさえも分かっておりません。2の方法だと、ページ数が多いサイトの場合は無理が出てくるような気もします。よろしくお願い致します。

回答の条件
  • 1人2回まで
  • 登録:2009/01/17 01:15:17
  • 終了:2009/01/17 22:35:00

回答(5件)

id:wizemperor No.1

wizemperor回答回数379ベストアンサー獲得回数522009/01/17 01:44:08

ポイント30pt

DWというよりは、CSSの使い方の問題ですね。

時と場合によりますが、

まったく共通部分がないのであれば1でも2でもよいと思います。

CSSの量が少ないなら2のほうがいいでしょう。

ただ、それほど個別にIDを指定する必要があるというのは、

サイトの構成自体を見直したほうがいいかもしれません。

普通はどこかしら共通の部分があります。

IDではなくclassや各種のセレクタをうまく使うとCSSの記述量も減るでしょう。

似たサイトのソースを研究してみるといいかもしれません。

id:inomonta

なるほどです。共通の部分をうまく扱えるようにしたり、記述量を減らしたり出来るように精進いたします。

大変勉強になりました。ありがとうございます!

2009/01/17 22:18:27
id:zero-code No.2

zero-code回答回数2ベストアンサー獲得回数02009/01/17 05:45:01

ポイント30pt

自分の場合は1も2も。です。

共通の部分は共通のCSSファイルへ(ヘッダーや、フッター、レイアウトなど)

それ以外のコンテンツ毎に変わる部分は、コンテンツ毎にCSSファイルを作成します。

(細かく分けると管理しにくいので、量に合わせた適切な分け方で)

動的に外部CSSを指定するのが難しい場合は、コンテンツの大枠をIDで囲うことで他のコンテンツへ影響の内容にCSSを記述できるよにします。

また、大枠のレイアウトや直接タグに対するCSSを記述するファイルを別途設けてもいいかもしれません。

規模の小さいものなのであれば、複数のファイルに分ける必要は確かにないかもしれませんが、経験として是非試してみて欲しいです。

id:inomonta

大変参考になりました。実際に試してみないと身に付かないと思いますので、これから試行錯誤したいと思います。

ありがとうございます!

2009/01/17 22:22:11
id:kakicg No.3

kakicg回答回数44ベストアンサー獲得回数32009/01/17 09:51:50

ポイント30pt

>1…●●.css、▲▲.css、■■.cssのように、それぞれのページ用に外部スタイルシートを作った方がいいでしょうか?

1の方法はDreamweaver+テンプレートで可能ですし、そのページにだけ当てはまるルールを作る必要がある場合は(常にではない)そうした方がいいと思います。


方法は、そのページのスタイルシートを「新規CSSルール」で追加するときに「ルールを定義する場所」の欄で「(新規スタイルシート)」を選択します。


テンプレートを使う場合でもそのサイトのCSSの構成をあらかじめ設計しておくことが得策です。それをふまえて、まず全ページに共通する大本のテンプレートを作っておき、そこから各コーナーのテンプレートを派生させてつくって行くような入れ子構造のテンプレートの使い方なども可能になります。またテンプレート内にオプション領域を設定してその領域の表示のオンオフを選択したり、「編集可能な属性」を設定することでページごとにclassやidなどの属性を変更することも可能です。そういった機能を必要に応じて使用していけば割合柔軟でシステマティックなサイト編集が行えるようになると思います。

id:inomonta

なるほど…オプション領域も効果的に使った方がよさそうですね!

システマティックなサイト編集とは、あこがれます(笑)

どうもありがとうございます!

2009/01/17 22:24:25
id:pahoo No.4

pahoo回答回数5960ベストアンサー獲得回数6332009/01/17 11:36:02

ポイント30pt

Dreamweaver の使い方ではなく、CSS の適用基準(ポリシー)の問題ですね。


以下の条件をすべて満たすなら、「1」の方法をお勧めします。

満たさないなら、「2」の方法をお勧めします。

  1. コンテンツ毎に CSS デザインが全く異なる。
  2. 将来的に、まとめてCSSデザインを変更することがない。

他の方法ですが、「1」の方法を選択するなら、コンテンツHTMLのヘッダ部に style タグで書いた方がファイル管理の手間が省けます。Dreamweaverでも、CSSを分離しなければ、HTML中に style タグを記述してくれます。


コンテンツ毎のCSSに法則性がある――たとえば、ある条件ではすべての要素の color を black に、別の条件では blue にする――ということであれば、外部に共通 JavaScript ファイルを用意し、その中で動的に style タグを発生させるという方法もあります。

id:inomonta

明確な基準を示してくださり、大変参考になります。

JavaScript についてはまだ良く分かっておりませんが、勉強したいと思います。

どうもありがとうございます!

2009/01/17 22:27:22
id:sigeos15 No.5

sigeos15回答回数19ベストアンサー獲得回数22009/01/17 22:10:45

ポイント30pt

すでにある程度答えが出ているようなので1点だけ。

CSSの外部ファイルを複数読み込ませると

その分リクエスト回数が増えます。

リクエスト回数はサイトの表示速度にも関わり、なるべく少ないほうが良いので、

管理面と相談しながら外部ファイルの数を決定したほうがよろしいかと思います。

id:inomonta

な、なるほど…リクエスト回数も考慮しなければなりませんね!

これは考えておりませんでした!勉強になりました!

どうもありがとうございました!

2009/01/17 22:30:16

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません