リスト属性に関してのシート|CSSプロパティ

CSSで制御する事のできるリストに関する属性のリストです。リスト属性とはdisplay: list-itemに指定された要素全てです。ul要素,ol要素に指定する事で子のli要素にスタイルが適用されます。子のみに指定できる値もあります。

CSSプロパティのリスト属性に関するリスト

list-style: ★ ★ ★;

個別属性
  • list-style-type
  • list-style-image
  • list-style-position
値(CSS1)
  • none
  • disc(●初期値)
  • circle(○)
  • square(■)
  • decimal(1)
  • upper-alpha(A)
  • lower-alpha(a)
  • upper-roman(ⅰ)
  • lower-roman(Ⅰ)
値(CSS2)
  • decimal-leading-zero(2桁の数字)
  • lower-greek(小文字ギリシャ文字)
  • upper-latin(大文字ラテン文字)
  • lower-latin(小文字ラテン文字)
  • hebrew(ヘブライ数字)
  • armenian(アルメニア数字)
  • georgian(グルジア数字)
  • cjk-ideographic(漢数字)
  • hiragana(ひらがな)
  • katakana(カタカナ)
  • hiragana-iroha(いろは)
  • katakana-iroha(イロハ)

リスト属性の値を一括指定できる。指定できる値は種類/位置/画像。

ulliの個別に指定可能。

[CSS1]は多くのブラウザで対応。[CSS2]に関してはFirefox、Safari、Chromeのみ全て対応。

/* 全てを指定した場合 */
list-style: square url(../images/list_mark.gif) inside;

list-style-type: ★;

値(CSS1)
  • none
  • disc(●初期値)
  • circle(○)
  • square(■)
  • decimal(1)
  • upper-alpha(A)
  • lower-alpha(a)
  • upper-roman(ⅰ)
  • lower-roman(Ⅰ)
値(CSS2)
  • decimal-leading-zero(2桁の数字)
  • lower-greek(小文字ギリシャ文字)
  • upper-latin(大文字ラテン文字)
  • lower-latin(小文字ラテン文字)
  • hebrew(ヘブライ数字)
  • armenian(アルメニア数字)
  • georgian(グルジア数字)
  • cjk-ideographic(漢数字)
  • hiragana(ひらがな)
  • katakana(カタカナ)
  • hiragana-iroha(いろは)
  • katakana-iroha(イロハ)

リスト要素のマーカーの種類を指定できる属性。[CSS1]は多くのブラウザで対応。[CSS2]に関してはFirefox、Safari、Chromeのみ全て対応。

list-style-type: circle;

list-style-image: ★;

  • url()

リスト要素のマーカーを任意の画像へ置き換える属性。

list-style-image: url(../images/list_mark.gif);

list-style-position: ★;

  • outside(外側 初期値)
  • inside(内側)

リスト要素のマーカー位置を指定できる属性。大きな変更はできなく、外側・内側の表示を変更可能。判定位置はリストのボックス領域。

list-style-position: inside;