cssのclassについて

質問

よろしくお願いします。
文字の背景に画像を入れて、更には文字の左側にチェックマークを入れるようにしたいため、cssやhtmlに下記の記述をしました。

【css】

div#test {list-style-position: outside;
list-style-image: url(img/checkmark.gif);
background-image: url(img/mark.png);
color: #ff0000;
font-weight: bolder;
width: 800px;
font-size: 1.0em;
line-height: 2.0;
}

【html】
<div id="test">
<ul>
<li>テキスト、テキスト000テキスト</li>
</ul>
</div>

上記ですと、確かに背景画像も文字の左側にもチェックマークが入るのですが、下記のようにclass指定すると表示されなくなってしまいます
きっとclassの表記が間違っているのだと思いますが困っております
ご指導の程よろしくお願いします。

【css】
.test
{list-style-position: outside;
list-style-image: url(img/checkmark.gif);
background-image: url(img/mark.png);
color: #ff0000;
font-weight: bolder;
width: 800px;
font-size: 1.0em;
line-height: 2.0;
}

【html】
<ul class="test">
<ul>
<li>テキスト、テキスト000テキスト</li>
</ul>

また、id名は一つしか使えないがclass名は同じものを複数使えるとお聞きしますが、上記で言うと"test"を複数使えると言う事でしょうか？

きっと私は<p>は</p>で閉めるように、そのあたりが良く分かっていないのかも知れません。

よろしくお願いします。

回答No.2

神崎 渉瑠（@taloo） · ベストアンサー

BBS投稿時のスペルミスでなければ、
<ul>を直接入れ子にすることは出来ません。

<ul class="test">
<li>
<ul>
<li>あああ</li>
</ul>
</li>
</ul>

list-styleはリストに指定するプロパティですから、以下のようにした方がいいと思います。

div#test {
color: #ff0000;
font-weight: bolder;
width: 800px;
font-size: 1.0em;
line-height: 2.0;
}
div#test ul {
list-style-position: outside;
list-style-image: url(img/checkmark.gif);
background-image: url(img/mark.png);
}

お礼

taloo様
ありがとう御座いました。お陰さまで問題を解決する事が出来ました。
すいませんちょっとお聞きしたいのですが、前回ご指導頂いた記述についてお聞きしたいのですが、異なる画像を左側に表示しようと思い
下記のように記述したところ画像が表示されなくなってしまいました。

.ulfont1 {color: #ff0000;
font-weight: bolder;
width: 800px;
font-size: 1.0em;
line-height: 2.0;
margin-left: -20px;
}

.ulfont ul1 {list-style-position: outside;
list-style-image: url(img/ani059.gif);　←ここを　　　変更しました
background-image: url(img/mark.png);
}

画像を変えようとすると上記の記述もファイル名以外どこかを変える必要があるのでしょうか？お手数では御座いますが、再度ご指導の程よろしくお願い致します。

回答No.1

kuroizell

まずはidとclassの違いから・・・
http://allabout.co.jp/internet/hpcreate/closeup/CU20060910A/

.testという表記は、div、p、span、a・・・・などにもclassで指定できますが、
明らかにli用のスタイルなので、絞った方が良いでしょう。
ul.testという表記に変えてみてください。

あと、昨日既に締め切られてしまいましたが、余白が出来てしまった場合に詰めるにはmarginを使ってください。

例）margin-left: -10px; /* 左端を元の位置から-10px */

firefoxのアドオンの「firebug」を入れると、いろんなサイトを参考に出来ますよ。

お礼

kuroizell様
ありがとう御座いました。
お陰さまで、余白も希望どうりに取れました。
ありがとう御座いました。

で、ですね・・
前回ご丁寧に記述をして下さった方がおりまして、確かに無事に画像は表示されたのですが、他の画像を表示したくなりファイル名を変えた所
その画像が表示されなくなってしまいました。
よろしければご指導頂けませんでしょうか？
よろしくお願い致します。

ありがとう御座いました。

.ulfont1 {color: #ff0000;
font-weight: bolder;
width: 800px;
font-size: 1.0em;
line-height: 2.0;
margin-left: -20px;
}

.ulfont ul1 {list-style-position: outside;
list-style-image: url(img/ANI_059.GIF);
background-image: url(img/mark.png);
}