- ベストアンサー
外部スタイルシートをブロックによって使い分ける方法？
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）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (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)
お礼
詳しい説明をありがとうございました。お陰でよく理解できました。説明が悪く申し訳ありませんでしたが、質問の趣旨は以下のようなものでした。 <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> スタイルシートが一つであれ、複数であれ上記のようにすればブロック毎にスタイルを使い分けるられることがわかりました。