詳しい人求む！

サイトを作る時のcssファイルはいくつ作るのが一般的ですか？

解決済

質問者：sypuimtiz
質問日時：2017/03/10 15:36
回答数：2件

css、html初心者です。
サイトを作るときのファイル構造について、基本的な質問をさせて下さい。
あるサイトを作るのにトップページのtop.htmlファイルと外部cssファイルをそれぞれ１つずつ作りました。
その後、別ページguide.htmlを作成したいのですが、基本的にcssファイルは１つですか？
例えば、top.htmlでは.contentsに対してmagin-top:120pxを、guide.htmlではmagin-top:50pxを指定したい場合は、.contents1、.contents2というように個々に作成していますか？
分かりにくくてすみません。。。
それとも全ページ共通のcssと各ページごとのcssなどを作るのが一般的なのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2017/03/11 14:36

CSS(Cascading Style Sheets)を作成されたのですよね。

なら、Cascading の仕組みをフル活用しているはずです。
一枚にすれば、HTTP要求/提供のステップが一回で済むし、他のページに移動するたびに読み込まなくて済む。CSSはテキストですから読み込む時間はほとんどかかりません。
　　(画像や動画のほうは負荷が大きいですが、それでもアイコンや背景は一枚にしてスプライトという手法を使うのと同じです。小分けして必要な時、都度読むよりあらかじめ全部読ませた方が良い)

　しかし、最近のネットはとても早くなっているので、時間的な問題は気にする必要がないでしょう。
　一枚に書く方が一度読めばよいので速度的には有利です。しかし、メンテナンスは極めて厄介になる。

★管理しやすいので、分ける。

　Cascading の仕組みから、
固定スタイルシートで、すべてのメディアに適用するスタイルを書きます。
　これは印刷にも、スクリーンリーダーにも適用される
screenメディア用のメディア別スタイルシートを書きます。
　screen用優先スタイルシート
★デフォルトのスタイルシートを記述した後、個別のページについては
　そのページだけ適用する場合は、<head>内の<style>要素に記述
　複数枚に適用させる場合は、外部スタイルシートで必要な部分だけを上書き
　　・・Cascading機能を使いシンプルに・・
　　これは、mediaqueryを使う場合も同じです。

　公的なページなどでは、印刷用スタイルシート、代替スタイルシート、スクリーンリーダー用のスタイルシートが必要な場合もあります。

＞.contentsに対して・・guide.htmlではmagin-top:50pxを指定したい場合は
　これはHTMLが間違いです。20年以上前のHTML4.01の時代から「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」となっていて、デザインではなく文書構造をHTMLではマークアップします。HTML5では、<header><section>とか、具体的になりdivは原則使いません。
　また、セレクタの指定も起点セレクタを書くようにしましょう。

　大事なことは、メンテナンス性です。文書構造を担うHTMLとプレゼンテーションを担うスタイルシートを分ける最大の目的は、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
2.4.1 構造とプレゼンテーションの分離
　HTMLは、常に構造的マーク付けを規定するところのSGMLをルーツに持っている。HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

私の場合

1) 固定スタイルシート
　HTMLの<head>への記述
　<link rel="stylesheet" type="text/css" href="/CSS/parmanent.css">

　CSSへの記述
　　html,body{margin:0;padding:0;}
　　h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
　　p{ext-indent:1em;}
　　・・・
2) メディア別優先スタイルシート
　(screen用優先スタイルシート)
　HTMLの<head>への記述
　　<link rel="stylesheet" type="text/css" media="screen" href="/CSSt/screen.css">

　CSSの記述
　　 body{font-famiry:*****;}
　　
3) マニュアル用追加スタイルシート
　(screen用追加スタイルシート)
　HTMLの<head>への記述
　　<link rel="stylesheet" type="text/css" media="screen" href="/CSSt/manual.css">
　　　

4)
　<link rel="Alternate StyleSheet" type="text/css" media="screen,projection,tv" href="/styleSheet/CSS/projection.css" title="プロジェクター用">

5) 印刷用優先スタイルシート
　(print用スタイルシート)
　　<link rel="styleSheet" type="text/css" media="print" href="/styleSheet/CSS/print.css">

6) 個別のページ用
　<head>
　<style type="text/css" media="screen">
　　header nav li a[href="/page2.html"]{color:red;font-weight:bold;}
　　サイトナビで当該のページである場合

とか、
要は、カスケーディングの機能を利用して、メンテナンスが容易になるようにする。そのためのCascading スタイルシートなのですよ。

　時間が取れれば、サンプル作ってみましょう