
<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;
}
No.2ベストアンサー
- 回答日時:
li と .starmark の間に半角スペース入ってませんか?
一度スペースをとってみてください。
No.1
- 回答日時:
それで良いです。
一般的です(他の方法もありますが)で、おそらくですが、
画像ファイルのパスが違うのでしょう・・・(初心者さんには良くある事です)
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;
とかに変更してみるとか、
そもそも、画像を置いたディレクトリ(フォルダ)が違う可能性も多々ある・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
IEで<td>の全角を有効にする方法
-
liタグの中に<p>タグやら<dl>を...
-
複数行にまたがる括弧を表示し...
-
html <li>の中の文字一部に色を...
-
HTML5のfooterに見出しを付けて...
-
リスト(ul / li)タグの左イン...
-
透明のボックスにリンクを貼りたい
-
html/cssの、navを2段にする...
-
レスポンシブWebデザインでリン...
-
文法チェックの<A>と</A>の間が...
-
リストの数字のフォントサイズ...
-
ドロップダウンメニューが隠れ...
-
ページを開いているときのリン...
-
ol要素の番号とリスト項目の離...
-
疑似クラス :activeが効きません
-
<li>で改行する横並びのメニュー
-
Tableの1セル内に画像・テキス...
-
HTMLで組織図を作成する方法
-
横並びのリストで左端がはみ出る
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
html/cssの、navを2段にする...
-
list-style-type部分だけ大きく...
-
複数行にまたがる括弧を表示し...
-
html <li>の中の文字一部に色を...
-
ページを開いているときのリン...
-
番号付きリスト(<Ol><Li>・・...
-
リストを2つに分割して、それぞ...
-
リストの左余白の削除方法
-
html <ul></ul>の並びで一行空...
-
<li>タグの数が増えすぎたので...
-
<ul><li></li></ul>にするメリ...
-
css 横並びのナビゲーションバ...
-
htmlの<ol>タグで、数字などを...
-
<li>で改行する横並びのメニュー
-
ページ内リンク!?のしかた
-
イメージマップと画像のスライ...
おすすめ情報