liリストタグの背景色に色がつきません。このタグのどこが間違っているのでしょうか。

質問

外部ＣＳＳに

.ffdddd_color {
background: #ffdddd;
}

とし記述していて、

ＨＴＭＬ部分に

<li class="ffdddd_color">テーマＡ</li>

と記述しているのですが、
色がつきません。

何がいけないのでしょうか？

ちなみにテーマＡと書いてあるのは
テーマＢＣＤとリストがあり、

テーマＡ
文章
テーマＢ
文章
テーマＣ
文章
テーマＤ
文章

という風になっています。
ですので、テーマと書いてある部分だけに背景色をつけたいです。

お詳しい方よろしくお願いいたします。

回答No.4

yosoho · ベストアンサー

> 現在のＨＴＭＬ部分は <ul class="box">

での、"box"のCSSはどんな風ですか？

回答No.3

yambejp

ul.box li にbackground-Colorが指定されていますね。
セレクタのポイントでここは12ポイントで、
.ffdddd_color のところは10ポイントなので最低限同じポイントに
しないと負けます。

手っ取り早くは
ul.box li.ffdddd_color{・・・}とするのが妥当でしょう。

お礼

ご回答ありがとうございます。

ご指定の方法であるul.box li.ffdddd_color{・・・}だと、
レイアウトがくずれてしまったので、
さらにもう１つul.box li.white{・・・}というものをつかいして、カラーをwhiteにすると、中に書いてある文章まで白になってしまったので、さらにcolorでフォントにblackを指定すればきちんと見れるようになりました。

いろいろとアドバイスありがとうございました。

回答No.2

ttkai00

背景色だけを指定するなら background じゃなくて background-color じゃないでしょうか？background に色だけを書いてみたことがないので、それが原因かどうかはちょっとわかりませんが。

お礼

ご回答ありがとうございます。

background-coloにしてみたのですが、
結果は同じで背景色がつきませんでした。

悩み始めてかれこれ一週間になります（＾＾；）

回答No.1

yambejp

普通にやれば問題なく背景色がつくはずです。

タイプミスによってきちんと読みこまれていない可能性が高いですが
ブラウザによってはクラス名にアンダーバーが使えない場合も
あるので注意が必要です

不具合のある具体的な環境など提示したほうがよいかもしれません

お礼

ご回答ありがとうございます。

やはり色はつかないみたいです。

現在のＨＴＭＬ部分は
<ul class="box">
<li class="ffdddd_color">テーマＡ</li>
<li>文章</li>
<li class="ffdddd_color">テーマＢ</li>
<li>文章</li>
<li class="ffdddd_color">テーマＣ</li>
<li文章</li>
</ul>

そしてＣＳＳ部分が
ul.box {
zoom: 100%;
list-style: none;
padding: 0;
margin: 0;
}
ul.box:after {
height: 0;
visibility: hidden;
content: "";
display: block;
clear: left;
}
ul.box li {
float: left;
width: 240px;
background-color: #ffffff;
border: solid 1px;
padding: 1px;
margin: 5px;}

.ffdddd_color {
background: #ffdddd;
}

という風になっております。
ここから何かおわかりになりますでしょうか？

ちなみにブラウザはFirefox、ＩＥで確認しております。
またタイプミスを確認してみて、上記の
ul.box li {
float: left;
width: 240px;
background-color: #ffffff;
border: solid 1px;
padding: 1px;
margin: 5px;}
のところにli.クラス名
でやってみると、色はついたことはついたのですが、
レイアウトが崩れました。

以上です。
どうぞよろしくおねがいいたします。