CSS - list-style-type

トップ > CSSリファレンス > list-style-type

概要

属性名 list-style-type
<string> | <counter-style> | inline | none
初期値disc
適用可能要素li などのリストアイテム要素
継承継承する
メディアVisual / List
サポートC1 / e4 / N4 / Fx1 / Ch1 / Op3.5 / Sa1

説明

リストのスタイルタイプを指定します。

説明
none表示しない (C2/e/Fx/Ch/Op/Sa)
disc黒丸(●) (C2/e/Fx/Ch/Op/Sa)
circle白丸(○) (C2/e/Fx/Ch/Op/Sa)
square黒四角(■) (C2/e/Fx/Ch/Op/Sa)
box白四角(□) (C3)
checkチェックマーク(✓) (C3)
diamondダイヤモンドマーク(◆) (C3)
dashダッシュ(—) (C3)
decimal数字(1, 2, 3...) (C2/e/Fx/Op/Sa)
decimal-leading-zero0付き数字(01, 02, 03...) (C2/e/Fx/Ch/Op/Sa)
cjk-ideographic漢数字(一, 二, 三...) (C3/Fx/Ch/Sa)
upper-roman大文字ローマ数字(I, II, III...) (C2/e/Fx/Ch/Op/Sa)
lower-roman小文字ローマ数字(i, ii, iii...) (C2/e/Fx/Ch/Op/Sa)
upper-alpha大文字アルファベット(A, B, C...) (C2/e/Fx/Ch/Op/Sa)
lower-alpha小文字アルファベット(a, b, c...) (C2/e/Fx/Ch/Op/Sa)
upper-latin大文字ラテン文字(A, B, C...) (C2/e/Fx/Ch/Op/Sa)
lower-latin小文字ラテン文字(a, b, c...) (C2/e/Fx/Ch/Op/Sa)
upper-greek大文字ギリシャ文字(Α, Β, Γ...) (C2/e/Ch/Sa)
lower-greek小文字ギリシャ文字(α, β, γ...) (C2/e/Fx/Ch/Op/Sa)
hiraganaひらがな(あ, い, う...) (C2/Fx/Ch/Sa)
katakanaカタカナ(ア, イ, ウ...) (C2/Fx/Ch/Sa)
hiragana-irohaひらがな-いろは(い, ろ, は...) (C2/Fx/Ch/Sa)
katakana-irohaカタカナ-イロハ(イ, ロ, ハ...) (C2/Fx/Ch/Sa)
japanese-formal日本-公式(壱, 弐, 参...) (C3)
japanese-informal日本-非公式(一, 二, 三...) (C3)
simp-chinese-formal簡体字中国語-公式(壹, 贰, 叁...) (C3)
simp-chinese-informal簡体字中国語-非公式(一, 二, 三...) (C3)
trad-chinese-formal繁体字中国語-公式(壹, 貳, 參...) (C3)
trad-chinese-informal繁体字中国語-非公式(一, 二, 三...) (C3)
korean-hangul-formal韓国ハングル-公式(영, 일, 삼...) (C3)
korean-hanja-formal韓国漢字-公式(一, 二, 三...) (C3)
korean-hanja-informal韓国漢字-非公式(壹, 貳, 參...) (C3)
circled-decimal丸数字(①, ②, ③...) (C3)
dotted-decimalドット付き数字(⒈, ⒉, ⒊...) (C3)
double-circled-decimal二重丸数字(⓵, ⓶, ⓷...) (C3)
filled-circled-decimal黒丸数字(❶, ❷, ❸...) (C3)
parenthesized-decimal括弧付き数字(⑴, ⑵, ⑶...) (C3)
ethiopic-numericエチオピア数字(፩, ፪, ፫...) (C3)
hebrewヘブライ数字(א, ב, ג...) (C2.0/Fx/Ch)
armenianアルメニア数字(Ա, Բ, Գ...) (C2/e/Fx/Ch/Op)
georgianグルジア数字(ა, ბ, გ...) (C2/e/Fx/Ch/Op)

上記の他にも、CSS3 では数多くのタイプが定義されています。

サポートしているブラウザはまだ無さそうですが、下記のような記法で独自のタイプを定義することも可能です。

@counter-style cjk-heavenly-stem {
    type: alphabetic;
    glyphs: '\7532' '\4E59' '\4E19' '\4E01' '\620A' '\5DF1' '\5E9A' '\8F9B' '\58EC' '\7678';
    /* '甲' '乙' '丙' '丁' '戊' '己' '庚' '辛' '壬' '癸' */
    suffix: '、';
}

使用例

HTML
<h5>none</h5>
<ul style="list-style:none">
  <li>HTML
  <li>CSS
  <li>JavaScript
</ul>
<h5>disc</h5>
<ul style="list-style:disc">
  <li>HTML
  <li>CSS
  <li>JavaScript
</ul>
~略~
<h5>georgian</h5>
<ol style="list-style:georgian">
  <li>HTML
  <li>CSS
  <li>JavaScript
</ol>
表示
none
  1. HTML
  2. CSS
  3. JavaScript
disc
circle
square
box
check
diamond
dash
decimal
  1. HTML
  2. CSS
  3. JavaScript
decimal-leading-zero
  1. HTML
  2. CSS
  3. JavaScript
cjk-ideographic
  1. HTML
  2. CSS
  3. JavaScript
upper-roman
  1. HTML
  2. CSS
  3. JavaScript
lower-roman
  1. HTML
  2. CSS
  3. JavaScript
upper-alpha
  1. HTML
  2. CSS
  3. JavaScript
lower-alpha
  1. HTML
  2. CSS
  3. JavaScript
upper-latin
  1. HTML
  2. CSS
  3. JavaScript
lower-latin
  1. HTML
  2. CSS
  3. JavaScript
upper-greek
  1. HTML
  2. CSS
  3. JavaScript
lower-greek
  1. HTML
  2. CSS
  3. JavaScript
hiragana
  1. HTML
  2. CSS
  3. JavaScript
katakana
  1. HTML
  2. CSS
  3. JavaScript
hiragana-iroha
  1. HTML
  2. CSS
  3. JavaScript
katakana-iroha
  1. HTML
  2. CSS
  3. JavaScript
japanese-formal
  1. HTML
  2. CSS
  3. JavaScript
japanese-informal
  1. HTML
  2. CSS
  3. JavaScript
simp-chinese-formal
  1. HTML
  2. CSS
  3. JavaScript
simp-chinese-informal
  1. HTML
  2. CSS
  3. JavaScript
trad-chinese-formal
  1. HTML
  2. CSS
  3. JavaScript
trad-chinese-informal
  1. HTML
  2. CSS
  3. JavaScript
korean-hangul-formal
  1. HTML
  2. CSS
  3. JavaScript
korean-hanja-formal
  1. HTML
  2. CSS
  3. JavaScript
korean-hanja-informal
  1. HTML
  2. CSS
  3. JavaScript
circled-decimal
  1. HTML
  2. CSS
  3. JavaScript
dotted-decimal
  1. HTML
  2. CSS
  3. JavaScript
double-circled-decimal
  1. HTML
  2. CSS
  3. JavaScript
filled-circled-decimal
  1. HTML
  2. CSS
  3. JavaScript
parenthesized-decimal
  1. HTML
  2. CSS
  3. JavaScript
ethiopic-numeric
  1. HTML
  2. CSS
  3. JavaScript
hebrew
  1. HTML
  2. CSS
  3. JavaScript
armenian
  1. HTML
  2. CSS
  3. JavaScript
georgian
  1. HTML
  2. CSS
  3. JavaScript

Copyright (C) 1997-2012 杜甫々
初版:1997年7月27日、最終更新:2012年5月3日
http://www.tohoho-web.com/css/prop/list-style-type.htm