![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
今までサイトを作ったことがなく、一枚のWebページしか作ってこなかった(習ってこなかった)ので・・・
例えば、このサイトhttp://www.matsuyafoods.co.jp/では、6枚のスタイルシート(開発者のツールによると)が使われているのですが、それぞれのスタイルシートの役割が分かりません。このサイトの場合で言うと、メニュー(gnavi)のスタイルシート、店舗案内のスタイルシート、IR情報のスタイルシートなど、Webページごとにそれ用のスタイルシートを適用しているのかと思っていましたが、そうではないみたいです。さすがに、リセットスタイルシートやベースとなるスタイルシート(header,gnavi,footerなど)は、一枚のスタイルシートで全てのWebページに適用しているということは分かるのですが・・・
No.1ベストアンサー
- 回答日時:
基本的には、まず「サイト全部に共通する部分」があります(default.cssとかcommon.cssとか)。
#開発を委託したりすると、委託先が共通に設定するcssが上位になったりもします(汗
あとは「このデザインの系列のページで共通に使うcss」とか「このページでだけ使うcss」があります。で、JavaScriptでjQueryのプラグインなどを使っていると、そのための専用のcssが必要だったりもしますので、cssファイルの数が膨れあがります。
小変更をしたときに追加された部分のcssが(元のcssファイルを変更せずに)別のcssファイルとして読み込まれていたりなんてこともあります。さすがに本末転倒だと思いますけどね。
ありがとうございます。JavaScriptでjQueryのプラグインなどを使っていると、そのための専用のcssが必要だったりもしますので⇒プロでない人が勉強のために、そのようなサイトを見ると頭がこんがらがってしまいますね。
しかし、サイト全部に共通する部分は基本的にdefault.cssとかcommon.cssとかで書かれていることが分かっただけでも、私にとって大きな前進になったと思います。
No.3
- 回答日時:
サイトの規模、必要なデザインの数などで決めています。
たとえば、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ページが多いほど、そういう管理が必要なんですね。
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_04.png?5a7ff87)
No.2
- 回答日時:
・cssの管理(編集など)をしやすくするため
(一枚だけにすると何がどこに書いてあるか探すのも大変だし)
・ページやディレクトリによって仕様が違うデザイン処理があったりするから
(各ページ毎に必要なものだけ読み込むようにした方が無駄がない)
理由はこのふたつが主だと思います。
あんまり複数にわけても逆に管理がめんどくさくなる場合もありますが、その松屋さんのHPくらいだと適度な分け方ではないかなー。
コメントで区切ってるし、誰がみても分かりやすいcssになってますね。
作った人だけがわかるcssってのは、仕事の面において不親切なので。
分け方はページ毎の場合もあるし、色々。管理しやすい法則で分ける。
ありがとうございました。
一枚だけにすると何がどこに書いてあるか探すのも大変だし⇒私もHTML、4枚を1枚のスタイルシートにまとめたことがあったのですが、自分でも訳が分からなくなりました。ある程度スタイルシートは分けるものだと痛感しました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS CSSでiframe要素の編集 2 2022/10/09 20:53
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
- WordPress(ワードプレス) wordpress cocoon ヘッダーのフォント変換 2 2022/11/22 09:58
- HTML・CSS iPhoneで HTMLファイルを閲覧 3 2023/03/12 02:35
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- その他(IT・Webサービス) 飲食店がWEBサイトを作る利点について 2 2022/06/08 20:19
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssファイルの名称付け
-
外部CSSの記述方法
-
css の適用について
-
CSSでPC用、他のスマホ用、PC用...
-
PHPでHPを書く際のCSSが適応さ...
-
スタイルシート(CSSスタイル)...
-
styleswitcherについて(ページ...
-
PrettierのHTMLの記述変更 link...
-
HTML内の{}の意味
-
スタイルシートファイルのファ...
-
cssで、ボタンのテキスト部分を...
-
どうすればなるんですか?
-
外部ファイルでのスタイルシー...
-
CSSを勉強したいのですが…
-
CSSのことで教えてください
-
htmlについて
-
h1タグについて教えてください。
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cssファイルの名称付け
-
jspにcssを反映させるには
-
サイトを作る時のcssファイルは...
-
複数のhtmlで同じcssファイルを...
-
ディレクトリ構成【「common」...
-
範囲指定印刷での位置(css)
-
cssで、ボタンのテキスト部分を...
-
スタイルシート(CSSスタイル)...
-
定数の定義とかはできますか?
-
cssが反映されません
-
エクセルファイルにCSSを読み込...
-
Dreamweaver のテンプレートで...
-
cssファイルを階層の異なるHTML...
-
一部のページにデフォルトCSSを...
-
ブラウザでプレビューでCSSが反...
-
ドキュメントルートより上の階...
-
HTMLの CSSのファイルというの...
-
CSSファイルの分け方皆様はどの...
-
<LINK> の ID の属性値
-
[Dreamweaver8]テンプレートに...
おすすめ情報