コーディング

2011.6.7

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

CSS

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

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

個別属性	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（イロハ）

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

ul、liの個別に指定可能。

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

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

値（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）

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

list-style-type: circle;

値	url()

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

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

値	outside（外側初期値） inside（内側）

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

list-style-position: inside;