- ベストアンサー
bodyで一括指定したものの部分的変更
宜しくお願いします。 body, td, th { background-color:#FFFFFF; } のような感じでCSSでテーブルの背景を一括で白に指定しているのですが、これを部分的に背景なしにすることは可能ですか？ 例えば同じCSSを使っているんだけどページAではテーブル背景白でOKで、ページBでは背景をなしにしたいテーブルが出てきてしまったという時です。 出来ればCSSは一つにしたく、既に上記の指定で百ページ近く作ってしまっているので、bodyの指定自体を変更はできないのですが、部分的にこの指定を解除する方法がありましたら教えてください。 宜しくお願いします。
- kisaki08
- お礼率91% (91/100)
- CSS
- 回答数3
- ありがとう数5
- みんなの回答 （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を使えるとはいえないので頑張ってください。
お礼
ご回答有難う御座いました。 セレクタについて勉強してみます。
関連するQ&A
- cssでbodyタグのtopマージを0にしているのですがスペースが。。。
cssでbodyタグのtopマージを0にしているのですがスペースが空いてしまいます。 下記がCSSです。 /* body */ body,td,th { color: #000000; } body { background-color: #FFFFFF; margin-left: 0px; margin-top: 0px; background-image: url(share_img/bg_back.gif); } CSSを外部ファイルにする前は、TOPは空くことは無かったのですが、 CSSを外部ファイルにした途端、空いてしまうようになってしまいました。 どうしても方法がわからなくて困ってます。 どなたかご教授お願いします。
- ベストアンサー
- HTML
- 背景画像がテーブルに透けてしまう
<body background="画像のURL"> <STYLE TYPE="text/css"> <!-- BODY { background-color: white} --> </STYLE> <Table Border="1" Width="サイズ"> <Tr> <Td ColSpan="サイズ" Align="位置">～ という感じでページを作っているのですが、 背景の画像が透けてテーブルの中の文字が見え難く 困っています。 テーブルの中は「white」で白に指定している つもりなのですが、白になりません。。 このタグでテーブルの中を背景が反映されず真っ 白にする方法ってあるのでしょうか？ 調べてみたのですがどうも分からないので教えて下さい。
- ベストアンサー
- レンタルサーバ・ASP
- 枠線が表示されません
初歩的な質問ですみません。 以下のようなテーブルを組んでいるのですが 枠線が表示されません。 どこがおかしいのでしょうか？ 宜しくお願いします。 ==================================HTML================================== <html> <head> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <table class="table1"> <tr> <th>左</th> <th>真ん中</th> <th>右</th> </tr> <tr> <td class="blue">1</td> <td class="blue">田中</td> <td class="blue">55</td> </tr> <tr> <td class="white">2</td> <td class="white">鈴木</td> <td class="white">42</td> </tr> <tr> <td class="blue">3</td> <td class="blue">斉藤</td> <td class="blue">20</td> </tr> </table> </body> </html> ==================================CSS================================== /*テーブル全体*/ .table1 { border-collapse: collapse; /* 枠線の表示方法 重ねる */ border: 2px #757575 solid; /* テーブル全体の枠線（太さ・色・スタイル）solid:実線 */ margin-top: 10px; /* 表示位置 */ margin-left: 25px; /* 表示位置 */ } /*テーブルの見出し部分*/ th { font-size:10pt; text-align:left; /*左寄せ*/ color:#888888; /*テキスト色*/ background-color:#B8B8B8; /*背景色*/ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ border-spacing: 0; /* 隣のセルとの間隔 */ } /*テーブルのデータ部分*/ td { font-size:10pt; text-align:left; /*左寄せ*/\ border-style: solid; /* 枠の種類 */ border-width: 0px 1px; /* 枠の幅 */ } .blue{ background-color: #CCCCFF; } /* セル色：青 */ .white{ background-color: #FFFFFF; } /* セル色：白 */ /*背景色と文字色*/ body { background-color: #969696; color: #000000; }
- 締切済み
- CSS
- table のバックグラウンドカラー
background-color は継承されないものだと認識しております。 ・HTML内容 <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>検証</title> </head> <table border="1" background="red"> <tr> <th>授業内容</th> <th>講義</th> </tr> <tr> <td>1時間目</td> <td>国語</td> </tr> <tr> <td>2時間目</td> <td>数学</td> </tr> <tr> <td>3時間目</td> <td>英語</td> </tr> <tr> <td>4時間目</td> <td>科学</td> </tr> </table> </body> </html> ====ここまで==== ボタンを押す。⇒setStyleが動く⇒tableの背景が赤色で塗られる。動作までは分かるのですが、 td、thの部分の背景まで赤色になっています。 これは、テーブルと言う枠に、赤色が塗られ、その上にtd、thが置かれる。 結果、td、thの背景赤色は (1)「td、thのbackgroundは指定していないため、デフォルトのtransparentが有効で、 テーブルの背景赤色が透けて見えている」 (2)「td、thに、tableのbackgroundが継承されて、赤く塗りつぶされていないということ」 の考えに間違いがないか確認させて頂きたいのです。 ご教授お願いします。
- ベストアンサー
- CSS
- テーブルの背景をマウスオーバーで変える
お世話になります よろしくお願いします phpMyAdminをみてやってみようと思ったのですが テーブルのセルをマウスオーバーで背景の変更はできないでしょうか？ FireFoxだとうまくいくのにIEだとうまくいきません。 IEは未対応と聞いたのですが 実際phpMyAdminでは動いています。 どうやれば一緒のことができるのでしょうか？ phpMyAdminからそれっぽいソースは見つけたのですが うまくいきませんでした <style type="text/css"> /* odd table rows 1,3,5,7,... */ table tr.odd th, table tr.odd { background-color: #CCCCCC; } /* even table rows 2,4,6,8,... */ table tr.even th, table tr.even { background-color: #666666; } /* hovered table rows */ table tr.odd:hover, table tr.even:hover, table tr.odd:hover th, table tr.even:hover th, table tr.hover th, table tr.hover { background-color: #FFF000; } --> </style> <body> <table> <tr class="odd"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> <tr class="even"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> </table> 以上よろしくお願いします
- ベストアンサー
- HTML
- 左右の余白に色指定
左右の余白に色指定というのは、以下のようなものです。 http://www.kandamasanori.com/ このように灰色の背景の上にページが乗っかっているようなページを作りたいと思っています。 そこで、スタイルシートで body{ background-color:#cccccc } と指定したうえで、ページの各部分において、 div block1{ background-color:#ffffff } というふうにしてみたのですが、これだと、たとえばblock1とblock2の間の余白部分が灰色（#cccccc）になってしまいます。 私の説明では舌足らずかと思いますが、何かいい方法があればアドバイスよろしくお願いいたします。
- ベストアンサー
- ブログ
- スタイルシートは直接指定より優先されるのでしょうか？
一行ずつグレー、白としたいのですが、 スタイルシートは直接指定より優先されてしまうでしょうか？ .tr{ background-color : #FFFFFF; } <table> <tr> <td> 白 </td> </tr> <tr> <td bgcolor="glay"> グレーくならない </td> </tr> </table> いままで使っていなかったtbodyタグでスタイルシートの背景色を指定していますが、スタイルシートを使う限りこの方法しかないでしょうか？
- ベストアンサー
- HTML
- 閲覧時に背景色、文字色をcssで変更したい
WindowsXP、Firefox3を使用しています。 白背景に黒文字という一般的なウェブページの配色はまぶしいので、 Stylishというアドオンを使ってcssで背景色、文字色を変更しようと思い、 以下のようなcssを作成しました。 －－－－－－－－－－－－－－－－－－－－－－－－ここから body { color: #696969 !important; background-color: #dcdcdc !important; background-image:none !important; } td { color: #343434 !important; background-color: #d3d3d3 !important; background-image:none !important; } －－－－－－－－－－－－－－－－－－－－－－－－ここまで しかし、これだと色が変更できない領域があります。 例えば、 http://www.yahoo.co.jp/ ……一番下？の背景色しか変わりません http://www.4gamer.net/ ……一切変化しません http://www.flay.com/ ……背景色は変わりますが、文字色が変わりません アドオンを使わず、userContent.cssを使う方法にしても結果は同じようです。 どのウェブページでも背景色と文字色を変更するには、どう記述すればよいのでしょうか？
- 締切済み
- HTML
- firefoxで部分的に背景色が反映されない。
またまたCSS関連の質問です。 body直下に全体を包括するブロックの<div id="container">を設定し、containerの中に3段組（左中央右の3カラム）でレイアウトを組んでいます。 widthはbodyが100%指定、containerは80%指定でセンタリングしてあります。 質問なんですが、 ・bodyのbackground-imageに画像を指定し、 ・containerのbackground-colorに#ffffffを指定しており、 ・3カラムそれぞれの表示要素（コンテンツテキストとか）は、中央が一番縦に長く、左と右はメニュー程度なので下半分くらいが空白になっている状況です。 ・その際、firefox上では、左/右カラムの背景色が、要素がある部分（テキストで埋まってしまっている部分）までは#ffffffとなっているのですが、そこから下（空白部分）がbodyの背景イメージを透過してしまっているのです。 本来なら、bodyに指定した背景イメージは、container幅の80%には表示されない筈なのですが。。。 ちなみに、IE6だと、計算通り左・右カラムとも、一番下部までちゃんと背景色が#ffffffとなっており、できればfirefoxでも同様のデザインを実現したいのですが、ご助言頂けますでしょうか？ なかなか説明が難しく、分かりにくい文章になってしまってすみませんが、よろしくお願いします。
- ベストアンサー
- HTML
- styleの直接指定が効きません。
外部ファイルにてbodyに背景画像を設定しているんですが、インラインフレームの中だけ背景色にしたく、 (1)<head>内に <Link rel="stylesheet" href="style.css" type="text/css"> <style type="text/css"> body { background-color: #fffff3; } </style> (2)<body style="background-color: #fffff3;">～</body> と両方試してみましたが、背景色が反映されず背景画像のままです。 外部ファイルの body { color : #57450f; background-image : url(image/back01.gif); } 背景画像の部分をはずすと背景色は反映されるんですが、何が問題なのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
お礼
詳しいご回答有難うございました。大変参考になりました。 CSSを別に作成することも考えていこうと思います。