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

list-style-typeプロパティは、HTMLのリスト要素（例えば<ul>や<ol>）に表示される項目マーカーの種類を保持するプロパティです。このプロパティを使用することで、リストアイテムの先頭に表示される記号や番号のスタイルを指定することができます。

具体的には、順序なしリスト（<ul>）のデフォルトである塗りつぶされた丸（disc）を、中抜きの丸（circle）、四角（square）といった記号に変更したり、順序付きリスト（<ol>）のデフォルトである数字（decimal）を、小文字アルファベット（lower-alpha）、大文字アルファベット（upper-alpha）、ローマ数字（lower-roman, upper-roman）などに変更することが可能です。また、リストマーカーを完全に非表示にしたい場合は、noneという値を指定します。

このプロパティは、Webページのデザインにおいてリストの視覚的な表現を制御するために不可欠です。例えば、ナビゲーションメニューや箇条書きの説明文など、リストをさまざまな用途で利用する際に、目的やデザインに合わせてマーカーの種類を柔軟に調整できます。

list-style-typeプロパティは、list-style-position（マーカーの位置）やlist-style-image（画像をマーカーとして使用）といった他のリスト関連プロパティと組み合わせて使用されることが一般的です。これらのプロパティをまとめて設定するためのショートハンドプロパティとしてlist-styleも存在し、より簡潔にスタイルを記述することができます。Webサイトのアクセシビリティやデザインの一貫性を保つ上で、リストマーカーの適切な管理は重要な要素の一つと言えます。

Copy
1list-style-type: disc;

引数なし

引数はありません

戻り値なし

戻り値はありません