CSS プロパティ list-style-image：画像でリストマーカーをカスタマイズ
list-style-image プロパティは、リストアイテムのマーカーとして使用する画像を設定するために使用されます。このプロパティを使用すると、デフォルトの項目記号 (disc、circle、square) や数字を、任意の画像に置き換えることができます。
構文
/* 画像のURL */
list-style-image: url('image.png');
/* キーワード値 */
list-style-image: none;
/* グローバル値 */
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: unset;
プロパティ値
| 値 | 説明 |
|---|---|
url('image.png') |
リストアイテムのマーカーとして使用する画像の URL を指定します。 |
none |
画像をリストアイテムのマーカーとして使用しません。list-style-type を none に設定するのと同じです。 |
inherit |
親要素から list-style-image プロパティの値を継承します。 |
initial |
list-style-image プロパティをデフォルト値の none に設定します。 |
revert |
list-style-image プロパティをブラウザのスタイルシートで設定されているデフォルト値にリセットします。 |
unset |
list-style-image プロパティが継承されたプロパティである場合、inherit と同じように動作します。そうでない場合は、initial と同じように動作します。 |
使用例
1. ローカル画像をリストマーカーとして使用する
ul {
list-style-image: url('images/star.png');
}
2. 外部画像をリストマーカーとして使用する
ol {
list-style-image: url('https://example.com/images/checkmark.svg');
}
3. リストマーカーを削除する
li {
list-style-image: none;
}
注意点
list-style-imageを使用する場合は、画像ファイルのパスが正しいことを確認してください。パスが正しくない場合、画像は表示されません。list-style-positionプロパティを使用して、リストアイテムのテキストに対する画像の位置を調整できます。
HTML コード例
以下のコードは、list-style-image プロパティを使用してカスタム画像をリストアイテムのマーカーとして設定する方法を示しています。
<!DOCTYPE html>
<html>
<head>
<title>list-style-image の例</title>
<style>
ul {
list-style-image: url('images/star.png');
}
</style>
</head>
<body>
<ul>
<li>リストアイテム 1</li>
<li>リストアイテム 2</li>
<li>リストアイテム 3</li>
</ul>
</body>
</html>
この例では、各リストアイテムの前に images/star.png 画像がマーカーとして表示されます。
参考資料
よくある質問
1. list-style-image で設定した画像が表示されません。
画像ファイルのパスが正しいことを確認してください。パスが正しくない場合、画像は表示されません。また、画像ファイルがサーバーにアップロードされていることを確認してください。
2. list-style-image で設定した画像のサイズを変更できますか？
list-style-image プロパティでは画像のサイズを直接変更することはできません。画像のサイズを変更するには、画像編集ソフトで変更するか、CSS の width プロパティと height プロパティを使用します。
3. list-style-image と list-style-type を同時に使用できますか？
はい、list-style-image と list-style-type を同時に使用できます。list-style-image が設定されている場合は、list-style-type の設定は無視されます。