今だけ人気マンガ100円レンタル特集♪

<ul>
<li>リスト01</li>
<li>リスト02</li>
<li>リスト03</li>
<li>リスト04</li>
</ul>

このリスト02と04の冒頭(項目の左)に画像を付けて表示したいのですが、htmlとcssはどのように書いたらいいでしょうか。

このようなイメージです。

 リスト01
☆リスト02
 リスト03
☆リスト04

下記のようにしてみたのですが、画像が表示されませんでした。

<ul>
<li>リスト01</li>
<li class="starmark">リスト02</li>
<li>リスト03</li>
<li class="starmark">リスト04</li>
</ul>


li .starmark{
list-style-type:none;
background: url(./images/starmark.png) no-repeat left center;
padding-left: 35px;
}

A 回答 (2件)

li と .starmark の間に半角スペース入ってませんか?


一度スペースをとってみてください。
    • good
    • 0
この回答へのお礼

ありがとうございます。できました!

お礼日時:2020/08/01 03:45

それで良いです。

一般的です(他の方法もありますが)

で、おそらくですが、
画像ファイルのパスが違うのでしょう・・・(初心者さんには良くある事です)

li 以外での、background: url(~~~)と同じパスや配置にしましょう!
または、
別の画像を表示してみましょう。

li .starmark{
list-style-type:none;
background: url(https://oshiete.goo.ne.jp/favicon.ico) no-repeat left center;
padding-left: 35px;
}
例えば、これなら表示されるでしょ?


-----------
ディレクトリは?
 /HTMLファイル
 /CSSファイル
 /images/(この中にstarmark.png)
という構造/配置なっているパターンが多いので、
background: url(images/starmark.png) no-repeat left center;
とか、
background: url(../images/starmark.png) no-repeat left center;
とかに変更してみるとか、
そもそも、画像を置いたディレクトリ(フォルダ)が違う可能性も多々ある・・・
    • good
    • 0
この回答へのお礼

ありがとうございました!

お礼日時:2020/08/01 03:45

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング