CSSの無効化方法について

このQ&Aのポイント
  • CSSの無効化はできない?上書きは可能だが、定義をなかったことにする方法がわからない
  • CakePHPでのCSSの修正方法について調査中
  • フレームワークのCSSを直接編集せずに無効化する方法を教えてください
回答を見る
  • ベストアンサー

スタイルの無効化

CSSは後から記述したものが優先されますが、上書きではなく、無効化することは不可能なのでしょうか? CakePHPというフレームワークを使って開発をしているのですが、フレームワーク標準のCSSファイルを直接修正せずに、上書き用のCSSファイルにて必要な箇所だけオーバーライドしているのですが、上書きはできても、無効化(定義がなかったことに)する方法がわかりません。 以下、無効化したい箇所の例です。 table tr:nth-child(2n) td { background: #f5f5f5; /* これを無効化したい */ } div.view { float:right; width:76%; /* これを無効化したい */ border-left:1px solid #666; padding:10px 2%; } フレームワークのCSSファイルを直接編集し、定義を消す、もしくはコメントアウトする以外に、この定義を適用させない方法がありますでしょうか?

  • CSS
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

>CSSは後から記述したものが優先されますが、  違います。カスケーディングのルールに従います。カスケーディングスタイルシートのもっとも根幹部分です。  すべてのスタイルをソートします。  重要度でソートされます。   ユーザーの重要宣言>著者の重要宣言>著者の宣言>ユーザーの宣言>デフォルトの宣言  詳細度が高いものから優先されます。  出所による宣言  最後に出現順位  よって詳細度を高くするか重要宣言で初期値を指定すれば良いです。 body div table tr:nth-child(2n) td {/* 詳細度0015 */ background: transparent none no-repeat 0% 0% 値 scroll ;/* 初期値 */ } とか table tr:nth-child(2n) td {/* 詳細度0014 */ background: transparent none no-repeat 0% 0% 値 scroll important! ;/* 初期値 */ } 6.4 カスケード処理(The cascade) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade )

leirbag8
質問者

お礼

ありがとうございました。 カスケーディングのルールは理解していたのですが、 「無効化」という発想にとらわれていて、 「初期化」すればよいことに気が付きませんでした。 非常に助かりました。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

