HTMLでリストを作る時は、ul（Unordered List）またはol（Ordered List）のいずれかで作成することになると思います。

そのうち、今回は ol の方で、ちょっと変わったリストを作る方法を紹介します。

標準のCSSでできるもの

CSSの、list-style-type を使って指定できるものは、そこを書き換えればOKです。標準でも、結構な種類があるようです。

デフォルト

何も指定しなかった時は、算用数字になります。

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

decimal

list-style-type:decimal は、デフォルトのそれとおなじになります。
decimal-leading-zero とすると、先頭に「0」が付くようになります。桁を揃えたい時に。
ただし、リストが3桁になるような場合でも「009」「010」…「099」「100」とはならず、「09」「10」…「99」「100」となるようです。

もっともそんなに長いリストを使う機会がどのくらいあるのかって気はしますが。どうしても3桁のときに「001」とかやりたい場合は、後述する方法でできないことはないです。

decimal-leading

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

decimal-leading-zero

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

99. Lorem ipsum.
100. Lorem ipsum dolor.
101. Lorem ipsum dolor sit.

roman

list-style-type: *-roman は、ローマ数字になります。
***の部分が upper か lower かで大文字、小文字が変化します。

lower-roman

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

upper-roman

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

greek

list-style-type: *-greek は、ギリシャ文字になります。
***の部分が upper か lower かで大文字、小文字が変化します。

upper-greek

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

lower-greek

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

latin / alpha

list-style-type: *-latin は、ラテン文字（アルファベット）になります。
***の部分が upper か lower かで大文字、小文字が変化します。

また、latin の代わりに alpha を指定しても同様です。

lower-latin

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

lower-alpha

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

upper-latin

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

upper-alpha

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

cjk-ideographic

ist-style-type: cjk-ideographic は、漢数字になります。

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

hiragana / katakana

list-style-type: hiragana; と list-style-type: katakana; はあいうえお順のリストになります。

hiragana

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

katakana

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

hiragana-iroha / katakana-iroha

hiragana / katakana に -iroha をつけると、いろはにほへと順となります。

hiragana-iroha

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

katakana-iroha

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

hebrew

list-style-type: hebrew; は、ヘブライ数字になります。

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

armenian

list-style-type: armenian; は、アルメニア数字になります。

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

georgian

list-style-type: georgian; は、グルジア数字になります。

1. Lorem ipsum.
2. Lorem ipsum dolor.
3. Lorem ipsum dolor sit.

上記以外のものを使いたい場合 

これら以外のものを使いたい場合は、直接書いてしまうことで一応対応は可能です。その際に、リストの数字分だけ左にずれるようにしたいので、数字だけ span でかこってそれを li 要素に対し絶対配置で左側に飛び出させればOKそうです。

言葉だと説明しにくいのでとりあえずコードを。

大字のリストをつくる

大字ってのは、「壱」「弐」「参」といった難しい書き方をする漢数字です。中二心がくすぐられます。お札とかに使われてますね。

html

css

こういうふうにすれば、大字のリストが作れますね。
細かい余白とかはうまく調整してください（←

fiddle

丸数字のリストをつくる

基本的には上と同じでいいのですが、丸数字「①」「②」「③」などは、機種依存文字なのでそのまま使うと文字化けを起こす原因になったりもします。

例えば、Windowsで「１」を変換して出す丸数字は、Macで見ると「㉀」とか「㈰」みたいな記号に化けてしまったりします。

なので、これらは文字参照を使って入力すると安全に丸数字のリストが作れるようになります。

文字参照は、日本語でよくある特殊な記号や数字なんかを文字化けしないで表示させるのに使われる方法で、コピーライトマークの「©」とか半角スペースの「 」なんかもその仲間だと思います。これらは文字から想像できるんですが、数字だとわかりにくいですよねぇ。

因みに16進数記法と10進数記法があり、今回は10進数だけ紹介しましたが、Wikipediaとかで記号を調べると大抵は載ってたりします。

丸数字 – Wikipedia

あとは、こういうツールで調べる方法もあります↓
数値文字参照用変換スクリプト

これなら数字以外でもなんでも変換できるっぽいので、究極的には、すべて文字参照で文章を書くことも出来ます。普通やらないと思うけど…。

メリット・デメリット

さて、最後にこの方法にもメリットとデメリットがありますので、それについて軽く書いてみますね。自分が思いついた範囲でだけですが。

メリット

この方法のメリットは、どんな数字や記号でも付けることが可能だということです。例えば、例で挙げる大字や丸数字以外でも、「１）」とか「[1]」みたいのも可能になります。

デメリット

逆にデメリットもあります。それは、すでにある li と li の間に新たに追加した際に、自動的にそれ以下が押し出されないというものです。

例えば、以下のリストのアイテム３の下に「アイテムA」を追加すると…

1. アイテム１
2. アイテム２
3. アイテム３
4. アイテム４
5. アイテム５

1. アイテム１
2. アイテム２
3. アイテム３
4. アイテムA
5. アイテム４
6. アイテム５

こんな風に、アイテムAが「4」になり、それいかが１つずつ増えています。しかし、この方法ではこれができません。つまり、間になにか要素が増えると、自分で  <span class=”num”></span> の中身をすべて書き換えるひつようがあります。

10件くらいならまだ頑張れるかもしれませんが、30件位のリストの5番目くらいに追加仕様とした場合は、25回も修正する必要があります。

これはちょっとめんどいですね…。

ちなみに…

この方法ではそもそもリストマーカーを消しちゃってるので、見た目的には ul でも ol でも表向きは変化がなくなります（マーカー見えないし）ので、使い分ける意味がないように感じるかもしれませんが、一応番号付きのリストは ol 要素ですので、ol 要素に li を追加した分だけ寿命が縮む呪いとかにかかっていない限りはこっちでマークアップしときましょう。