cssは複数作る？

Question

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

ORUKA1951 · Accepted Answer

＞cssは複数作るものなのでしょうか。　通常はそうです。スタイルシートには、ちょっと別のアングルから説明する、外部スタイルシートには固定スタイルシート　優先スタイルシート　代替スタイルシート　があり、さらにmediaタイプで適用する端末も指定できます。さらに、これらは複数あっても構いません。　たとえば優先スタイルシートにて　　のように二つあっても良いのです。　たとえば、この場合、 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 というふうに整理しています。　好きなときにデザインだけ、あるいは色だけ変えるとか、そうすることで、労力もトラフィックも軽減できますから

Werner · Answer

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

ORUKA1951 · Answer

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属性なんて書かなくて済む。

snowize · Answer

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

snowize · Answer

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

yambejp · Answer

＞今はテーマやカテゴリーごとにcssを分けている

賢明な判断だと思います。

＞利点、欠点などがあれば教えてください。

利点としては、テーマごとにCSSを用意すれば、HTMLを編集することなく
見た目を大幅に変更できることですね。いわゆるスキンという考え方です。

欠点は管理が面倒なこと、ただし一つのCSSにすべてまとめてしまっても
必ずしも管理は楽にはなりませんが・・・

cssは複数作る？

＞cssは複数作るものなのでしょうか。

私は各テーマのスタイルを記述した外部CSSファイルそれぞれの冒頭に

No.3 snowizeさん

#3です。

>>2さん

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

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング