list-style-imageによる方法
直感的で簡明な方法。ただしマーカーの画像の位置やサイズの調整が細やかにできない難点がある。
HTML
|
1 2 3 4 5 |
<ul class="list_style"> <li>いぬ</li> <li>さる</li> <li>きじ</li> </ul> |
CSS
|
1 2 3 |
ul.list_style { list-style-image: url("./triangle.png"); } |
背景画像による方法
手数が多くなるが、画像の位置やサイズの調整を細やかに調整できる。大まかな手順は以下の通り。
- ulで
- list-styleを消す
- マーカーを含めた適切なインデント位置にするため、paddingを設定する
- liで
- backgroundやbackground-imageで画像ファイルを読み込む
- no-repeat指定
- positionは左からの距離と上からの距離が標準
- マーカーとテキストが重ならないようにpaddingを設定
HTML
|
1 2 3 4 5 |
<ul class="background"> <li>いぬ</li> <li>さる</li> <li>きじ</li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
ul.background { padding-left: 20px; list-style: none; } ul.background li { background-image: url("./triangle.png"); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 20px; } |