CSSファイルの上手な使い方を教えて下さい。

質問

現在、Webサイトを作成しており20ページくらいになりますが、色や形を変えることが多々あり、そのたびにCSSファイルのコードを修正するのが面倒です。

私はhtmlファイル20枚につき、CSSファイル20枚となっており、すべてのCSSファイルにヘッダーやフッターサイドバーのデザインを施すコードが記述されております。
この方法は非効率でしょうか？

良く考えてみたのですが、全てのページでヘッダーとフッター、サイドバーのデザインが同じなら、ヘッダー、フッター、サイドバーだけのCSSファイルを1つ作成し、メインコンテンツはページの分だけCSSファイルを作成するべきなのでしょうか？
この場合、htmlファイル1枚につき、2枚のCSSを読みこませれば良いのでしょうか？

回答No.1

ORUKA1951 · ベストアンサー

長くなるので
14 スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html )
　特に
　14.3 外部スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.3 )
は目を通してください。はじめはややこしくて何を言っているかわからないと思いますが、この資料をブックマークして都度読むことで、必ず理解できるようになります。

外部スタイルシートには
・固定スタイルシート
・優先スタイルシート
・代替スタイルシート
と
・メディア別スタイルシート
および
・出所
　の区別があります。

・固定スタイルシート
　とは、すべてに有効なスタイルシートです。titleをもちません。
　<link rel="stylesheet" **** >
・優先スタイルシート
　とは、titleを持ち、relの値がstylesheet
　<link rel="stylesheet" **** title="標準">
・代替スタイルシート
　とは、relの値がalternate stylesheetで、title属性を持つもの
　<link rel="alternate stylesheet" **** title="大きな文字">

・メディア別スタイルシート
　media属性を持つもの、
　<link rel="stylesheet" **** title="標準" media="screen">
　<link rel="stylesheet" **** media="print">

および
・出所
　著者が記述したものか、ユーザーが指定したものか
・最重要宣言の有無
　!importantがついているかいないか
・詳細度
　どの程度、適用させる要素が詳しく記述されているか

などを理解しておくと良いです。
というか、スタイルシートのプロパティの記述--color:red;とかより先にしっかりと理解すべき部分です。
　もっと言うと、それらより先に学ぶべき部分です。CSS2仕様書( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )においても、
5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
　はさきに書いてあります。
　実は、CSSの最も重要な--命ともいえる部分なのです。

私は、基本的に次のように書いています。
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/default.css">
<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/dstanderd.css" title="標準">
<link rel="Alternate StyleSheet" type="text/css" media="screen" href="/styleSheet/big.css" title="大きな文字">
<link rel="styleSheet" type="text/css" media="print" href="./styleSheet/print.css">
・・さらに必要に応じて、配置だけ指定したものと色の指定を分けたりしています。

　ここで大事なことは、
「全てのページでヘッダーとフッター、サイドバーのデザインが同じなら、ヘッダー、フッター、サイドバーだけのCSSファイルを1つ作成し」
ではなくて、
「すべてのスタイルで共通なものや基本的なことは、固定スタイルシートに記述し、それ以外は標準スタイルシートに記述する」
です。---当面代替スタイルシートは作らなくて良いですが、印刷しての利用が想定されるページならprint用のスタイルシートは用意すべきでしょう。

　そのためには、すべてのHTMLが共通な文書構造を持っていなければなりません。
　こちらのほうが大事でしょう。

お礼

イメージが掴めてきました！！

まずは、固定スタイルシートと標準スタイルシートを使い分けるようにします！！