cssは複数作る？

質問

こんにちは。
ホームページを自分で作成している初心者です。
ページがだんだん増えてくると、それにともなってcssの記述も多くなってきます。
そこで今はテーマやカテゴリーごとにcssを分けているのですが、cssもだんだんと増えてきます。
そもそもcssは複数作るものなのでしょうか。
そのことによる利点、欠点などがあれば教えてください。
よろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

＞cssは複数作るものなのでしょうか。
　通常はそうです。スタイルシートには、

ちょっと別のアングルから説明する、外部スタイルシートには
固定スタイルシート
　<link rel="STYLESHEET" href="default.css" type="text/css">
優先スタイルシート
　<link rel="STYLESHEET" href=" standard.css" title="標準" type="text/css">
代替スタイルシート
　<link rel="ALTERNATE STYLESHEET" href="big.css" title="大きなフォント" type="text/css">
があり、さらにmediaタイプで適用する端末も指定できます。

さらに、これらは複数あっても構いません。　
たとえば優先スタイルシートにて
　<link rel="STYLESHEET" href=" standardD.css" title="標準" type="text/css">
　<link rel="STYLESHEET" href=" standardC.css" title="標準" type="text/css">
のように二つあっても良いのです。
　たとえば、この場合、
default.cssでテキストインデントやフォントのサイズ、背景を指定して
standardD.cssで、配置や枠の大きさなどだけ指定し、standardC.cssで配色を指定する。そうするとより後に出てくるスタイルシートで上書きされ、そうでない指定は継承(カスケード)されます。
　複数(ページ内、要素内、ユーザーを含めて)用意して、それらが順番に継承されるからこそ、カスケードスタイルシート(CSS)なのですから。
　ちなみに私は、
デフォルト (CSS1)
サイト内統一部分・サイト内リンクとか・・ (CSS2)
各テーマのトップページ(ホーム)のデザイン (CSS3)
そのテーマの配置 (CSS4)
そのテーマの配色 (CSS5)
　と分けていて、
Top index.html --- CSS1+CSS2+CSS3
｜-- theme1
｜　　｜-index.html --- CSS1+CSS2+CSS3+CSS4
｜　　｜-page1.html --- CSS1+CSS2+CSS4
｜　　｜-page1.html --- CSS1+CSS2+CSS4
というふうに整理しています。
　好きなときにデザインだけ、あるいは色だけ変えるとか、そうすることで、労力もトラフィックも軽減できますから

お礼

ご回答いただきありがとうございます。
なるほどー。
同じデザインの部分をすべてのページに適用するなら、すべてのcssに同じことを書くのではなく、
一つ用意しておいて、そこから継承すればいいのですね。
だから゛カスケード”というわけですか。
今わかりました。
これは目からウロコですね。

回答No.6

Werner

私は各テーマのスタイルを記述した外部CSSファイルそれぞれの冒頭に
@import url("default.css");
と書いて、HTMLからは1つのCSSファイルを参照するようにしてます。
全てのページに
<link rel="stylesheet" type="text/css" href="default.css">
と書くよりCSSファイルに書く方が数が少ないので。

default.cssでなくdefault2.cssと組み合わせたいページも存在するとかなら
HTMLファイルに書いたかもしれません。

お礼

ご回答いただきありがとうございます。
今回初めて“インポート”というものを聞いたのですが、
だんだんわかってきました。
＞全てのページに
<link rel="stylesheet" type="text/css" href="default.css">
と書くよりCSSファイルに書く方が数が少ないので。
基本は無駄な記述をなくすということですよね。

回答No.5

ORUKA1951

No.3 snowizeさん
＞HTML側からは1種類のスタイルシートしか指定せず、そのスタイルシートが他のスタイルシートをインポートした方がよくないですか？
　いえ、それじゃトラフィックの低減にも管理のわずらわしさの低減にもなりません。巨大なCSSを分割しただけですよね。
　たぶん多くの比較的規模の大きなサイトでは、デザインが共通する部分、あるいは違う部分があると思います。
　たとえば、複数のテーマを持つサイトがあるとします。まあ、先の例と同じなのですが、すこし具体的に書くと。
Top index.html --- 私が管理しているサイトの最上位
｜　　　　　　　　(別にディレクトリ構造に基づかなくても良いけど)
｜-- job/ --------ここには私の本業の話題
｜　　｜-index.html --- そのトップページ(本業のサイトのホームになる)
｜　　｜-page1.html --- １ページ目
｜　　｜-page1.html --- ２ページ目
｜-- books/ --------私の著作物とか
｜　　｜-index.html --- 目次
｜　　｜-book1.html --- 一冊目の紹介
｜　　｜-book2.html --- ２冊目の紹介
｜-- hoby/ --------趣味
｜　　｜-index.html
｜　　｜-page1.html

たとえば、すべてのページに標準的に指定したいものは、default.cssに書いておく。
default.css
　body{ background :*****}
　a[name]{border:none;}
　p{ text-indent: 1em;}
　h1{ font-size: 2em; text-align:center;}
　ul.SiteNavi{ position: absolute;*******}
また、各テーマのトップには目次の役割があるので、その配下のページとはデザインが異なるはずです。
たとえば
　job/index.htmlとjob/page1.htmlは色は同じだけど、デザインが異なる。それで
デザインだけ指定した
　topPage.css
そして、各テーマにごとの、
　bookColor.css

★こうすることで、そのページに必要なCSSが最低限のものになります。
さらに、HTMLも簡単になるのです。
　もしひとつ(importを使っても)のCSSで記述するなら、htmlもtopにあるindex.htmlでは
<h1 class=topPageh1">とか指定する必要があり、これはとてもじゃないけど大変ですし、そもそも、新しいHTMLを起こすたびに、CSSをチェックしてその設定(クラス名とか)を探さなきゃならない。
　しかし、そもそも適用するCSSが限定されるなら
top/index.htmlにおいては、参照されるCSSが、default.cssとtopPage.cssだけです。そして、HTMLにはCSSの為だけのclass属性なんて書かなくて済む。

お礼

ご回答いただきありがとうございます。
今作成しているcssには無駄が多く、class名も似たような名前がたくさんあります。
でも内容はほとんど同じです。
でもこの考え方だとその無駄が省けるというわけですね。

回答No.4

snowize

#3です。
高度な技じゃないですよ。
@import("URL");
でCSSを取り込むことができます。
詳しくは技術解説のページなどをご覧ください。

お礼

ご回答いただきありがとうございます。
わかりました。
使えるように勉強してみます。

回答No.3

snowize

>>2さん
HTML側から2種類のスタイルシートを読み込むより、
HTML側からは1種類のスタイルシートしか指定せず、そのスタイルシートが他のスタイルシートをインポートした方がよくないですか？

お礼

ご回答いただきありがとうございます。
かなり高度な技のようですが、興味あります。
ORUKA1951さん、ご回答いただければうれしいのですが。

回答No.1

yambejp

＞今はテーマやカテゴリーごとにcssを分けている

賢明な判断だと思います。

＞利点、欠点などがあれば教えてください。

利点としては、テーマごとにCSSを用意すれば、HTMLを編集することなく
見た目を大幅に変更できることですね。いわゆるスキンという考え方です。

欠点は管理が面倒なこと、ただし一つのCSSにすべてまとめてしまっても
必ずしも管理は楽にはなりませんが・・・

お礼

ご回答いただきありがとうございます。
これはこれでいいんですね。
確かにあまりcssも増えすぎれば、該当するcssを探すのも大変ですね。