順序リスト（ol）のリスト番号タイプを、スタイルシート（CSS）で指定する方法。
順序リストとは、下記のようなリストタグのこと。
|
ソース
|
表示
|
1
2
3
4
| <ol>
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
リスト番号タイプを指定するには、list-style-type プロパティを使う。
HTML4.01 では、ol 要素の type 属性が使えたが、HTML 5 において、廃止されたので、今後は、list-style-type を、使う機会が増えることだろう。
概要
list-style-type: ***;
***には、decimal、upper-roman、lower-roman、upper-alpha、lower-alpha、none、decimal-leading-zero、upper-latin、lower-latin、cjk-ideographic、hebrew、armenian、georgian、lower-greek、hiragana、katakana、hiragana-iroha、katakana-iroha のいずれかを入れる。
list-style-type は、CSS 1 で定義されたプロパティだが、値は、CSS 1 で定義された値と、CSS 2 で定義された値がある。
CSS 1 で定義された値は、ほとんどのブラウザが対応しているが、CSS 2 で定義された値は、ブラウザによっては、対応していないこともある。
list-style-type と、list-style-image を、同時に使用した場合、list-style-image が優先される。
CSS 1 で定義された値
ほとんどのブラウザが対応している。
decimal
数字。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: decimal;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
upper-roman
大文字のローマ数字。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: upper-roman;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
lower-roman
小文字のローマ数字。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: lower-roman;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
upper-alpha
大文字のアルファベット。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: upper-alpha;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
lower-alpha
小文字のアルファベット。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: lower-alpha;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
none
リストマーカーなし。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: none;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
CSS 2 で定義された値
ブラウザによっては、対応していないこともある。
decimal-leading-zero
２桁の数字。10未満の数字の場合、先頭に 0 が付く。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: decimal-leading-zero;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
upper-latin
大文字のアルファベット。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: upper-latin;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
lower-latin
小文字のアルファベット。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: lower-latin;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
cjk-ideographic
漢数字。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: cjk-ideographic;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
hebrew
ヘブライ数字。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: hebrew;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
armenian
アルメニア数字。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: armenian;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
georgian
グルジア数字。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: georgian;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
lower-greek
小文字のギリシャ文字。
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: lower-greek;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
hiragana
ひらがな。あ・い・う・え・お…
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: hiragana;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
katakana
カタカナ。ア・イ・ウ・エ・オ…
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: katakana;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
hiragana-iroha
ひらがな。い・ろ・は・に・ほ・へ・と…
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: hiragana-iroha;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|
katakana-iroha
カタカナ。イ・ロ・ハ・ニ・ホ・ヘ・ト…
|
ソース
|
表示
|
1
2
3
4
| <ol style="list-style-type: katakana-iroha;">
<li>項目</li>
<li>項目</li>
</ol> |
|
- 項目
- 項目
|