- ベストアンサー
bodyで一括指定したものの部分的変更
宜しくお願いします。 body, td, th { background-color:#FFFFFF; } のような感じでCSSでテーブルの背景を一括で白に指定しているのですが、これを部分的に背景なしにすることは可能ですか？ 例えば同じCSSを使っているんだけどページAではテーブル背景白でOKで、ページBでは背景をなしにしたいテーブルが出てきてしまったという時です。 出来ればCSSは一つにしたく、既に上記の指定で百ページ近く作ってしまっているので、bodyの指定自体を変更はできないのですが、部分的にこの指定を解除する方法がありましたら教えてください。 宜しくお願いします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
HTMLを一切触らずに、CSS側から、サイト内の不特定のHTML内のtableの背景を変更することは可能ですが、前提としてHTMLが完璧であることが求められます。 外（CSS）側から、それらの<table要素>を識別できる手段がないと不可能です。（動的には可能です） たとえば背景を変更したい<table要素> ・にだけ、summary属性がある【IE6以降】-----属性セレクタ あるいは、特定の属性値をもつ<table summary="price"> -----属性毛属性地セレクタ ・はそれが特定のブロック内<body class="body">要素内とか、<div class="plice">などに含まれている------- ・特定の親要素直下である。たとえば<h2>直下 ・特定の親要素の子孫である。 など、要は、HTMLのほうが正しくマークアップされていれば、CSS側で自由に設定できます。 たとえば、商品紹介のページでHTML内の<table>が下記のような場合 html_0: <body> <table><!-- body要素の子供要素(直下) --> html_1: <table summary="price"> html_2: <table summary="size"> html_3: <h2 id="price">価格表</h2> <table> html_4: <p>下記は価格表です。</p> <table> body table{ background-color: white;}/*ここですべて設定*/ body>table{ background-color: red;} /*html_0などに該当*/ body table[sumasry]{ ***** }/*hml_1,html_2に該当 */ body table[sumasry=price]{ ***** }/*hml_1,html_2に該当 */ p+table{****} /*html_4に該当 */ 「CSSだけ変更して」を可能にするには、HTMLが正しくマークアップされていれば、簡単だということ。 でなけりゃ、動的にCSSを切り替えて、順次HTMLを書き直す。 なお、CSSをひとつにするのは良い方法ではありません。必然的にHTMLが複雑になりますし、CSSの管理が難しくなります。そして、なによりもネットワークに対して負荷が大きくなる。
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
そもそも「背景なし」ってのはブラウザに依存するってことで 何色になるかわからないのだから、「白」でも問題ないのでは？
お礼
説明が不十分ですみません。 背景を指定したdivなどで中に背景なしのテーブルを入れたいのです。 ご回答有難う御座いました。
- steel_gray
- ベストアンサー率66% (1052/1578)
body や table に id や class を付ける。 ページの構成（親子関係）に注目して特殊なケースを判別する。 とか、かな。 とりあえず「セレクタ」ってのを勉強してみる事です。 http://hp.vector.co.jp/authors/VA022006/css/selector.html とか。 まぁ、難しそうではあるかもしれませんが、セレクタが使いこなせなければcssを使えるとはいえないので頑張ってください。
お礼
ご回答有難う御座いました。 セレクタについて勉強してみます。
お礼
詳しいご回答有難うございました。大変参考になりました。 CSSを別に作成することも考えていこうと思います。