list-style-type
CSSの書き方
list-style-type:値 ;
CSSの詳細情報 | |||||
---|---|---|---|---|---|
プロパティ名 | list-style-type | 読み方 | リスト・スタイル・タイプ | ||
初期値 | disc | 意味 | リストマークの種類 | ||
値 | none/disc/circle…etc(以下の表を参照) | ||||
対象 | li要素など(dislplay:list-item;と指定した要素を含む) | ||||
CSSレベル | CSSレベル2 | 対応ブラウザ | Windows | MAC | |
継承 | する | IE 5.0以上/FF1.0/NS7.1/OP8.0 | SF/IE5.0 |
解説
「list-style-type」プロパティは、リスト項目の前に付くリストマークの種類を変えることができるスタイルシートです。
CSSレベル2では、この種類が豊富に用意されていますが、どのブラウザも完全には対応していません。
値
「list-style-type:none;」とすると、リストマークは表示されなくなります。
それ以外の値とブラウザの対応状況については以下の表をご覧ください。
値 | 内容 | IE 5.0以上 | NS7.1 | FF1.0/Chrome | OP8.0 | SF | MAC IE5.0 |
---|---|---|---|---|---|---|---|
none | マーカーなし | ○ | ○ | ○ | ○ | ○ | ○ |
disc | 塗りつぶした丸 | ○ | ○ | ○ | ○ | ○ | ○ |
circle | 中の白い丸 | ○ | ○ | ○ | ○ | ○ | ○ |
square | 塗りつぶした四角 | ○ | ○ | ○ | ○ | ○ | ○ |
decimal | 数字 | ○ | ○ | ○ | ○ | ○ | ○ |
decimal-leading-zero | 先頭に0がつく数字 | × | ○ | ○ | ○ | × | × |
lower-roman | ローマ数字(小文字) | ○ | ○ | ○ | ○ | ○ | ○ |
upper-roman | ローマ数字(大文字) | ○ | ○ | ○ | ○ | ○ | ○ |
lower-greek | ギリシャ文字(小文字) | × | ○ | ○ | ○ | ○ | × |
lower-alpha | アルファベット(小文字) | ○ | ○ | ○ | ○ | ○ | ○ |
upper-alpha | アルファベット(大文字) | ○ | ○ | ○ | ○ | ○ | ○ |
lower-latin | ラテン語(小文字) | × | ○ | ○ | ○ | ○ | × |
upper-latin | ラテン語(大文字) | × | ○ | ○ | ○ | ○ | × |
hebrew | ヘブライ語 | × | ○ | ○ | × | ○ | × |
armenian | アルメニア語 | × | ○ | ○ | ○ | × | × |
georgian | グルジア語 | × | × | × | ○ | × | × |
cjk-ideographic | 漢数字 | × | ○ | ○ | × | × | × |
hiragana | ひらがな | × | ○ | ○ | × | × | × |
katakana | カタカナ | × | ○ | ○ | × | × | × |
hiragana-iroha | ひらがな(いろは順) | × | ○ | ○ | × | × | × |
katakana-iroha | カタカナ(いろは順) | × | ○ | ○ | × | × | × |
※引用元:藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P247、2005
CSS/HTMLサンプル
ul { list-style-type:upper-alpha; }
リストマークの種類(大文字アルファベット)をUL要素に適用 サンプル