人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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の方法だと、ページ数が多いサイトの場合は無理が出てくるような気もします。よろしくお願い致します。

●質問者: inomonta
●カテゴリ:ウェブ制作
✍キーワード:CSS HTML Web アドバイス コンテンツ
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● wizemperor
●30ポイント

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

時と場合によりますが、

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

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

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

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

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

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

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

◎質問者からの返答

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

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


2 ● zero-code
●30ポイント

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

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

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

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

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

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

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

◎質問者からの返答

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

ありがとうございます!


3 ● kakicg
●30ポイント

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

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


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


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

◎質問者からの返答

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

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

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


4 ● pahoo
●30ポイント

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


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

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

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

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


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

◎質問者からの返答

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

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

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


5 ● sigeos15
●30ポイント

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

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

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

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

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

◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