list-style

リストに付加するマークに対して、関連するプロパティ(「種類、画像、配置位置」)をまとめて指定します。

ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N4 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

書式

要素[.class名][#id名]{ list-style : [list-style-type] [list-style-image] [list-style-position];

※プロパティの指定順は自由で、また、各プロパティは省略可能です。

▲PageTop

指定できる値

値	初期値	意味
inherit		親要素の値を継承します。

・list-style-typeプロパティの指定(リストマークの指定)
値	初期値	意味
disk	○	塗りつぶされた円をリストのマークにします。
circle		白抜きの円をリストのマークにします。
square		塗りつぶされた四角をリストのマークにします。
decimal		数字(1～)をリストのマークにします。
decimal-leading-zero		数字(01～)をリストのマークにします。
lower-roman		小文字のローマ数字をリストのマークにします。
upper-roman		大文字のローマ数字をリストのマークにします。
lower-greek		小文字のギリシャ文字をリストのマークにします。
lower-alpha		小文字のアルファベットをリストのマークにします。
upper-alpha		大文字のアルファベットをリストのマークにします。
lower-latin		アルファベットの小文字をリストのマークにします。
upper-latin		アルファベットの大文字をリストのマークにします。
hebrew		ヘブライ数字をリストのマークにします。
armanian		アルメニア数字をリストのマークにします。
georgian		グルジア数字をリストのマークにします。
cjk-ideographic		漢数字をリストのマークにします。
hiragana		ひらがな(あ～)をリストのマークにします。
katakana		カタカナ(カ～)をリストのマークにします。
hiragana-iroha		ひらがな(いろは～)をリストのマークにします。
katakana-iroha		カタカナ(イロハ～)をリストのマークにします。
none		何も表示しません。

・list-style-imageプロパティの指定(リストマークに使用するイメージ画像の指定)
値	初期値	意味
none	○	リスト項目のマークにイメージを使用しません。
URL		リスト項目のマークに使用する画像のURLを指定します。

・list-style-positionプロパティの指定(リストマークの表示位置の指定)
値	初期値	意味
outside	○	リスト項目の外側に配置されます。。
inside		リストの項目の内側に配置されます。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        list-style : decimal outside none;
      }
      #sample2 {
        list-style : upper-alpha inside none;
      }
    </style>
  </head>
  <body>
    <p>list-styleのサンプル1</p>
    <ol id="sample1">
      <li>list-style-type : decimal</li>
      <li>list-style-imag : none</li>
      <li>list-style-position : outside</li>
    </ol>
    <br>
    <p>list-styleのサンプル2</p>
    <ol id="sample2">
      <li>list-style-type : upper-alpha</li>
      <li>list-style-imag : none</li>
      <li>list-style-position : inside</li>
    </ol>
  </body>
</html>

表示結果

list-styleのサンプル1

list-style-type : decimal
list-style-imag : none
list-style-position : outside

list-styleのサンプル2

list-style-type : upper-alpha
list-style-imag : none
list-style-position : inside

▲PageTop

list-style

ブラウザ

書式

指定できる値

サンプル

ソースコード

表示結果

関連項目

HTML

CSS