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※ | マーカーとの間隔を指定する |
