CSSデザインカタログ » list » リストマークを画像にしたリスト : list130
サンプル
リストマークを画像にしたリスト1 : list130-l
リストマークを画像にしたリスト2 : list130-f
- ファイル
- ファイル
- ファイル
- ファイル
- ファイル
ソース
XHTML
<ul class="list130-l">
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
</ul>
CSS
ul.list130-l li {
list-style: url(../img/mk-golink.png);
}
ul.list130-f li {
list-style: url(../img/mk-file.png);
}使用画像
解説
list-style-imageプロパティで画像のURIを指定することによってリストマークを画像にできます。ここではlist-styleのショートハンドを使い，必要ない値を省略した記述になっています。