リストマークに画像を使う


リストマークに画像を使用したい、
といった場合はリストにしたい画像を背景画像として指定します。

  • リスト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を使ったほうがよいです。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る