箇条書きを書くには。箇条書きのカスタマイズ その2

前回のつづき。

箇条書きのリストマーカーに画像を付けてみましょう。
デザイン的にも視覚的にもより強調されます。

リストマーカーに

html
<ul class="marklist"><li>テスト</li><li>テスト２</li></ul>

• テスト
• テスト２

cssコード
..skinArticleBody ul.marklist {
list-style-type: none;
list-style-image: url(http://mpro-web.com/temp/103.gif);
list-style-position:inside;
}

list-style-imageを使用してリストマーカーを表示。list-style-imageを使った場合マークのサイズにより文字の位置がずれる場合があります。
その場合、背景画像を使います。

---

背景画像をセンターレフトで配置して文字の開始位置をpaddingで調整します。
ｈｔｍｌ
<ul class="markimg"><li>テスト</li><li>テスト２</li></ul>

• テスト
• テスト２

cssコード

.skinArticleBody ul.markimg {
list-style-type: none;
}
.skinArticleBody ul.markimg li {
padding-left:30px;
background-image: url(http://mpro-web.com/temp/103.gif);
background-repeat: no-repeat;
background-position: left center;
}

※画像

はmpro-web.comのtempフォルダに入っているものを使用しています。