list-style-type 【リストマーカーに関する指定】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]

list-style-typeプロパティは、リストマーカーの種類を指定する際に使用します。表示の仕方はブラウザに依存するので、確認が必要です。

none
何も付かない状態です。これが初期値です。

disc
黒い丸が付きます。

circle
白抜きの丸が付きます。

square
黒い四角が付きます。

lower-roman
小文字のローマ数字が付きます。

upper-roman
大文字のローマ数字が付きます。

lower-greek
小文字のギリシャ数字が付きます。

decimal
数字が付きます。

decimal-leading-zero
先頭に0の付いた数字が付きます。

lower-latin
小文字のアルファベットが付きます。

lower-alpha
小文字のアルファベットが付きます。

upper-latin
大文字のアルファベットが付きます。

upper-alpha
大文字のアルファベットが付きます。

cjk-ideographic
漢数字が付きます。

hiragana
『あいうえお』が付きます。

katakana
『アイウエオ』が付きます。

hiragana-iroha
『いろはにほへと』が付きます。

katakana-iroha
『イロハニホヘト』が付きます。

hebrew
ヘブライ数字が付きます。

armenian
アルメニア数字が付きます。

georgian
グルジア数字が付きます。

list-style-typeの使用例

CSSファイル

.sample001 {
 list-style-type: disc;
 margin: 10px;
}
.sample002 {
 list-style-type: upper-roman;
 margin: 10px;
}
.sample003 {
 list-style-type: decimal;
 margin: 10px;
}
li {
 padding : 5px;
 margin-left: 20px;
}

HTMLソース

<ul class="sample001">
<li>リストスタイル disc</li>
<li>リストスタイル disc</li>
<li>リストスタイル disc</li>
</ul>
<ul class="sample002">
<li>リストスタイル upper-roman</li>
<li>リストスタイル upper-roman</li>
<li>リストスタイル upper-roman</li>
</ul>
<ul class="sample003">
<li>リストスタイル decimal</li>
<li>リストスタイル decimal</li>
<li>リストスタイル decimal</li>
</ul>

表示すると

  • リストスタイル disc
  • リストスタイル disc
  • リストスタイル disc
  • リストスタイル upper-roman
  • リストスタイル upper-roman
  • リストスタイル upper-roman
  • リストスタイル decimal
  • リストスタイル decimal
  • リストスタイル decimal

リスト関連項目

list-style マーカーに関する指定をまとめて行う 
list-style-type マーカー文字の種類を指定する 
list-style-image マーカー画像を指定する 
list-style-position マーカーの表示位置を指定する 
marker-offset※ マーカーとの間隔を指定する 

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img