このlist-style属性はリスト項目の位置、リスト項目のデザイン、リスト項目の画像を一括で宣言する属性です、値を宣言する順番がなく、また値の省略できますのでリスト項目を宣言する場合、主にこのlist-style属性でリスト項目を宣言するのが便利でしょう。
セレクタ{
list-style:inside disc url(../gif/yazirusi.gif);
}
| 値 | 概要 |
|---|---|
| inside | リスト項目を内容の内側に表示 |
| outside | リスト項目を内容の内側に表示 |
| 値 | 概要 |
|---|---|
| none | 表示しない |
| disc | 黒い丸で表示 |
| circle | 白い丸で表示 |
| spuare | 黒い四角で表示 |
| 値 | 概要 |
|---|---|
| none | 表示しない |
| decimal | １、数字で表示 |
| lower-roman | ｉ、小文字ローマ字で表示 |
| upper-roman | Ｉ、大文字ローマ字で表示 |
| lower-algha | ａ、小文字のアルファベットで表示 |
| upper-alpha | Ａ、大文字のアルファベットで表示 |
| lower-greek※１ | α、小文字のギリシャ文字で表示 |
| cjk-ideographic※１ | 一、漢字で表示 |
| hiragana※１ | あ、ひらがなで表示 |
| hiragana-iroha※１ | い、ひらがなのいろはで表示 |
| katakana※１ | ア、カタカナで表示 |
| katakana-iroha※１ | イ、カタカナのイロハで表示 |
| decimal-leading-zero※１ | ０１、０を頭に付けた数字で表示 |
| 値 | 概要 |
|---|---|
| url(yazirusi.gif) | （）内を絶対パスか相対パスで背景画像を指定 |
| none | 背景画像を指定しない |
※１：対応していないブラウザが多いため使わないほうがよいでしょう。
使い方を覚えてしまえば他のリスト項目の属性は必要ないでしょう。