リストマークに画像を使う
リストマークに画像を使用したい、
といった場合はリストにしたい画像を背景画像として指定します。
- リスト1
- リスト2
- リスト3
.listyle li {
background-image: url(limark.gif);
background-repeat:no-repeat;
padding:0px 0px 10px 15px;
}
またline-heightで行間を付けていたりして、
画像の位置の調整が必要な場合はbackground-positionにて調節します。
例えば以下のようにリスト画像の位置がずれた場合は、
- リスト1
- リスト2
- リスト3
.listyle2_2 {
line-height:1.8;
}
.listyle2_2 li {
background-image: url(limark.gif);
background-repeat:no-repeat;
padding:0px 0px 0px 15px;
background-position:0px 6px;
}
上記コードのようにbackground-positionで修正すると、
以下のように調整することができます。
- リスト1
- リスト2
- リスト3
※list-style-imageというプロパティもありますが、
こちらは微調整が難しいので、background-imageを使ったほうがよいです。
