CSSリスト - リストマーカーの種類設定 | list-style-type
2008/05/29 22:18Update
list-style-typeはCSSリストの表示のスタイルに関連する属性で、リスト要素の先頭に表示するマーカーの種類を指定します。 本文はlist-style-typeについて学びたいと思います。
CSSリスト関連記事:
◇ リスト要素概要
◇ list-style-type
◇ list-style-image
◇ list-style-position
CSSのlist-style-type属性は、上のリスト要素の先頭に表示するマーカーの種類を指定します。
■list-style-type属性の値 (別ウィンドウで表示)
◇ none: マーカーなし
■HTMLソース
ソースを別ウィンドウで表示
◇ none: マーカーなし
<ul style="list-style-type:none ">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ disc: 黒丸
<ul style="list-style-type: disc">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ circle: 白丸
<ul style="list-style-type: circle">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ square: 四角
<ul style="list-style-type: square">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ decimal: 数字
<ul style="list-style-type: decimal">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ upper-alpha: 大文字アルファベット
<ul style="list-style-type: upper-alpha">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ lower-alpha: 小文字アルファベット
<ul style="list-style-type: lower-alpha">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ upper-roman: 大文字ローマ数字
<ul style="list-style-type: upper-roman">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ lower-roman: 小文字ローマ数字
<ul style="list-style-type: lower-roman">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
<div>
▼ Netscape6、Firefox、Opera7(一部のみ対応)
</div>
◇ decimal-leading-zero: 2桁の数字
<ul style="list-style-type: decimal-leading-zero">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ lower-greek: 小文字ギリシャ文字
<ul style="list-style-type: lower-greek">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ upper-latin: 大文字ラテン文字
<ul style="list-style-type: upper-latin">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ lower-latin: 小文字ラテン文字
<ul style="list-style-type: lower-latin">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ hebrew: ヘブライ数字
<ul style="list-style-type: hebrew">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ armenian: アルメニア数字
<ul style="list-style-type: armenian">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ georgian: グルジア数字
<ul style="list-style-type: georgian">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ cjk-ideographic: 漢数字(一、二、三)
<ul style="list-style-type: cjk-ideographic">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ hiragana: ひらがな
<ul style="list-style-type: hiragana">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ katakana: カタカナ
<ul style="list-style-type: katakana">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ hiragana-iroha: いろは
<ul style="list-style-type: hiragana-iroha">
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ katakana-iroha: イロハ
<ul style="list-style-type: katakana-iroha">
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ リスト要素概要
◇ list-style-type
◇ list-style-image
◇ list-style-position
list-style-type属性
CSSのlist-style-type属性は、上のリスト要素の先頭に表示するマーカーの種類を指定します。
■list-style-type属性の値 (別ウィンドウで表示)
◇ none: マーカーなし
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
▼ Netscape6、Firefox、Opera7(一部のみ対応)
◇ decimal-leading-zero: 2桁の数字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
- 文字
■HTMLソース
ソースを別ウィンドウで表示
◇ none: マーカーなし
<ul style="list-style-type:none ">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ disc: 黒丸
<ul style="list-style-type: disc">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ circle: 白丸
<ul style="list-style-type: circle">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ square: 四角
<ul style="list-style-type: square">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ decimal: 数字
<ul style="list-style-type: decimal">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ upper-alpha: 大文字アルファベット
<ul style="list-style-type: upper-alpha">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ lower-alpha: 小文字アルファベット
<ul style="list-style-type: lower-alpha">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ upper-roman: 大文字ローマ数字
<ul style="list-style-type: upper-roman">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ lower-roman: 小文字ローマ数字
<ul style="list-style-type: lower-roman">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
<div>
▼ Netscape6、Firefox、Opera7(一部のみ対応)
</div>
◇ decimal-leading-zero: 2桁の数字
<ul style="list-style-type: decimal-leading-zero">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ lower-greek: 小文字ギリシャ文字
<ul style="list-style-type: lower-greek">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ upper-latin: 大文字ラテン文字
<ul style="list-style-type: upper-latin">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ lower-latin: 小文字ラテン文字
<ul style="list-style-type: lower-latin">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ hebrew: ヘブライ数字
<ul style="list-style-type: hebrew">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ armenian: アルメニア数字
<ul style="list-style-type: armenian">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ georgian: グルジア数字
<ul style="list-style-type: georgian">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ cjk-ideographic: 漢数字(一、二、三)
<ul style="list-style-type: cjk-ideographic">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ hiragana: ひらがな
<ul style="list-style-type: hiragana">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ katakana: カタカナ
<ul style="list-style-type: katakana">
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ hiragana-iroha: いろは
<ul style="list-style-type: hiragana-iroha">
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
◇ katakana-iroha: イロハ
<ul style="list-style-type: katakana-iroha">
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>
Sponsored Link
- Relative Articles
- CSSリスト - リストマーカーの種類設定 | list-style-image - (2008/05/29 22:17)
- CSSリスト - リストマーカーの表示位置設定 | list-style-position - (2008/05/29 22:16)
- CSSリスト - リストマーカーのまとめ設定 | list-style - (2008/05/29 22:13)
- リスト要素概要 - (2008/05/29 21:40)