CSSで<td>の背景色を変えたい。

質問

下のようにTable aaa と bbbがあります。それぞれの<td>要素に
マウスがHoverしたときに別々の色に変えたいのですが、これを
CSS行うことは可能でしょうか？

<table class"aaa">
　　<tr>
　　　　<td> </td>
　　　　<td> </td>
　　　　<td> </td>
　　</tr>
</table>

<table class"bbb">
　　<tr>
　　　　<td> </td>
　　　　<td> </td>
　　　　<td> </td>
　　</tr>
</table>

<td>中には <a hrer="・・・が入っているのですが、
次のように行った場合、リンクアドレスが長くなるとうまく機能
しないようなのです。

table.aaa a:hover{
　　color: #FFFFFF;
　　background-color: #FF0000;
　　text-decoration: none;
　　padding: 5px;
}

table.bbb a:hover{
　　color: #FFFFFF;
　　background-color: #0000FF;
　　text-decoration: none;
　　padding: 5px;
}

よろしくお願いします。

回答No.1

shunten · ベストアンサー

こんばんは。
この問題、私もHPで二種類の意味の違うリンクに違う色をつけたいと思いながら試みたことがありませんでした。

興味を持ったので記述練習をしてみましたが、どうやら以下の記述でどうにかなりそうですよ。

<headの部分>
<style type="text/css">
<!--
.blue
A:hover{color:blue;}
.red
A:hover{color:red;}
-->
</style>
</HEAD終わり>

<BODY部分>　　　　　　　　
<table class="blue"><tbody><tr><td>
<A href="A1.htm">ABC</A>
</td></tr></tbody></table>

<table class="red"><tbody><tr><td>
<A href="A2.htm">XYZ</A>
</td></tr></tbody></table>
</BODY終わり>

gooの中で通常のHTML記述をしたときにどんな事が起きるか
を知らないので4箇所で＜＞の中を変な書き方にしました。

お礼

.red
A:hover{color:red;}

こういう風な書き方があるんですねぇ。

これはこの2行でワンセットという解釈
でよろしいのでしょうか？

回答No.5

shunten

#1です。又出てきました。
CSSでは最初の方で未読・既読のカラーリングを設定しますね。普通、リンク色はページの中で変えませんからクラス分けをしませんが、ご質問ではページの中で別々の色にするわけですからクラスに分けなければなりませんね。「.red」と書いてレッドというクラスについて以下のようにします、と宣言します。そしてご存知のように「｛　｝」の中でそのクラスではどのような事が起こりますと記述します。この箇所であれこれ考えてやってみた結果は通常の記述とは違うものですが、これで動きましたので権威のない「研究発表」と受け取ってください。

もちろん補足ご質問のようにそれでワンセットです。私もいつかこれを使いましょう。

＞こういう風な書き方があるんですねぇ。
本当ですねぇ。無知なままに、気持ち悪いのでここではこの後に続けて色々.redについての記述をしないほうが良いかも。ですから外部CSSにこれだけを記述するとか。

回答No.4

shunten

#3の方の回答を読んで気付きましたが、私は後半のご質問をちょっと誤解していたようで・・・

ご質問の意味を少し大きく捉えて#3のご回答以外で数種類の解決策を考えました。
１）paddingの数字をもっと小さくする
２）<TD></TD>だけでなく<TR></TR>で最初から複数行にしてやる
３）CSSの記述でリンクアドレスのフォントを出来るだけ小さく指定してやる
４）画面上でリンクテーブルの位置を考え直す
５）リンクアドレスをアドレスにせず言葉に置き換える、それでは
不十分だとお考えなら　リンクの為の場所の下にその言葉の説明を入れる

などがあると思います。HPのデザインも含めて色々と工夫するのがHP作成の面白さの大きな部分を占めていると思います。私はそれで楽しんでいます。oshiete_kunさんも色々遊んでみて下さい。

回答No.3

noname#10370

classの後の"="が抜けているのはご愛嬌として、問題ないようですけど・・・。

>次のように行った場合、リンクアドレスが長くなるとうまく機能しないようなのです

リンク部分のテキストが複数行になった場合に文字が重なるのことを言われているならpaddingをpadding-leftへ変更することをお試しください。

お礼

機能しないというのは hoverしたときに、同じように
a:hoverを設定しているのに色が変わったり変わらな
かったりするリンクがあるのです。

バタバタしていてダメなんですが、一度、設計を
0からやり直してもみたいと思っています。

回答No.2

shunten

#1です。書き忘れました。

記述が増えるとうまく機能しないとの事ですね。HTMLでは試していませんが、

<style type="text/css">
<!--@import url(../S.css);
--></style>
などど記述して外部のスタイルシート「S.css」を参照させ

外部スタイルシートでは
.blue｛color: #FFFFFF;　text-decoration: none;｝
td{background-color: #FF0000;　width:100; height:30;　padding: 5px;}

という風にどんどん書いてやれば問題はありませんでした。