【CSS Modules】list-style-imageプロパティの使い方

list-style-imageプロパティは、HTMLのリスト要素（<ul>や<ol>など）における各リスト項目の先頭に表示されるマーカーを、指定された画像に置き換えるために使用されるプロパティです。ウェブページ上でリストの見た目をカスタマイズし、デフォルトの記号（ディスク、円、四角など）や数字の代わりに、独自の画像アイコンを使用したい場合にこのプロパティが役立ちます。

このプロパティの値には、url()関数を用いて使用したい画像のファイルパスを指定します。例えば、list-style-image: url("images/custom-marker.png");のように記述することで、指定された画像がリストマーカーとして表示されるようになります。画像が何らかの理由で読み込めなかった場合や、画像が指定されていない場合は、代わりにlist-style-typeプロパティで設定されたマーカー（例えばディスクや数字など）が表示されます。これは、画像が表示されない状況でもリストの構造と視認性を保つためのフォールバック機能として機能します。

list-style-imageは、リストマーカーの種類 (list-style-type) や位置 (list-style-position) といった他のリスト関連プロパティと組み合わせて使用することが可能です。また、これらすべてのリストスタイルプロパティをまとめて設定できるlist-styleというショートハンドプロパティの一部でもあります。このプロパティは、ウェブサイトのデザインに一貫性を持たせ、視覚的に魅力的なリストを作成する上で非常に効果的なツールとして、CSSの様々な環境で広く利用されています。

Copy
1list-style-image: url("image.png");

引数なし

引数はありません

戻り値なし

戻り値はありません