【無料配信♪】Renta !全タテコミ作品第1話

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ファイルを直接編集し、定義を消す、もしくはコメントアウトする以外に、この定義を適用させない方法がありますでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (2件)

>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 … )
    • good
    • 1
この回答へのお礼

ありがとうございました。

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

非常に助かりました。

お礼日時:2012/02/29 17:27

補足です。


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

上書き用のスタイルシートを用意するときも、詳細度や重要度を上げれば、同様です。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q一部CSSを無効にする

数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか?
CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
目的のものに辿りつけず…困っています。宜しくお願いします。

Aベストアンサー

 とりあえず下記サイトは読まれましたか?下記は比較的わかりやすく説明していると思います。

参考URL:http://www.tohoho-web.com/css/basic.htm

QCSSの部分リセットについて

サイト全体に影響するCSSでtableのボーダーを非表示に指定しています。
ところが、一部分のみCSS無指定状態のtableを表示する必要が出てしまいました。

該当するtableに別クラスを割り当てて、その部分だけを個別に指定しようと思いましたが、実際見てみると、CSS無指定状態とは微妙に見た目が異なってしまいます。


====CSS内容====
table {
border: 0px none;
}
td {
border: 0px none;
border-collapse: collapse;
}

/*普通にtableを書くとボーダーが消えてしまうので個別に指定*/
.reset table{
border: 3px ridge;
}
.reset td{
border: medium ridge;
border-collapse: collapse;
}

====HTML====
<div class="reset">
<table>
<tr>
<td>ああああああ</td>
<td>ああああああ</td>
</tr>
<tr>
<td>いいいいいい</td>
<td>いいいいいい</td>
</tr>
</table>
</div>


元のtableの指定はサイト全体に影響が出てしまうため、修正することができません。
いまさらながらものすごく後悔していますが・・・。

また、今後の使いまわしを考えると、IDの指定もできません。
無理矢理何とかできないかと思い、上記の方法を取りましたが、やはりうまくいきません。

理想としては、指定した箇所のみCSSの影響がなくなるということですが、いろいろ調べても見つかりませんでした。
根本的に作り直しした方がいいのは理解していますが、何か方法があればと思い質問させていただきました。

どなたか良い案がありましたらお助けください。

サイト全体に影響するCSSでtableのボーダーを非表示に指定しています。
ところが、一部分のみCSS無指定状態のtableを表示する必要が出てしまいました。

該当するtableに別クラスを割り当てて、その部分だけを個別に指定しようと思いましたが、実際見てみると、CSS無指定状態とは微妙に見た目が異なってしまいます。


====CSS内容====
table {
border: 0px none;
}
td {
border: 0px none;
border-collapse: collapse;
}

/*普通にtableを書くとボーダーが消えてしまうので個別に指定*...続きを読む

Aベストアンサー

多分色を完全に CSS 未指定状態と同一にすることは不可能でしょう。
ただ、未指定状態へと可能な限り近づけることならば可能です。

.reset table,td{
border: 3px outset;
}
.reset td{
border:1px inset;
border-collapse: collapse;
}

上記の CSS を指定されたテーブルは、下の HTML に似た表示状態になりました。
(上の CSS を下のテーブルに指定するという意味ではないので注意)
Gecko エンジンを使用したブラウザでは枠線の色が若干違うものとなりましたが、
IE と Opera では未指定状態と同じスタイルで表示されることを確認しました。

<table border="3">
<tr>
<td>ああああああ</td>
<td>ああああああ</td>
</tr>
<tr>
<td>いいいいいい</td>
<td>いいいいいい</td>
</tr>
</table>

QCSSを一部無効にしたい

CSSを一部無効にしたい

今HTML4.01 Transitionalを使用してページを作成しているのですが、
外部cssで、以下のような全体にかかるスタイルを適用しています。
* {
border:0 none silver;
font-style:normal;
font-weight:normal;
}

このなかのborder: 0 none silver だけを
その外部のcssをいじることなく、html上で無効にしたいのです。
HTMLの方でstyleを使うことで上書きすることは可能なのですが、無効にするだけのやり方が分からず、質問させていただきました。よろしくお願いします。
(カテゴリを間違えていたため再投稿させて頂きました)

Aベストアンサー

同じCSSをそのHTMLで上書きすれば、いいだけのことです。
外部CSSでやるなら、一番最後にリンクさせれば上書きできます。
HTML内でやるばあいも、最後に書きます。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q特定範囲内のCSSの継承を断ち切る(解除する)には?

別ページにてTinyMCEというWeb上のWYSIWYGエディタにて作成したHTMLをDBへ登録し
それをCSSでデザインされたページ中に読み込み、上位のCSSの継承をさせずに表示させたいのですが
親が読み込んでいるCSSの影響ですべてのタグに影響が出ており困っています。
読み込んだデータの範囲だけCSSの継承をさせないようにする方法はないのでしょうか?

考えられる方法として、インラインフレームにして埋め込む方法が一番現実的かもしれないと思いますが
他に簡単な方法があればご教授していただけるとありがたいです。

当方環境は以下の通りです
サーバー:RedHatLinux + Apache + PostgreSQL
     PHP4, Smarty...
対象ブラウザ:IE6,7

よろしくお願いします。

Aベストアンサー

こんにちは

<style type="text/css"><!--
.contents div { background-color:blue; }
#database div { background-color:red; }
--></style>

<div class="contents">
<div>本文</div>
<div id="database">
<div>DB本文</div>
</div>
<div>本文続き</div>
</div>

もしくは

<div class="contents">
<div>本文</div>
</div>
<div id="database">
<div>DB本文</div>
</div>
<div class="contents">
<div>本文続き</div>
</div>

とか?

あとはタグ名指定のCSSではなくclass名指定とかid名指定にするとか?
<style type="text/css"><!--
.d1 { background-color:blue; }
#d2 { background-color:red; }
--></style>

<div id="d2">本文1</div>
<div class="d1">本文2</div>
<div>DB本文</div>
<div class="d1">本文2続き</div>

こんにちは

<style type="text/css"><!--
.contents div { background-color:blue; }
#database div { background-color:red; }
--></style>

<div class="contents">
<div>本文</div>
<div id="database">
<div>DB本文</div>
</div>
<div>本文続き</div>
</div>

もしくは

<div class="contents">
<div>本文</div>
</div>
<div id="database">
<div>DB本文</div>
</div>
<div class="contents">
<div>本文続き</div>
</div>

とか?

あとはタグ名指定のCSSではなくclass名指定と...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QCSSの適用を一部だけ除外したい。

aspサービスのカートのデザインを修正する中で、html側は固定で触れず、
cssのみで修正の必要が有る箇所について困っています。

class="a"のみが付いているdivを消すために、

.a { display:none;} 

としたのですが、こことは別のdivにも class="a b" とaが含まれる形で記述されています。

class に a b 両方ついているdivのみ除外する指定の仕方はありますでしょうか?
:not()を使用して色々行なって見たのですが、思うようにいかないので質問します。

宜しくお願いします。

Aベストアンサー

.aであって.bでないものを選択するには
.a:not(.b)
とできます。

また、クラスがaのみであるものを選択するには
[class="a"]
とすればいいです。

↓にサンプルを示します。
http://jsfiddle.net/u4wes5b5/

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。


人気Q&Aランキング