- ベストアンサー
CSSで：反映されません
quadsの回答
2. はクラスセレクタを指定しているので 2. の方が優先度が高そうに思えますが、 1. の方が優先度が高いので 2. が反映されていない。という事が起こっています。 この優先度を個別性と言います。 個別性はセレクタで決まります。 idの数×100 classの数×10 要素の数×1 というような感じです。 ●1. div#contents td{background-color: #EEEFEF; } div#content td 要素 id 要素 なので1.のスタイル指定の個別性は102です。 ●2. td.hdata{background-color: #F3F5F4; } td.hdata 要素 class なので、2.のスタイル指定の個別性は11です。 指定されているプロパティで競合（同じ指定）がされている場合は、個別性の高い方が優先されて適用されます。 なので、クラス指定だけで 2. を指定しても 1. の指定が優先されてしまい、反映されないわけです。 この状態であれば、>>#2さんのようにdiv#contentsの子孫セレクタとして指定しましょう。 この個別性が等しい時に、スタイルの順序が優先度に関わってきます。 因みにその他については、style属性は100の個別性。 スタイルシート自体については以下のようになります。 １．!important宣言つきユーザースタイル ２．!important宣言つき作成者スタイル ３．作成者スタイル ４．ユーザースタイル ５．ブラウザスタイル 優先度は順序だけではない。ということです。 それでは頑張って下さい。 # 参考:Web標準の教科書 # http://www.cybergarden.net/webstandards/campaign.html
関連するQ&A
- ｃｓｓで一個のテーブルだけにデザインを反映したい
ｃssの編集で、テーブルすべてに反映されてしまって困っています。 下記は書籍のサンプルを抜粋したものですが、 /*--------------------------- ▼テーブル -------------------------- */ table { background-color:#000033;} th { background-color:#005890; color:#ffffff; } td { background-color:#ffffff; color:#333333; } /*--------------------------- ▲テーブル -------------------------- */ という設定にしたら、すべてのテーブルに反映されました。 このテーブルだけ、という風にしたいのですが、スタイルシート側を どうしたらいいのでしょうか？ ちなみに反映したいhtmlファイルのテーブルのソースは下記の感じなのですが、 div とか postとかをtableの前に持っていけばいい？みたいなところまで 調べてわかっているのですが、まったくの初心者でなかなかうまくいきません。 <div class="post"> <table width="400" border="0" cellspacing="1"> ・・・略・・・ </table> </div>
- ベストアンサー
- HTML
- CSS-paddingが反映されません
入れ子にしたCSSなのですが中にいれた方のボックスのpaddingが反映されません。 CSS---------------------------- #main { width:540px; float:left; background-color: #FFFFFF; padding-right: 25px; height: 100%; } #main2 { width:500px; background-color: #FFFFFF; padding-right: 20px; padding-left: 20px; } HTML---------------------------- <div id="main">□□□□□□□□□□□□□ <div id="main2">□□□□□□□□□□□□□</div> </div> 「main2」というボックスの左右に余白を作りたいのです。 ご教授ください。
- 締切済み
- HTML
- シンプルなコードなのにテーブルにCSSが適用されない・・・
今回思い悩んで質問させて頂く事となりました。 すごい単純に書いてるつもりなのですが テーブルに着色 （青） （赤） が適用されません。 当方、本一冊の独学でやっているので大ポカと思うので ご指摘頂ければと思います。 以下コードです。 ------------------------------------------------ <title>無題ドキュメント</title> <style type="text/css"> <!-- #blue tr {background-color:blue;} #blue td {background-color:blue;} #red tr {background-color:red;} #red td {background-color:red;} --> </style> </head> <body> <table width="200" border="1"> <div id="blue"> <tr><td> </td></tr> </div> <div id="red"> <tr><td> </td></tr> </div> </table> </body> Dreamweaver上では着色されるのですが・・・ どなたかご教授お願い致します。
- ベストアンサー
- HTML
- mac＆winのsafari4.03にてtableタグのmarginの挙動がおかしい件
htmlとcssは下記です。 tableタグを括っているdivにmarginが適用されていないにも関わらず、 tableの上下の要素にはmarginが適用されています。 どなたか理由がわかる方はいらっしゃるでしょうか。 よろしくお願いいたします。 firefoxだと思ったとおりに動いてくれるのですが。。 ----------------------------- <style> #wrap { background:#F36;} .inner { background:#6CC;} .foot { background:#36F;} table { border-spacing:0; border-collapse:collapse; margin:10px; } td { border:1px #000 solid;} </style> <div id="wrap"> <div class="foot">あああ</div> <div class="inner"> <table> <tr><td>ほげ</td></tr> </table> <!-- ///.inner --></div> <div class="foot">あああ</div> <!-- ///#wrap --></div> -----------------------------
- ベストアンサー
- HTML
- cssで<div>にpaddingを指定したとき
下のように、ｃｓｓで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に７４０pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか？ また、こうなるのは、私だけなのでしょうか？ <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>
- ベストアンサー
- HTML
- CSSでメニューバー
初心者の質問ですいません。 CSSでこのようにボックス分けして * { margin : 0 ; padding : 0 ; } body { width : 100% ; } #my_body{margin:0 auto; width:875px;} #my_header { width : 100% ; height : 80px ; } #my_header2{ width : 100% ; background-color: #0080ff;} #my_navigation{float:left; width:150px; background-color: #0080ff; min-height: 1000px;} #my_contents{float:left; width:725px; background-color: #e5f6ff; min-height: 1000px;} #my_footer { width : 100% ; clear : both ; background-color: #0080ff; } HTMLのコード <div id="my_body"> <div id="my_header">一番上のタイトルとグラデーション</div> <div id="my_header2"> グラデーション <style type="text/css"> body { background-image: url("縦長の写真"); background-repeat: repeat-x; } </style> メニューバー <form> <input type="button" value="" class="li01" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li02" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li03" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li04" style="float:left;" onClick="URL'" /> <input type="button" value="" class="li05" onClick="URL'" /> </form> </div> 左のメニューバー <div id="my_navigation"> <div id="mynavi"> </div> </div> 本文 <div id="my_contents"> <div id="mymain"> </div> </div> フッダー <div id="my_footer"></div> </div> これで、my_header2で指定したグラデーションがメニューバーの両側に表示されると思うのですが、グラデーションが表示されません。 初心者なので根本的な間違えを起こしていたらすみません。 なぜ表示されないか教えていただけませんか。 長文失礼しました。
- 締切済み
- HTML
- CSS:3カラム センター固定
質問させてください。 コンテンツを挟んで左右違う背景をつけたウェブサイトを作ろうと思います。 3カラムのうちセンターのカラムだけは900px固定の中央配置で 左右のカラムはウィンドウ幅に合わせて可変幅にしたいのですが、 HTMLを <div id="left_box"> <!-- left background --> </div> <!-- /left background --> <div id="main"> <!-- main contents --> <div id="header"></div> <div id="contents"></div> <div id="footer"></div> </div> <!-- /main contents --> <div id="right_box"> <!-- right background --> </div> <!-- /right background --> としたときのCSSの適用の仕方について教えてください。 左右カラムには縦に長い異なった画像をbackground-imageで 横にタイルしていく方法にしようと思っています。 よろしくお願いいたします。
- ベストアンサー
- HTML
- CSS ＜div＞の入れ子が反映されない
＜div＞要素を使ってレイアウトを考えています。 いくつかのBOXを一まとめにして中央表示にしようと思うのですが 一まとめにする為のdiv要素が全く反映されません。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { padding : 0px ; margin : 0px ; } #kihon { background:#ff0000; width : 752px ; margin : 0 auto ;} #header { width : 750px ; background: #ff00ff ; } #main { float: left; width: 500px; background: #0000ff ; } #menu { float: left; width: 250px; background: #00ff00 ; } #footer { clear : both ; width : 750px ; background: #000000 ; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <body> <div id="kihon"> <div id="header">aaa</div> <div id="main">aaa</div> <div id="menu">aaa</div> <div id="footer">aaa</div> </div> </body> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 上の記述で、<div id="kihon">が全く反映しません。 一応一まとまりにはなるのですが、左上に固まって表示されるだけです。 自分でも色々調べたのですが調べ方が悪いのか原因が全く分かりません。 知り合いにHP作成の知識がある人がおらず相談が出来ないので こちらでお力を貸して頂きたく投稿させていただきました。 よろしくお願いいたします。
- ベストアンサー
- HTML
- FireFoxでCSSのボーダーが反映されません
FireFoxでのCSS表示について教えて下さい。 現在、IEでは見れるものがFireFoxで反映されておりません。 どこかに原因があるとは思うのですが、見つからないのです。。。涙 Bodyとページ全体のCSS、及び問題箇所のCSSを記述します。 #body { margin: 0px; width: 100%; padding: 0px; border: 0px; height: auto;} #page { background-color: #ffffff; width: 746px; height: auto; margin: 0px; padding: 0px; border-collapse:collapse; border: 0px; border-spacing:0px;} #page td {line-height: 120%; font-size: 12px; color: #000000;} #contents1 {width: 746px; border-collapse:collapse; border-spacing:0px; margin:0px 0px 5px 0px;} border: 1px solid #666633; #contents td {font-size: 12px; line-height: 120%; color: #000000; padding-top: 2px; padding-bottom: 2px;} #contents2 {width: 350px; height: 45px;} #contents2 td { border: 1px solid #999999; font-size: 12px;} ※contents1は外枠のみボーダーカラーをつけたいと思います。 contents2では、tdのみ枠をつけて、外枠は表示させたくありません。 (大枠の中にいくつか枠付きの行が表示される状態にしたいです) idではなくclassにする方が良いのでしょうか？ CSSについては独学なので、記述もほとんどDW頼りです。 参考サイトなどご存知でしたら教えて下さい。。。 以上、よろしくお願いいたします。
- ベストアンサー
- CSS
- CSS初心者です。至急お願いします！
現在CSSでHP制作に挑戦しています。 自分なりに調べながら制作していたのですが、どうしても２点だけ上手くいきません。 ●サイト全体を中央表示 （widthを指定して左右のmarginをautoにすればブロック要素をセンタリング出来る、というのは理解しています。） ●SCCでロールオーバー表示 この2点です。 文章が下手くそなので、キャプチャを貼らせていただきました。 現在の作業画像です。 見にくいので… 【HTML】 <head> <link href="main_box.css" rel="stylesheet" type="text/css"> </head> <body topmargin="0"> <div id="bg"> <div id="head">熊本県でお風呂のリフォーム・修理をお考えの方はお気軽にご相談ください。</div> <div id="rogo"></div> <table width="1024" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="menutop"></td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </body> 【CSS】 #head { font-size: 12px; color: #FFFFFF; background-color: #000000; background-position: center top; text-align: left; margin: 0px; padding: 10px; height: 32px; width: 1024px; } #rogo { background-repeat: no-repeat; height: 70px; width: 1024px; background-image: url(img/rogo.gif); margin: 0px; background-position: center top; margin-left:auto; margin-right:auto; } .menutop { background-image: url(img/top.gif); background-repeat: no-repeat; display: block; height: 37px; width: 78px; position: static; } .menutop a:hover{ background-image:url(img/top2.gif) } #bg { margin: 0 auto; margin-top: 0px; background-color: #FFFFFF; width: 1024px; background-position: center top; } です。 情けない事に、どこが間違っているのか全くわかりません。 アドバイスをいただけると幸いです。 現在Macromedia Dreamweaver MXを使用しています。 ちゃんと保存しているのですが、もしかしたら、修正後のCSSがHTMLに反映されていないだけ…？ そんな時はどうやったら反映されるでしょうか？ ちなみにコチラのサイト様を参考にさせていただいています。 http://hac-design.com/ よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
quadsさん、お礼が遅くなってしまい申し訳ございません。 大変分かりやすく参考になるアドバイスをいただきありがとうございます。 お陰様で「個別性」を理解することができ、考慮しながらのStyle設定ができるようになりました。 本当に良いアドバイスをいただき大変勉強になりました。 どうもありがとうございました。