サイト全体にどのようにCSSを使うのでしょうか？

質問

今までサイトを作ったことがなく、一枚のWebページしか作ってこなかった(習ってこなかった)ので・・・

例えば、このサイトhttp://www.matsuyafoods.co.jp/では、6枚のスタイルシート(開発者のツールによると)が使われているのですが、それぞれのスタイルシートの役割が分かりません。このサイトの場合で言うと、メニュー(gnavi)のスタイルシート、店舗案内のスタイルシート、IR情報のスタイルシートなど、Webページごとにそれ用のスタイルシートを適用しているのかと思っていましたが、そうではないみたいです。さすがに、リセットスタイルシートやベースとなるスタイルシート(header,gnavi,footerなど)は、一枚のスタイルシートで全てのWebページに適用しているということは分かるのですが・・・

回答No.1

shimix · ベストアンサー

基本的には、まず「サイト全部に共通する部分」があります（default.cssとかcommon.cssとか）。

＃開発を委託したりすると、委託先が共通に設定するcssが上位になったりもします（汗

あとは「このデザインの系列のページで共通に使うcss」とか「このページでだけ使うcss」があります。で、JavaScriptでjQueryのプラグインなどを使っていると、そのための専用のcssが必要だったりもしますので、cssファイルの数が膨れあがります。

小変更をしたときに追加された部分のcssが（元のcssファイルを変更せずに）別のcssファイルとして読み込まれていたりなんてこともあります。さすがに本末転倒だと思いますけどね。

お礼

ありがとうございます。JavaScriptでjQueryのプラグインなどを使っていると、そのための専用のcssが必要だったりもしますので⇒プロでない人が勉強のために、そのようなサイトを見ると頭がこんがらがってしまいますね。

しかし、サイト全部に共通する部分は基本的にdefault.cssとかcommon.cssとかで書かれていることが分かっただけでも、私にとって大きな前進になったと思います。

回答No.3

ORUKA1951

サイトの規模、必要なデザインの数などで決めています。
　たとえば、font-familyとか、本文(section)中の<p></p>についてのtext-indent,line-height,margin,backgroundとかは、default.cssやstandard.cssに書いてます。
　その上で、大きなサイトの場合は
骨格を示すもの shape.css
各コンテンツ用に (各ディレクトリのindex.html用のtop.css、(内容ページ用)main.css、(会社情報などの)note.css
色を示すもの　 color.css

　とか・・・・
　色の配色は、color.cssですべて変更できるでしょう。

　これ以外に、(印刷用の)print.css、(携帯電話用の)handheld.css、(スマホ用の)mini.cssとか、いずれにも永続的スタイルシート(default.css)は適用される。
shape.css
div.section{・・・・}
div.section div.aside{font-size:0.9em;}
div.section div.section {margin:0 2em;}

color.css
div.section{color:****}
とか・・

　要は、スタイルシートだけ見て編集できるようにしています。
　あまり長いと一度に読み取れないので、骨格と色を分けるとかもそのため

　いずれにしても、一番大事なのは、HTMLがきちんと書かれていることですが・・・
<div class="left">なんて書かれていたら、泣くことになる。(^^)

お礼

ありがとうございます。

私は、html1枚に対してCSS1枚という感じでほぼ作ってきましたので、色と骨格だけのスタイルシートを作るという発想がなかったです。しかし、サイトのWebページが多いほど、そういう管理が必要なんですね。

回答No.2

k0un0

・cssの管理（編集など）をしやすくするため
（一枚だけにすると何がどこに書いてあるか探すのも大変だし）

・ページやディレクトリによって仕様が違うデザイン処理があったりするから
（各ページ毎に必要なものだけ読み込むようにした方が無駄がない）

理由はこのふたつが主だと思います。
あんまり複数にわけても逆に管理がめんどくさくなる場合もありますが、その松屋さんのHPくらいだと適度な分け方ではないかなー。

コメントで区切ってるし、誰がみても分かりやすいcssになってますね。
作った人だけがわかるcssってのは、仕事の面において不親切なので。

分け方はページ毎の場合もあるし、色々。管理しやすい法則で分ける。

お礼

ありがとうございました。

一枚だけにすると何がどこに書いてあるか探すのも大変だし⇒私もHTML、４枚を１枚のスタイルシートにまとめたことがあったのですが、自分でも訳が分からなくなりました。ある程度スタイルシートは分けるものだと痛感しました。