- ベストアンサー
CSSで「継承しない」という指定はありますか
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- CSS スタイルを子要素の子要素に継承させたくない
スタイルシートについてまだ初心者なため質問させてください。 以下のようにテーブルのボーダーのスタイルを子要素（<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>個々にクラスを指定すれば（不必要なタグには指定しなければ）可能だと思いますが、これだと大きなテーブルの場合に非効率で悩んでいます。 どのようにすれば子要素の子要素にスタイルを継承させないようにできるでしょうか？
- ベストアンサー
- CSS
- tableの中にtableを作ると、width指定が機能しない
tableの中にtableを作り、中側にあるテーブルの列ごとにwidthを指定したいのですが、うまくいきません。ソースを書いてみます。 例： <table width=300> <tr><td> <table width=100> <tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><tr> </table> </td><td> <table width=100> <tr><td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td><tr> </table> </td><td> <table width=100> <tr><td>ccccccccccccccccccccccccccccccccccc</td><tr> </table> </td></tr> </table> width=300のテーブルの中にwidth=100のテーブルが3つできたのはいいのですが、width=100のテーブルの中に100pxを超える文字列を入れると100pxという値を無視してテーブルが横長くなってしまいます。 これを100pxという値に従わせるにはどうしたらいいでしょうか？
- ベストアンサー
- HTML
- TABLEタグの幅指定
テーブルの幅を厳密に指定したいのですが、 例えば以下のような１行２列のテーブルがあるとき、 <TABLE CELLSPACING=1 CELLPADDING=4 BORDER=0> <TR> <TD WIDTH=100>***</TD> <TD WIDTH=100>***</TD> </TR> </TABLE> このような場合にテーブルタグにWIDTH属性を加えるとすると、 100*2+4*4+1*3=219で、WIDTH=219が正確な値なのでしょうか？ よろしくお願いします。
- 締切済み
- 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
- DreamweaverでのCSSファイル作成について
DreamweaverでCSSレイアウトを行っています。 ボックスモデルハックのIE5.5以前のブラウザ用の値がいつの間にかモダンブラウザ用の値になってしまします。原因がおわかりの方教えてください。 （---------例--------） #main{ margin:20px auto; padding: 30px 50px; width:700px; voice-family: "?"}?""; voice-family:inherit; width: 600px; } html>#main { /* Opera */ width: 600px; } がいつの間にか、 #main{ margin:20px auto; padding: 30px 50px; width:600px; voice-family: "?"}?""; voice-family:inherit; width: 600px; } html>#main { /* Opera */ width: 600px; } といった感じに、widthが全て同じ値になってしまいます。同じような経験がある方いませんか？ ※『?』はバックスラッシュの文字化けです
- ベストアンサー
- HTML
- CSSの継承について
CSSの定義時の継承方法についての質問です。 具体的には、便利な .clearfix というクラスを基に新しいコンテンツクラス、またはIDを作りたいのですが、その様な継承方法はありますか？ 新しいクラスやIDでは、widthやbackgroundを指定したいのです。 C++風に書くと #my_contents : .clearfix { width: 800px; background: #FFF; } こんな感じになると思うのですが... よろしくお願いします。
- ベストアンサー
- HTML
- 特定の要素だけCSSの継承を一時的に解除する方法はありますか
JavascriptのWYSWYGエディタを使っているのですが、ユーザーが入力するときに、たとえば、<oi>のようなタグを指定すると、入力時には数字付きリストが表示されます。 しかし、保存して、ページに表示する時には、そのページのＣＳＳが適用されてしまい、数字が消えるような指定を行っていた場合に、入力時の見た目を異なる表示がされてしまいます。 ＣＳＳの仕様としてはこれで正しいのですが、 これを、ユーザーが入力した部分だけ、全体のＣＳＳの適用しないようにしたいのです。 ページのタグにすべてclass指定を行えば、classの無いユーザー入力部分は適用外になりますが、サイト全体のベースのスタイルシートが、タグ全体に対する指定を行っているので、修正コストの大きさや修正漏れのリスクを考えると、一部分だけ、タグ全体指定などの継承を解除できれば、それが一番スマートだと考えています。 http://www6.plala.or.jp/go_west/nextcss/ref/basic/how2read.htm 上記のページの"継承"のところで以下の記述があります。 ------------------------------------------------------- CSS2になってから、[inherit] という値が導入されました。この値を使うと、値を継承しないプロパティでも、継承させる事が可能です。また、既に値を指定してしまったプロパティで、継承性を一時的に解除する為にも使えます。 ------------------------------------------------------- この、「継承性を一時的に解除する」ってことが、 おそらく私がやりたいことになると思いますが、 具体的な使い方は分かりませんでした。 やり方をご存知の方、教えていただけると助かります。 また、上記のことは不可能であるということが分かれば、それはそれで助かります。 よろしくお願いいたします。
- 締切済み
- CSS
- CSSでtdの横幅の片方だけを指定したい
横２列の table を配置して、一方の tdのみ 120px で強制的に確保したいです。 <table style="width:100%"> <tr> <td style="width:120px;">120pxで固定したい</td> <td>残りスペース全て使う </td> </tr> </table> ※ここに記載するため、styleで表記しています。 上記でCSS指定すると、ブラウザの横幅に合わせて伸縮してしまい120pxの幅より大きくなってしまいます。 伸縮せず120pxで強制する指定方法がございましたら教えてください。
- ベストアンサー
- ブラウザ
- テーブルの幅をデフォルトに戻すcssがわかりま
<html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり 基本的には table { width: 100%; } をテーブルに設定したいのですが とあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後に クラスを使って該当のテーブルのみ デフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですが テーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。
- ベストアンサー
- HTML
