概要
CSSプロパティ｢list-style-image｣は、リストの先頭に対して、中点などのマーカーに画像を指定することができます。また、既存のマーカーを指定したい場合は list-style-type を利用します。
<p>好きな動物リストです</p>
<ul>
<li>ネコ</li>
<li>犬</li>
<li>ウサギ</li>
</ul>
<style>
li {
list-style: url('https://www-creators.com/wp-content/uploads/2017/10/icon_sample_-crown.png') inside;
}
</style>取りうる値
値に表示させたい画像のurlを指定します。注意したいのは、指定した画像はサイズの変更ができません。もし変更したい場合などは背景に画像を指定するCSSプロパティ background-image などを利用します。
{ list-style-type: 画像url;}list-styleに関連のプロパティ一覧
| プロパティ名 | 説明 |
|---|---|
| list-style | マーカーに関する指定をまとめて行うショートハンド |
| list-style-image | マーカーに画像を指定する |
| list-style-type | マーカー文字の種類を指定する |
| list-style-position | マーカー文字の位置を指定する |
| marker-offset | マーカーとの間隔を指定する |
使用例
リストマーカーをアイコン画像にしてみた例です。
<p>好きな動物リストです</p>
<ul>
<li class="anim1">ペンギン</li>
<li class="anim2">オオカミ</li>
<li class="anim3">ニワトリ</li>
</ul>
<style>
ul {
background-color: #ddd;
border: 1px solid #222;
border-radius: 2px;
}
li {
margin: 5px;
}
.anim1 { list-style-image: url('https://www-creators.com/wp-content/uploads/2017/12/css_list_icon1.png');}
.anim2 { list-style-image: url('https://www-creators.com/wp-content/uploads/2017/12/css_list_icon2.png');}
.anim3 { list-style-image: url('https://www-creators.com/wp-content/uploads/2017/12/css_list_icon3.png');}
</style>