リストマークの種類を指定する

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要素に適用 サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!