- ベストアンサー
外部スタイルシートをブロックによって使い分ける方法？
htmlとstylesheetの初心者です。スタイルシートの書き方について教えてください。 例えば <div class="style1"> <!-- または <div id="style1"> --> ここでは外部スタイルシート style1.cssを使用 </div> ここではデフォルトのスタイルシートを使用 <div class="style2"> <!-- または <div id="style2"> --> ここでは外部スタイルシート style2.cssを使用 </div> のようなことをしてブロックごとに外部スタイルシートを使い分けるようなことができるのでしょうか？もしできるようならその方法をご教示ください。 style1.cssとstyle2.cssでブロックごとの見栄えを変えたいのですが・・よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
「ブロックごとに外部スタイルシート」を使い分けることは できないと思います。 idとclassの違いを理解していれば、その必要がないと思います。 質問者の意図に合わないかも知れませんが。 ↓サンプル <html><head> <style type="text/css"> #header h3.c1{color:blue;} #header h3.c2{color:orange;} #contents h3.c1{color:green;} #contents h3.c2{color:purple;} div#contents{color:red;} #footer h3.c1{color:olive;} #footer h3.c2{color:maroon;} </style> </head> <body> <div id="header"> <h3 class="c1">header_c1<h3> <h3 class="c2">header_c2<h3> </div> <div id="contents"> <h3 class="c1">contents_c1<h3> <h3 class="c2">contents_c2<h3> <h3>contents<h3> </div> <div id="footer"> <h3 class="c1">footer_c1<h3> <h3 class="c2">footer_c2<h3> <h3><h3> </div></body></html> ＃なお理解しやすくするため一部を省略、またお薦めできない インターナルスタイルシートを利用しています。
その他の回答 (2)
- tunedriver
- ベストアンサー率23% (3/13)
え～っと多分一番一般的なのが、外部スタイルシートを複数作ってそれを振り分けるスタイルシートを一枚作る方法です。 index.html ＜＜記述部分＞＞ <link rel="stylesheet" href="import.css" type="text/css" media="screen,tv" /> ↓ import.css ＜＜記述部分＞＞ @import "style1.css"; @import "style2.css"; @import "style3.css"; ※import.cssってファイルの中にブロック毎のスタイルシートを読み込んでます。ファイル名は任意で ↓ style1.css、style2.css、style3.css 各ブロックのCSSを記述 ってな感じで2段階で外部スタイルシートを読み込めばOKです。 後はブロック毎に分けたCSSファイルに各ブロックのCSSを分ければOK～ 僕の場合は common.cssってファイルに各ページで共通になる部分はほとんど書いちゃいますが、制作者さんによってはheader.cssとかcontents.cssとかfooter.cssなんて細かくブロック毎に分ける方もいますので、自分なりの方法を模索してみて下さい。
お礼
ありがとうございます。 なるほどこのようにすればスタイルシートの見通しがよくなり、後のメンテナンスが楽になりますね。 色々勉強になります。
- abril
- ベストアンサー率69% (388/560)
「ブロックごとにスタイルシート使う」という意味が： <div class="style1">～</div>にはstyle1.css内で定義されたdiv.style1を適用し、 <div class="style2">～</div>にはstyle2.css内で定義されたdiv.style2を適用する。 という意味であれば、可能です。HTML側の<head>内で下記の様に各CSSファイルを参照するだけです。 <link rel="stylesheet" href="./css/style1.css" type="text/css" media="all" /> <link rel="stylesheet" href="./css/style2.css" type="text/css" media="all" /> ただし、この場合、style1.cssとstyle2.cssに全く同じclass名やid名（セレクタ云々の事も含めて）がない事が必須となります。もし重複していた場合、style1.cssでの設定はstyle2.cssでの設定に上書きされてしまいますので。 ただし、質問者様のやりたい事がいまいちよくわかりません。通常、複数のCSSファイルを使う主な理由としては、全カテゴリ共通のCSSの他に、カテゴリ毎（【TOP】【製品】【イベント】…という具合に）に違うスタイルの住み分けが必要であったり、メディア別にスタイルを変えたいという場合です。 > style1.cssとstyle2.cssでブロックごとの見栄えを変えたい これが同一HTMLファイル内に記述される<div class="style1">～</div>と<div class="style2">～</div>に異なるスタイルを与えたい、というだけであれば、何もそれだけの為に何枚もCSSを使い分ける必要はありません。1つのCSSファイル内で、class名やid名が被らない様に記述すれば済む事です。むしろ、同一HTMLファイル内のコンテンツが単にブロックごとのレベルでわざわざ違うCSSファイルに対応させているのは不自然、というかわかりにくくなるだけですよ。
お礼
詳しい説明をありがとうございました。お陰でよく理解できました。説明が悪く申し訳ありませんでしたが、質問の趣旨は以下のようなものでした。 <html><head> <style type="text/css"> #header h3{color:blue;} #contents h3{color:green;} #footer h3{color:red;} </style> </head> <body> <div id="header"> <h3>header<h3> </div> <div id="contents"> <h3>contents<h3> </div> <div id="footer"> <h3>footer<h3> </div> </body> </html> スタイルシートが一つであれ、複数であれ上記のようにすればブロック毎にスタイルを使い分けるられることがわかりました。