2つの外部スタイルシートを使うコツ
-
0 名前： りえ ： 2006/04/06 09:09
- またまた質問でごめんなさい。
ページを作っていて、また壁に当たってしまいました。
私は数冊のスタイルシート関連の本を参考にして
サイトを作ろうとしています。
その本の中で、ひとつのページに対して、2つの外部スタイルシート
（ページの基礎（？）についてスタイルを指定したcssファイルと、ページの
レイアウトを指定したcssファイルの2種類）
を使っているのです。
1つのcssファイルで、基本的な部分を指定して、もうひとつのcssファイルで
細かな設定をしているんだなぁって云うのは、なんとなくわかるのですが、
どうもその利用方法が、きちっと理解できません。
４０ページくらいのサイトを作る時に、それぞれのページに対して
複数の外部スタイルシートを適用させる際のコツというか、
基本的な考え方というか、
そもそも、複数のスタイルシートを適用させるのは良いのか？
教えていただけると助かります。
お願いします。
-
1 名前： Pid ： 2006/04/06 09:09
- CSS ファイルを分割する方法は，目的によって違うと思います。
(a). ファイル管理の手間を省くため
たとえば，何度も使うようなスタイルを基本ファイルにまとめておく。@import をうまく使えば，デザインをリニューアルするときも最低限の変更で済む。
(b). 出力メディアの違いに対応するため
たとえば，モニタ用スタイル，携帯端末用スタイル，印刷用スタイルをそれぞれ別ファイルにまとめておく。
(c). ブラウザのバグに対処するため
たとえば，全てのブラウザに共通の基本ファイルと，IE 用，Moziila 用，Opera 用，Safari 用のバグ対処ファイルを準備する。
(d). デザインの工夫のため
たとえば，レイアウト用の CSS ファイルを一つと，配色用の CSS ファイル（赤基調，青基調，黄基調，...）を用意する。日記ページは赤基調，小説ページは青基調，趣味ページは黄基調……のように配色を変えれば，デザインにメリハリが生まれるし，何のページを見ているか利用者が判別しやすくなる。
特に目的が無ければ，CSS ファイルを分割する必要は無いでしょう。
まあ，実際に運営してみれば「ああ，こうすれば良かった」と実感することが多いと思います。そういう意味で，私は本公開前に，しばらくローカルで練習してみる（ついでにページを作りためておく）ことをお勧めします。
-
2 名前： りえ ： 2006/04/06 09:09
- Pidさん
情報ありがとうございます。
参考にさせていただきます。
ひとつ、お聞きしたいのですが、
(a). ファイル管理の手間を省くため
@importを上手く使うとありましたが、
@importとは、何なのか教えていただけませんでしょうか？
-
3 名前： Pid ： 2006/04/06 09:09
- > @importとは、何なのか
http://hp.vector.co.jp/authors/VA022006/css/cascade.html#at-import-rule
たとえば，全ての HTML 文書には
<link rel="stylesheet" type="text/css" href="common.css">
だけを記述しておきます。そして，common.css で
@import url("style1.css");
と style1.css を読み込むようにしておきます。そうすれば「style2.css に変更しよう」と思ったときでも，（全ての HTML 文書の link 要素を変更せずとも）common.css を変更するだけで済みます。
-
4 名前： ビギナーくん ： 2006/04/06 09:09
- こちらに質問させてください。
超初心者です。
上記のように
何個かのＣＳＳファイルをimportしています。
しかし画像のフォルダ
を指定しているのですがうまく表示されません。
画像は画像のフォルダに入れて管理しておくのがいいでしょうから
そのフォルダをhtmlのように<img/img〜と/を入れて記述してますが
どうにも反映されません。間違っているのでしょうか？
-
5 名前： 匿名希望 ： 2006/04/06 09:09
- >>4
読み込むスタイルシートを基準に相対指定しなくてはなりません。
例えば、
http://www.homepage.jp/index.html
が、
http://www.homepage.jp/css/style.css
というCSSによって、
http://www.homepage.jp/image/back.png
という画像を背景にしたい場合は、style.cssに、
body{ background-image:url("../image.css"); }
と記述する必要があります。
-
6 名前： ビギナーくん ： 2006/04/06 09:09
- 匿名希望さんありがとうございます！記述ですが
("../image/back.png)の("..←はhttpを省略した形なのでしょうか。
それとHTMLに記述する場合はimg src="〜”で同じディレクトリ内
/で区切って指定しておりましたがCSSはurlで表すのですね。
すみませんが申し少しお付き合いください。
-
7 名前： カヅサツ ： 2006/04/06 09:09 ［URL］
- > ("../image/back.png)の("..←はhttpを省略した形なのでしょうか。
相対URLの書き方で、"../" は「1つ上のディレクトリの」という意味になります。
> それとHTMLに記述する場合はimg src="〜”で同じディレクトリ内
> /で区切って指定しておりましたがCSSはurlで表すのですね。
いや、それはどちらも「URL」です。
-
8 名前： ビギナーくん ： 2006/04/06 09:09
- カヅサツさんありがとうございました。
改めて見直したら気がつきました。
記述はどうも苦手みたいです・・
また分からないことありましたら宜しくお願いします。
