list-style-type : upper-roman が効かない理由はブログサービスの違いだった

リストマークをローマ数字や日本語表示したいと思い、色々試してみたが表示できなかった。本やネットで調べてみたが文法やスペルミスが原因という情報以上は分からなかった。

もしかしてブログサービスにより異なるのではと思い、試してみた。効かないブログを別のブログにコピペするとちゃんと表示できた。

その記録と、リストマークの種類を残しておきます。

1　リストのマークの種類

リストマーク表示

「ul」 or 「ol」は、下記のリストマークが使える。

list-style-type : none; ～ マーク不使用
list-style-type : disc; ～ 黒丸 (初期値)
list-style-type : circle; ～ 白丸
list-style-type : square; ～ 黒四角
list-style-type : decimal; ～ 数字
list-style-type : decimal-leading-zero; ～ 数字(zero-fill)
list-style-type : lower-roman; ～ ローマ数字･小文字
list-style-type : upper-roman; ～ ローマ数字･大文字
list-style-type : lower-greek; ～ ギリシア文字･小文字
list-style-type : lower-alpha; ～ アルファベット･小文字(CSS1から)
list-style-type : upper-alpha; ～ アルファベット･大文字(CSS1から)
list-style-type : lower-latin; ～ アルファベット･小文字(CSS2から)
list-style-type : upper-latin; ～ アルファベット･大文字(CSS2から)
list-style-type : cjk-ideographic; ～ 漢数字
list-style-type : hiragana; ～ ひらがな
list-style-type : katakana; ～ カタカナ

他にも「いろは･各国語表示」があるが略。

ちなみに、ブラウザがchromeで、ウェブリーブログとseesaaブログでは、ulは黒丸、olは数字しか表示できなかったが、はてなブログはul、olのどちらも表示できた。

ブログサービスにより対応状況が異なるようだ。

2　HTML･CSSの記述

CSSの記述例は以下の通り

基本：li {list-style-type : リストマークの種類}
.li-cc {list-style-type : circle;}白丸
.li-sq {list-style-type : square;}黒四角
.li-lr {list-style-type : lower-roman;}ローマ数字小
.li-ur {list-style-type : upper-roman;}ローマ数字大
.li-lg {list-style-type : lower-greek;}ギリシャ文字小
.li-la {list-style-type : lower-alpha;}アルファベット小
.li-ua {list-style-type : upper-alpha;}アルファベット大
.li-ci {list-style-type : cjk-ideographic;}漢数字
.li-kk {list-style-type : katakana;}カタカナ

HTMLは以下のような記述(ulとol共通)

＜ul> >＜li class="クラス名"> ～ ＜/li>＜/ul>

3　実例

ulを使ってひらがな表示させると、以下のようになった

• aaaaaa
• bbbbbbbbbbbbbbbbb
• ccccccccccccccc

olを使ってローマ数字･大文字表示させると、以下のようになった

1. aaaaaa
2. bbbbbbbbbbbbbbbbb
3. ccccccccccccccc