list-styleプロパティ

TOPページに戻る > CSS

list-styleプロパティ

リスト項目のスタイルをまとめて指定できます
list-style-type、list-style-image、list-style-positionの値を半角空白で区切って指定します
値の順序は自由です。値の省略もできます
リスト記号の種類とリスト画像を同時に指定した場合は、リスト画像が優先して表示されます
画像が表示されなかった場合、リスト記号が表示されるようになります

使い方（書式）

セレクタ { list-style: 値; }                                    

list-styleプロパティ

対応ブラウザ
適用できる要素	リスト項目 ol要素 ul要素 li要素 displayの値がlist-itemになっている要素
子要素へのスタイルの継承	する

プロパティの値	説明
list-style-typeの値	リスト項目の種類を指定
list-style-imageの値	リスト画像の指定
list-style-positionの値	リスト項目の表示位置を指定

実際の指定方法

.hoge { list-style: decimal url(li.gif) inside; }  
　　　　 /* リストマークの種類、画像、positionを指定 */

.hoge2 { list-style: decimal; }   /* リストマークの種類のみ指定、他の値は省略 */

html部分

<p>フォント</p>

実際の表示

• リスト項目のスタイルを指定
• list-style: decimal url(li.gif) inside;
• リストマークの種類、画像、positionを指定

• リスト項目のスタイルを指定
• list-style: decimal;
• リストマークの種類のみ指定、他の値は省略