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

スタイルシートについてまだ初心者なため質問させてください。

以下のようにテーブルのボーダーのスタイルを子要素(<table><td>)にスタイルを継承(?)させているのですが、この方法だと子要素の子要素(<table><td><table><td>)に対しても継承されてしまいます。

table.border { border-style:solid; border-width: 1px 1px 1px 1px; border-collapse: collapse; }
table.border td { border-style:solid; border-width: 1px 1px 1px 1px; }

table.border > td {…} という指定の方法もあるようですが、こちらは対応しているブラウザが乏しいようで事実上使用できません。

子要素の子要素に対して以下のクラスを指定しても継承が優先されるためか反映されませんでした。

table.none{border-style:none;}
table.none td{border-style:none;}

HTMLタグに直接以下のように指定しても同様でした。

<table style="border-style:solid;">

どこかのサイトでは継承をリセットする必要があるような事が書いてあったような気がします。

もちろん継承を利用せず<table>および<td>個々にクラスを指定すれば(不必要なタグには指定しなければ)可能だと思いますが、これだと大きなテーブルの場合に非効率で悩んでいます。

どのようにすれば子要素の子要素にスタイルを継承させないようにできるでしょうか?

A 回答 (3件)

微妙に把握してませんがこう?



table.border table.none td {
border:0px none;
}

「css 優先順位」などで検索するといろいろヒットしますよ
    • good
    • 0
この回答へのお礼

以下のコードで上手く行きました!
ありがとうございます!
クラスにクラスを重ねて指定できるんですね。
勉強になりました。

>「css 優先順位」などで検索するといろいろヒットしますよ
ありがとうございます。
いろいろ調べてみます。

<style>

table.border table.none td { border:0px none; }

table.border{ border-collapse: collapse; }
table.border td{ border:1px solid; }

</style>

<table class="border">
<tr>
<td>
TEST
</td>
<td>
<!-- 子要素1 -->
<table>
<tr>
<td>
A1
</td>
<td>
B1
</td>
<td>
C1
</td>
</tr>
</table>
</td>
<td>
<!-- 子要素2 -->
<table class="none">
<tr>
<td>
A2
</td>
<td>
B2
</td>
<td>
C2
</td>
</tr>
</table>
</td>
</tr>
</table>

お礼日時:2007/11/27 20:32

table.none td {


border:none;
}

table.border td{
border:1px solid;
}
より「後に(下に)」書けばいいのでは。
    • good
    • 0
この回答へのお礼

ありがとうございます!
以下のコードで動作しました!
このコードでは「table.none td」を「table.border」の前にもってくるだけで動作しなくなってしまいます。

先に書くか後に書くかで動作が変わるとは思いませんでした…。
勉強になります。

<style>

table.border{ border-collapse: collapse; }
table.border td{ border:1px solid; }

table.none td { border:0px none; }

</style>

<table class="border">
<tr>
<td>
TEST
</td>
<td>
<!-- 子要素1 -->
<table>
<tr>
<td>
A1
</td>
<td>
B1
</td>
<td>
C1
</td>
</tr>
</table>
</td>
<td>
<!-- 子要素2 -->
<table class="none">
<tr>
<td>
A2
</td>
<td>
B2
</td>
<td>
C2
</td>
</tr>
</table>
</td>
</tr>
</table>

お礼日時:2007/11/27 20:36

たとえばこんな風で?



<style>
table.border td table td{
border:0px solid;
}
table.border{
border-collapse: collapse;
}
table.border td{
border:1px solid;
}
</style>

<table class="border">
<tr>
<td>
<table>
<tr>
<td>
test
</td>
</tr>
</table>
</td>
</tr>
</table>

この回答への補足

説明がわかりづらく申し訳ありません。
ソースまでご用意いただきありがとうございます。
はじめからHTMLソースを示せばよかったです。

以下のコードで<table class="none">がうまくいかないので困っています。これを成功させるのはどのように指定すればよいのでしょうか。

<style>
table.none td {
border:0px none;
}
//table.border td table td{
//border:0px none;
//}
table.border{
border-collapse: collapse;
}
table.border td{
border:1px solid;
}
</style>

<table class="border">
<tr>
<td>
TEST
</td>
<td>
<!-- 子要素1 -->
<table>
<tr>
<td>
A1
</td>
<td>
B1
</td>
<td>
C1
</td>
</tr>
</table>
</td>
<td>
<!-- 子要素2 -->
<table class="none">
<tr>
<td>
A2
</td>
<td>
B2
</td>
<td>
C2
</td>
</tr>
</table>
</td>
</tr>
</table>

教えていただいた「table.border td table td」で目的は果たせるのですが、「table.border td table td」の時もあれば、「table.border td table td table td」の時もあるので目的の子要素の階層を動的に指定したいと考えています。
また、同じ階層の子要素でもそのまま継承したいものとそうではないものがあります。

そもそも親要素が優先されるというのがスタイルシートの構造として疑問なのですが、そういうものなのでしょうか…。

補足日時:2007/11/27 17:06
    • good
    • 0
この回答へのお礼

問題は無事解決する事ができました。
ソースまでご用意いただきありがとうございました。
また、最初に回答を書き込んでいただきありがとうございました。

お礼日時:2007/11/27 20:39

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

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

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

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

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で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の方も修正する方法でもよけ...続きを読む

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Q一部CSSを無効にする

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

Aベストアンサー

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

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

Qスタイルの無効化

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

Aベストアンサー

>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 )

>CSSは後から記述したものが優先されますが、

 違います。カスケーディングのルールに従います。カスケーディングスタイルシートのもっとも根幹部分です。

 すべてのスタイルをソートします。
 重要度でソートされます。
  ユーザーの重要宣言>著者の重要宣言>著者の宣言>ユーザーの宣言>デフォルトの宣言
 詳細度が高いものから優先されます。
 出所による宣言
 最後に出現順位

 よって詳細度を高くするか重要宣言で初期値を指定すれば良いです。

body div table tr:nth-child(2n) td {/* 詳細...続きを読む

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

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

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

Aベストアンサー

<select style="width: 200px">

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文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。


人気Q&Aランキング