補足です。 順番が問題になるのは、重要度・出所・詳細度が同じ指定が登場したときで、そのときにのみ、後で書かれたもので上書きされます。  スタイルシートの最後なんて大変なので、最初に書いて置いたら良いです。  そのとき、それぞれのプロパティには[初期値(Initial)]がありますから、その値を指定すると初期化されます。 'background-color'  Value: <color> | transparent | inherit  Initial: transparent ・・・・・・ transparentが初期値です。 ★'background-color' ( http://www.w3.org/TR/CSS2/colors.html#propdef-background-color )  他のプロパティについても、同様に、Full property table ( http://www.w3.org/TR/CSS2/propidx.html )からプロパティを選択すると良いでしょう。 (注意)継承されるプロパティについては、既存のCSSに指定がなくても描かなければならない場合があります。継承れるかされないかは、常識の範囲内ですが必要ならそれぞれのプロパティのInherited:項目をチェックしてください。 上書き用のスタイルシートを用意するときも、詳細度や重要度を上げれば、同様です。

関連するQ&A

  • border-style:solidで文字がずれる

    URL用のテキストに枠線をつけました。通常はポインタを当てると下線がでると思いますが、最初に a{ text-decoretion: none; } でもって下線を消しました。 次に a hover{ border-style: solid; padding: 5px; } によって枠線を作りましたところ、ポインタを当てると枠線はでるのですが、<li>のテキストが5pxほどずれてしまいます。 cssで header ul li{ float: left; padding: 0 70px 0 0; } こんな感じになら設定しており、float: left;で左詰めにしているせいでポインタを当てて枠線をが出た時に枠線分だけ右にずれるのが原因ではないかななどと思っていますが、兎にも角にも分かる方がいらっしゃいましたらすみませんが教えてください。

    • ベストアンサー
    • HTML
  • CSSでバックグラウントカラーの途切れを直したい

    CSS初心者です。 CSSでfloatを利用してプロックを左右に並べています。 その際、左のブロックにbackground-colorを指定していますが、右のブロックの情報が多かった場合に、background-colorが途中で終わってしまいます。 どのようにしたらよいでしょうか。 下記のCSSもおかいしところがあるかも・・・指摘をお願いします。 #page { width: 750px; margin-right: auto; margin-left: auto; text-align: left; border: 1px solid #666666; margin-bottom: 0px; } div.blocka{ float: left; background-color: #FFC556; width: 150px; margin:0px 0px 0px 0px; padding:5px ; border-right:1px solid #666666 ; } div.blockb { float: left; margin:0px 0px 0px 0px; padding:10px ; width: 550px; }

    • ベストアンサー
    • HTML
  • スタイルシートでのメニュー作成で

    今回初めてテーブルを使わずスタイルシートでナビゲーションを作成しているのですが 下記の方法ではメニュー内のテキストが左に寄ってしまいます。 出来ればすっかり左寄せではなく、左に10px程空間を入れたいのですがどのようにすれば良いでしょうか。 CSS内の#menuに「margin-left:10px」としても反映されません。 ■■ CSS ■■ #menu {margin: 12px; padding: 0px; width: 180px; border-top: 1px solid #080240; border-right: 1px solid #080240; border-left: 1px solid #080240; font-size: 100%; } #menu ul {margin: 0px; padding: 0px; list-style: none; } #menu li {margin: 0px; padding: 0px; } ■■ HTML ■■ <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> </ul> アドバイスいただけると助かります。 どうぞ宜しくお願い致します。

    • ベストアンサー
    • HTML
  • スタイルシートのせい?IEのせい?

    自己サイトのリニューアルに伴い、今までゴチャゴチャだったHTMLソースをHTML+CSSで簡潔にしたい、と思って作業を開始したのですが、例えば下記のように (外部スタイルシート) TABLE{ padding-top : 5px;padding-left : 5px;padding-right : 5px;padding-bottom : 5px; border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : black black black black;} (HTMLその1) <table width="500"><tbody><tr> <td>あああああ</td> </tr></tbody></table> (HTMLその2) <table border="0" cellpadding="0" cellspacing="0" width="500"><tbody><tr> <td>あああああ</td> </tr></tbody></table> と記述しIE6で確認したところ、その2では思った通りの余白(padding)ができるのに、その1ではできませんよね。 CSSに関するページを読みあさる限りではその1の記述の方が正しいと思われるのですが・・・ CSSでpaddingを指定しているのに、わざわざHTMLで0にしなきゃいけないのが納得いかない・・・ これは私のCSSの記述の仕方が悪いのでしょうか? それともIEの解釈によるもの? 本当は上記のようなレイアウトも<div>でやりたいのですが、まだ抵抗があって・・・ このままでは結局以前と同じゴチャゴチャのHTMLソースになってしまいそうです・・・ ちなみにエディタはHPBv6をメインで使っていますが、最終的にはテキストエディタで手直ししています。 他のブラウザではまだ動作未確認です。

    • ベストアンサー
    • CSS
  • 外部スタイルシートが読み込めない

    こんにちは。 外部スタイルシートが読み込めず 困っています。 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
  • スタイルシートの記述方法に関して。

    スタイルシートで、基本的なデザインは一通り出来ると思っています。 実は今サンプルのスタイルシートを修正しています。 スタイルシートの記述方法に関して、質問があります。 サンプルのスタイルシートの記述方法ですが、要素の記述にて上位の要素を全て記述し、最終的な要素を記載しています。 例として 一番外側の要素を:#wrapper ヘッダー:#header コンテンツ:#content メインコンテンツ:#main サイドコンテンツ:#side とします。 自分の場合であれば、スタイルシート内の記述は div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#header { width: 480px; margin: 0px auto; padding: 0px; } div#content { width: 480px; margin: 0px; padding: 0px; } div#main { float: left; width: 300px; margin: 0px; padding: 0px; } div#side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述していましたが、サンプルでは以下の通りに記述されています。 div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#wrapper #header { width: 480px; margin: 0px auto; padding: 0px; } div#wrapper #content #main { float: left; width: 300px; margin: 0px; padding: 0px; } div#wrapper #content #side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述されています。 上記の記述に、技術的に有利になる点は有るのでしょうか、単に CSS の記述を判りやすくしているだけのように思えます。 上記の記述方法は、一見判りづらいと思いますが、記述している要素が確実に判ると思います。 ただ、その反面 CSS のソースが肥大化します。 上記の記述方法に、他にメリット、デメリットがあるのかアドバイスを頂ければ幸いです。 ちなみに、参考にさせて頂いてる CSS のソースは海外で作られたソースになります。 海外では一般的に使われている記述方法になるのでしょうか。

    • ベストアンサー
    • CSS
  • JavaScript

    自分は、初心者です。 クリックを押すと、右に文字を動かしなさいと言う問題が出ました。 CSSのデーターも渡されています。 どのように、プグラミングしたらよろしいでしょうか? よろしくお願いします。 cssのデーターです。 ===================== *{ font-family: arial,helvetica,sans-serif; } .odd{ margin: 0px auto; padding: 10px; background: #333; color: #FF0; } .even{ margin: 0px auto; padding: 10px; background: #999; color: #00F } h1{ margin: inherit auto; text-align: center; } #source{ float: left; width: 45%; height: 100%; display: inline-block; border: 1px solid red; } #destination{ float: right; width: 45%; height: 100%; display: inline-block; border: 1px solid blue; } .wrapper{ height: 800px; } #buttonForm{ font-size: 20px; text-align: center; display: block; margin: 0px auto 20px; } #button{ padding: 10px 15px; font-size: 20px; } =================

  • CSS dtの中に画像を入れた時に

    CSS dtの中に画像を入れた時に dtの文字が下にずれてしまいます。 画像を消すと問題無いので、画像の指定に原因があると思うのですが・・・。 ■css ---------------------------------------- .sub{ clear:both; width:420px; } .sub dt{ float:left; padding:0 0 0 0; width:200px; height:38px; line-height:38px; background:url(../img/sub-bg2.jpg) no-repeat; font-size:1em; border-top:1px solid #f4e9bf; border-bottom:1px solid #f4e9bf; } .sub dt img{ padding:0 0 0 0; width:4px; height:38px; } .sub-menu dd{ float:right; width:180px; height:38px; line-height:38px; font-size:1em; background-color:#ffffcc; text-align:right; border-top:1px solid #f4e9bf; border-bottom:1px solid #f4e9bf; } ■html --------------------------------------- <dl class="sub"> <dt><img src="../img/a.png" width="4" height="38" alt="aa" />テキスト</dt> <dd>あいうえお</dd> </dl> お分かりになる方、宜しくお願いします。

    • ベストアンサー
    • HTML
  • htmlファイルを開くパソコンによって、サイト内の配置が変わってしまうのを防ぐにはどうしたらいいのでしょうか。

    XHTMLとCSSで趣味のウェブサイトを作成している大学生です。といってもまだ、ネット上にはアップロードはしていない状態です。 サイト作成のためのファイルは、今までUSBフラッシュメモリに保存していたのですがバックアップのために、自分のノートパソコンのハードディスクと大学のパソコンの両方に保存してみました。 試しに自分のノートパソコンでトップページのhtmlファイルを開いてみたら、メインとするべき本文が画面の上に位置しメニューがその下にきてしまっていました。 本来の配置は、メインとする本文を右側にして幅は1000pxに指定しています。メニューなどはその左側に位置させて160pxに指定しています。 しかし、なぜかおかしくなってしまいました。大学のパソコンからhtmlファイルを開くとそんなことにはならないのですが… どうしたらよいのでしょうか。なぜこうなってしまったのかわかりません。 もちろん、両方のパソコンに保存してあるファイルの記述は同じです。 一応、CSSの記述をこちらに書いておきます。 h1{ text-align:center; margin:10px } h2{ text-align:left } li{ text-align:left; line-height:200% } address{ text-align:right; border-top:2px solid; margin-top:1200px } body{ background-color:#ADFF2F; margin:0; padding:0 } .main{ float:right; width:1000px } .menu{ float:left; width:160px; margin-top:80px } .menu ul{ border-top:13px solid #003366; border-left:1px solid #003366; border-right:1px solid #003366; border-bottom:1px solid #003366; margin:0; padding:0 } .menu li{ line-height:normal } .info{ float:left; width:160px; margin-top:0px } .position{ margin-top:450px } どこを直したらよいのでしょうか。どんなパソコンの画面でみても同じ配置になるようにしたいのです。 どうかご教授よろしくお願いします。

    • ベストアンサー
    • HTML
  • Opera、ネスケでcssが崩れます

    DreamWeaverMXで作業しています。 ブラウザはLunascape(Netscapeから生まれたもの?)とIE6を使用、確認していましたが、 アップ後にOpera9、Netscape、Mozila Firefox1.5で確認したところ CSSが崩れていることに気づきました。 左右のフロートが崩れており、この回避方法を調べましたが よくわかりません。。。。 過去の教えて!から、下記URLを参考にしましたが それでも理解できません。涙 http://members.at.infoseek.co.jp/cssbug/detail/opera.html http://www.keynavi.net/ja/bugh/index.html どなたか制作に詳しい方、助けてください…! ---------------------------------------- <link rel="stylesheet" href="web.css" type="text/css" media="screen"> --------------- #body{ margin:auto; width: 700px; padding-top: 0px; } #page{ background:#ffffff 700px; width:700px; font-size:11px; color:#585858; border-right: 1px solid #585858; border-bottom: 1px solid #585858; border-left: 1px solid #CCCCCC; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; } #left{ width:180px; float:left; text-align:left; padding-top: 5px; padding-right: 5px; padding-left: 5px; background-color: #797979; height: 100%; padding-bottom: 10px; margin-left: 1px; border-top-width: 10px; border-top-style: solid; border-top-color: #FFFFFF; } } #right{ width:480px; text-align:left; float: right; margin-right: 3px; padding: 15px; margin-top: 8px; } --------------------------------

    • ベストアンサー
    • HTML