CSSリスト - リストマーカーの種類設定 | list-style-type

2008/05/29 22:18Update
TAGS: CSSリスト | マーカー | list-style-type

Syboos.jp編集長

list-style-typeはCSSリストの表示のスタイルに関連する属性で、リスト要素の先頭に表示するマーカーの種類を指定します。 本文はlist-style-typeについて学びたいと思います。

CSSリスト関連記事:
◇ リスト要素概要
◇ list-style-type 
◇ list-style-image
◇ list-style-position


list-style-type属性



CSSのlist-style-type属性は、上のリスト要素の先頭に表示するマーカーの種類を指定します。

■list-style-type属性の値 (別ウィンドウで表示

◇ none: マーカーなし
  • 文字
  • 文字
  • 文字
◇ disc: 黒丸
  • 文字
  • 文字
  • 文字
◇ circle: 白丸
  • 文字
  • 文字
  • 文字
◇ square: 四角
  • 文字
  • 文字
  • 文字
◇ decimal: 数字
  • 文字
  • 文字
  • 文字
◇ upper-alpha: 大文字アルファベット
  • 文字
  • 文字
  • 文字
◇ lower-alpha: 小文字アルファベット
  • 文字
  • 文字
  • 文字
◇ upper-roman: 大文字ローマ数字
  • 文字
  • 文字
  • 文字
◇ lower-roman: 小文字ローマ数字
  • 文字
  • 文字
  • 文字
▼ Netscape6、Firefox、Opera7(一部のみ対応)
◇ decimal-leading-zero: 2桁の数字
  • 文字
  • 文字
  • 文字
◇ lower-greek: 小文字ギリシャ文字
  • 文字
  • 文字
  • 文字
◇ upper-latin: 大文字ラテン文字
  • 文字
  • 文字
  • 文字
◇ lower-latin: 小文字ラテン文字
  • 文字
  • 文字
  • 文字
◇ hebrew: ヘブライ数字
  • 文字
  • 文字
  • 文字
◇ armenian: アルメニア数字
  • 文字
  • 文字
  • 文字
◇ georgian: グルジア数字
  • 文字
  • 文字
  • 文字
◇ cjk-ideographic: 漢数字(一、二、三)
  • 文字
  • 文字
  • 文字
◇ hiragana: ひらがな
  • 文字
  • 文字
  • 文字
◇ katakana: カタカナ
  • 文字
  • 文字
  • 文字
◇ hiragana-iroha: いろは
  • 文字
  • 文字
  • 文字
  • 文字
◇ katakana-iroha: イロハ
  • 文字
  • 文字
  • 文字
  • 文字



■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