- ベストアンサー
外部スタイルシートでスタイル継承は可能？
- 外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか？
- 例を挙げながら、継承とオーバーライドの方法について説明します。
- 具体的な実装方法として、mainクラスを継承したsub1クラスとsub2クラスの使用例を示します。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
継承については、スタイルシートの基本中の基本でここを理解していないと決してスタイルシートは使いこなせません。 スタイルシートの継承については、継承されるプロパティとそうでないプロパティがあってそれを理解しておけばよい。 ★カスケード：上書きされるか否かは、詳細度と優先順位の話で継承とは別次元の問題です。 具体的な例をあげるとわかるかな？？ たとえば次のようなHTMLがあるとします。 ★わかりやすいように全角スペースでインデントされているのでテストするときは、全角スペースをタブに変換すること★ <body> <h1>見出し</h1> <div class="main"> <h2>見出し(2)</h2> <div> <p>段落</p> <p>段落</p> </div> <div class="memo"> <p>段落</p> <div> <p>段落</p> </div> </div> <div class="note"> <p>段落</p> </div> </div> <p>段落</p> </body> ひとつのスタイルシートに、 div div{color:gray} div.note{color:magenta} /* 詳細度11 */ div.main div.note{color:blue} /* 詳細度22 */ div div div{color:red} /* 詳細度3 */ div div.main div{color:green} /* 詳細度13 */ div.main p{color:black;} /* 詳細度12 */ body{color:pink} /* 詳細度1 */ div.memo{color:skyblue} さて、colorは継承されるプロパティですからどのように解釈されるでしょう。 例に挙げられたHTMLが <div class="main"> <div class="sub1">左寄せ＆赤字にしたいあいうえお</div> <div class="sub2">センタリング＆青字にしたいあいうえお</div> </div> や <div class="main sub1">左寄せ＆赤字にしたいあいうえお</div> <div class="main sub2">センタリング＆青字にしたいあいうえお</div> だと簡単で、いずれも div.main{color:red;text-align:center} div.sub1{text-align:left} div.sub2{color:blue} ですみます。(詳細度が同じだと後出の物で上書きされる。) ★最低限仕様書には目を通しておこう 6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
お礼
ご回答ありがとうございます。 非常に勉強になりました！
- think49
- ベストアンサー率59% (285/482)
「.main をprototypeとして、他のクラスセレクタにスタイルを継承させたい。」 その発想に至った気持ちは分かりまが、既存のCSSだけでは実現できないと思います。 CSSで行われる継承は「親要素からの継承」を指していて、それ以外で似た機能は「カスケード」ぐらいです。 この2つを上手く利用してください。 -------- <style type="text/css"><!-- .main { color : red; text-align : center; } .sub1 { color: blue; text-align : left; } .sub2 { color : green; } --></style> </head> <body> <div class="main sub1">あいうえお</div> <div class="main sub2">かきくけこ</div> -------- 値わりあて，カスケード処理，継承 - CSS2リファレンス http://hp.vector.co.jp/authors/VA022006/css/cascade.html
お礼
できました！ ありがとうございます。
■CSSと継承 タイポグラフィーに関する部分は継承します。 http://css.eweb-design.com/0108_bsc.html ■ＣＳＳのネストはスペースで。。 △はスペース .main△.sub { } これで、意味わかりますよね。。
お礼
ご回答ありがとうございます。
関連するQ&A
- スタイルシートで継承のような使い方は出来ますか？
td{ width: 20px; } td.main{ text-align: center; } td.sub{ text-align: center; } のようにスタイルシートを作成して mainもsubもwidth: 20px;を実現させれるような書き方は スタイルシートで出来るのでしょうか？
- ベストアンサー
- HTML
- スタイルシート 外部ファイルについて質問です。
スタイルシート 外部ファイルについて質問です。 レイアウト用のスタイルシート <style type="text/css"> <!-- .outer { width:; background-color:; padding:15px; margin:0 auto 0 auto; } .menu { float:left; width:20%; background-color:; height:100%; } .main { float:right; width:70%; background-color:; height:100%; } .clears{ clear:both; } --> </style> を、外部ファイルに移したいのですが、やり方が分かりません。 現在ページ内で <div class="outer"> <!-- 左スタイル 開始 --> <div class="menu"> 文章など </div> <!-- 右スタイル 開始 --> <div class="main"> 文章など </div> <!-- 右スタイル おわり --> <br class="clears"> </div> <!-- 左右スタイルシート おわり --> という方法で表記しています。 外部ファイルへの移し方、外部ファイルの中身をどうしたらいいか、 お手数ですが、教えていただけると幸いです。
- ベストアンサー
- ホームページ作成ソフト
- 外部スタイルシートは同じなのですが…
こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記／／／ <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div> ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス／設備</h2> ○○○徒歩３分<br /> 駐車場2台（バリアフリー）<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright © 2007 All Rights Reserved</div> </div> </body> CSSは下記／／／ * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか？ リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- スタイルシートの外部リンク方法は間違っていますか？
外部ＣＳＳファイルからＨＴＭＬファイルへリンクしてみましたが 文字化けの羅列になります ページのレイアウトの枠組みなのですが homepageフォルダにindex.html style.cssの2つのファイルを作成し style.cssのファイルの中に body { text-align:center; } #outline { width:750px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .main { width:480px; float:right; } .side { width:260px; float:left; } .c-both { clear:both; } と記述しtext2.cssと名前を付けたカスケードスタイルドキュメントを入れてあります これをＨＴＭＬに <html> <herd> <link rel="styleseet" href="style.css" type="text2.css"> </herd> <div id="outline"> <div class="header"> タイトルなど </div><!-- end header --> <div class="outline-marign"> <div class="main"> メインスペース </div><!-- end main --> <div class="side"> サイド </div><!-- end side --> <div class="c-both"><br></div> </div><!-- end outline-marign --> <div class="footer"> フッターなど </div><!-- end footer --> </div><!-- end outline --> </html> のように記述しました リンク方法はこれで間違えていますでしょうか？ ブラウザで見ると文字化けの羅列です ＣＳＳをＨＴＭＬに組み込むときちんと表示されるのでブラウザの問題ではない初歩的ミスだと思うのですが 御教授お願い致します
- ベストアンサー
- その他（インターネット・Webサービス）
- 外部スタイルシートが読み込めない
こんにちは。 外部スタイルシートが読み込めず 困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。 もちろん同じディレクトリで あり何度も確認しています。 ブラウザは、IE7です。 ヘッダー部分に スタイルシートを書くと 当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。 何が悪いのか、 全くわかりません。 何か分かる人がいましたら、 よろしくお願いします。
- ベストアンサー
- HTML
- 外部スタイルシートは分ける？
外部スタイルシートを分けるのかそれともまとめるのか？ もしくは分けるべきなのかまとめるべきなのかがわかりません。 index を含む全ページに共通の class 指定があれば、１つの外部でいいですが、 各ページ固有の class 指定があった場合これは分けたほうがいいでしょうか？ つまり、 <link href="main.css" rel="stylesheet" type="text/css"> と全ページに置き、全ての指定をここに入れるのか、それとも <link href="main.css" rel="stylesheet" type="text/css"> <link href="a.css" rel="stylesheet" type="text/css"> として共通の指定と、各ページ固有の指定は分けたほうがいいのか、 そのあたりがわからなくて困ってます。 前者だと１つファイルでいいとは思いますが、長くなってしまいますし、 ページによっては必要ない部分まで読み込むことになります。 多分一長一短で好み次第ということにはなるかと思いますが、 実際にどちらの方法でやっていて便利だという経験をお聞かせいただければ、 大変ありがたく思います。よろしくお願いします。
- 締切済み
- その他（プログラミング・開発）
- 外部スタイルシートをブロックによって使い分ける方法？
htmlとstylesheetの初心者です。スタイルシートの書き方について教えてください。 例えば <div class="style1"> <!-- または <div id="style1"> --> ここでは外部スタイルシート style1.cssを使用 </div> ここではデフォルトのスタイルシートを使用 <div class="style2"> <!-- または <div id="style2"> --> ここでは外部スタイルシート style2.cssを使用 </div> のようなことをしてブロックごとに外部スタイルシートを使い分けるようなことができるのでしょうか？もしできるようならその方法をご教示ください。 style1.cssとstyle2.cssでブロックごとの見栄えを変えたいのですが・・よろしくお願いします。
- ベストアンサー
- HTML
- これもスタイルシートっていいますか？
<div style="text-align:left;"> 文字を 左に寄せる </div> このようなタグはスタイルシートというのでしょうか？ style= を使ってるからスタイルシートですか？
- ベストアンサー
- HTML
- 外部スタイルシートへの記入方法について
外部スタイルシートへの記入方法について 下記ボックスを利用したいのですが 外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。 どなたか詳しい方にご教授願えないでしょうか、 よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と 本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。
- ベストアンサー
- CSS
- 外部スタイルシートでのスクロールバー
Dreamweaver MX 2004でサイトを作成しています。 外部スタイルシートでスクロールバーの色を変更したいのですが 適用されなく困っています。 -------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="pro1"> -------------------------------------------------- 外部スタイルシート（style.css) body { scrollbar-base-color:#efefbd; scrollbar-arrow-color:#efefbd; scrollbar-darkshadow-color:#efefbd; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; } ------------------------------------------------- わかる方がいらっしゃいましたら、お願いいたします。
- ベストアンサー
- ホームページ作成ソフト
お礼
できました！ ありがとうございます。