CSS | list-style-image | 箇条書きの点を画像にする

.sampleクラスを持つ<ul>要素を作ります。

HTML


<ul class="sample">
    <li>りんご</li>
    <li>レモン</li>
    <li>メロン</li>
</ul>

CSS


.sample {
    margin-left: 3rem;
}

li {
    font-size: 2rem;
}

実行結果初期状態

list-style-image: url( 画像ファイルのURL )を設定すると、マーカーが画像ファイルになります。

HTML


<ul class="sample">
    <li>りんご</li>
    <li>レモン</li>
    <li>メロン</li>
</ul>

CSS


.sample {
    margin-left: 3rem;
}

li {
    font-size: 2rem;
}

CSS


.sample {
    list-style-image: url( '/images/list-style-image1.png' );
}

実行結果list-style-image

list-style-imageとlist-style-typeの両方を設定するとlist-style-imageが優先されます。

HTML


<ul class="sample">
    <li>りんご</li>
    <li>レモン</li>
    <li>メロン</li>
</ul>

CSS


.sample {
    margin-left: 3rem;
}

li {
    font-size: 2rem;
}

CSS


.sample {
    list-style-image: url( '/images/list-style-image1.png' );
    list-style-type:  square;
}

実行結果list-style-type

ただし、list-style-imageの画像ファイルが見つからない場合にはlist-style-typeが適用されるので、一緒に設定しておくのが良いでしょう。

HTML


<ul class="sample">
    <li>りんご</li>
    <li>レモン</li>
    <li>メロン</li>
</ul>

CSS


.sample {
    margin-left: 3rem;
}

li {
    font-size: 2rem;
}

CSS


.sample {
    list-style-image: url( '/images/list-style-image100.png' );
    list-style-type:  square;
}

実行結果画像ファイルが無い

グラデーション

マーカーにグラデーションを設定することもできます。

HTML


<ul class="sample">
    <li>りんご</li>
    <li>レモン</li>
    <li>メロン</li>
</ul>

CSS


.sample {
    margin-left: 3rem;
}

li {
    font-size: 2rem;
}

CSS


.sample {
    list-style-image: linear-gradient( 300deg, red, yellow );
}

実行結果linear-gradient()