リストスタイル

箇条書き(リスト)関連の特性をいくつか示す。

list-style-type特性

リスト項目マーカのスタイルを決める。

• disc

  塗りつぶした丸

• circle

  丸

• square

  四角

• decimal

  10進数による通し番号

• decimal-leading-zero

  最初に0が付く10進数による通し番号

• lower-roman, upper-roman

  小文字/大文字 のローマ数字による通し番号

• lower-greek

  ギリシャ文字による通し番号(α, β, γ,…)

• lower-alpha(lower-latin), upper-alpha(upper-latin)

  小文字/大文字 のアルファベットによる通し番号

• hebrew

  ヘブライ数字による通し番号

• armenian

  アルメニア数字による通し番号

• georgian

  グルジア数字による通し番号

• cjk-ideographic

  漢数字による通し番号

• hiragana, katakana

  ひらがな/カタカナ による通し番号

• hiragana-iroha, katakana-iroha

  ひらがな/カタカナ のイロハ並びによる通し番号

• none

  なし

• inherit

  継承する

list-style-type 特性は下記の list-style-image 特性が 指定されていないとき、あるいは表示できないときに有効化される。

list-style-image特性

リスト項目マーカとして用いる画像を url 表記で指定する。

ul {
 list-style-image: url("http://www.yatex.org/lect/css2/nin-list.png")
}

としておくと、

<ul>
 <li> 項目その1
 <li> 項目その2
</ul>

というHTML文書が下記のようなリスト項目マーカでレンダリングされる。

• 項目その1
• 項目その2

list-style-position特性

リスト項目マーカを、基本ブロックの内部に置くか外部に置くかを 決定する。

• outside

  マーカを外部に置く。標準状態ではこちらで、 この場合テキストの2行目がマーカの下に来ない。 この項目説明段落が outside の例となっている。

• inside

  マーカを内部に置く。 この場合テキストの2行目がマーカの直下に来る。 この項目説明段落が inside の例となっている。

list-style簡略表記特性

list-style-type, list-style-image, list-style-position を同時に指定できる簡略表記特性。