list-style(リストスタイル)について

リスト(ul etc)要素関連の設定を一括指定するプロパティです。

list-style(リストスタイル)の概念図

list-style-typeのブラウザ表示例(一部表示されません)

■CSS記述
.sample { list-style-type:(値); }
■XHTML記述
<ul class="sample">

<li>サンプル</li>

</ul>
  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • lower-latin
  • upper-latin
  • lower-greek
  • hebrew
  • armenian
  • georgian
  • cjk-ideographic
  • hiragana
  • katakana
  • hiragana-iroha
  • katakana-iroha
  • none

list-style-imageのブラウザ表示例

■CSS記述
.sample { list-style-type:none; list-style-image:url(../images/sample.gif); list-style-position:inside; }
■XHTML記述
<ul class="sample">

<li>サンプル</li>

</ul>
  • サンプル

list-style(リストスタイル)の設定方法

一括設定
list-style: (タイプ) (画像) (表示位置);
リストタイプ設定
list-style-type: (値);
リスト画像設定
list-style-image: (値);
リスト表示位置設定
list-style-position: (値);

list-style(リストスタイル)の値

リストタイプ設定
disc(黒丸) , circle(白丸) , square(スクエア) , decimal(数字) , decimal-leading-zero(01～数字) , lower-roman(小文字ローマ数字) , upper-roman(大文字ローマ数字) , lower-alpha(小文字アルファベット) , upper-alpha(大文字アルファベット) , lower-latin(小文字ラテン) , upper-latin(大文字ラテン) , lower-greek(小文字ギリシャ) , hebrew(ヘブライ数字) , armenian(アルメニア数字) , georgian(グルシア数字) , cjk-ideographic(漢数字) , hiragana(ひらがな) , katakana(カタカナ) , hiragana-iroha(いろは) , katakana-iroha(イロハ) , none(表示しない)
リスト画像設定
url("画像のパス")
リスト表示位置設定
inside(BOXの内側に表示) , outside(BOXの外側に表示)