HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


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

CSSの書き方

list-style-type:値 ;

CSSの詳細情報
プロパティ名 list-style-type 読み方 リスト・スタイル・タイプ
初期値 disk 意味 リストマークの種類
none/disk/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 OP8.0 SF MAC IE5.0
none マーカーなし
disk 塗りつぶした丸
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要素に適用 サンプル