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

list-styleプロパティは、HTMLのリスト要素（<ul>, <ol>) の見た目に関する設定情報をまとめて保持するプロパティです。このプロパティは、リストマーカーの種類、表示位置、そしてリストマーカーとして画像を使用するかどうかという、三つの異なるスタイルに関する情報を一度に定義できるショートハンド（短縮形）プロパティとして機能します。

具体的には、list-style-type、list-style-position、および list-style-image の三つの個別プロパティの値を一括で指定できます。list-style-type は、リストの先頭に表示されるマーカーの種類（例えば、ディスク、円、四角、数字、アルファベットなど）を決定します。list-style-position は、リストマーカーがリストアイテムの内容の外側に表示されるか（outside）、内側に表示されるか（inside）を設定します。そして、list-style-image は、URLで指定された画像をリストマーカーとして使用する場合に設定します。

これらのプロパティを個別に記述する代わりに、list-style プロパティを使用することで、CSSの記述をより簡潔にし、コードの可読性を高めることができます。例えば、「list-style: square inside url('images/marker.png');」のように記述することで、四角いマーカーをアイテムの内側に表示し、さらに指定された画像があればそれを優先的に使用するという設定を一度に行うことが可能です。設定したいプロパティの値のみを記述し、省略されたプロパティには初期値が適用されます。これにより、効率的にリストの視覚的な表現を制御することが可能になります。

Copy
1list-style: disc inside url("bullet.png");

引数なし

引数はありません

戻り値なし

戻り値はありません