Web制作をしていると、番号付きリストの数字のフォーマットを変えたり、順番を変えたりしたいシチュエーションが少なからずあると思います。また運用の中でそのような依頼をされることもしばしばあります。
そんな時に色々検索してやり方を探してみても、擬似要素やJSでゴチャゴチャするなど面倒くさそうな方法の解説記事ばかりが目立ちます。そこで、<ol>の番号をカスタマイズする比較的シンプルでスマートな方法をまとめてみました。すぐ思い出せるようにブックマーク推奨です！
リスト番号の順番を降順にする最も簡単な方法は、<ol>タグにreversed属性をつける方法です。これだけで並び順が・・・3,2,1の降順になります。
See the Pen ol reversed by toshihide (@toshihide2000) on CodePen.
カウントの開始番号を変更するには、<ol>タグにstart属性を追加します。
See the Pen ol カウントスタート変更 by toshihide (@toshihide2000) on CodePen.
<li>タグにvalue属性をつけると、途中から番号を変更することもできます。
See the Pen リストのスタート番号を途中から変更 by toshihide (@toshihide2000) on CodePen.
カウント開始番号の変更、途中からの番号の変更、並び順の変更は組み合わせることができます。
See the Pen リストを逆順にしてスタート番号を変更 by toshihide (@toshihide2000) on CodePen.
デフォルトでは1ずつ増えていくリスト番号ですが、CSSのみで簡単に増え方を変更することもできます。
See the Pen リスト番号を2の倍数に変更 by toshihide (@toshihide2000) on CodePen.
まず<ol>にcounter-reset:list-counter;を指定することでカウンターを設定します。
次に、子要素の<li>にcounter-increment:list-counter 2;を指定し、カウンターが2ずつ増えるようにしています。
そして、それを::marker擬似要素にcontent: counter(list-counter);を指定して表示させています。
::marker擬似要素::marker はリスト項目の箇条書き記号ボックス（黒丸や番号が入ったもの）を選択します。
これは<li>要素や<summary>要素などのdisplay:list-itemが設定された要素で利用できます。
上記の応用で、リスト番号の前後に文字を追加することができます。これにより、（１）や項目1といった柔軟なリスト番号を実現可能です。
See the Pen olの番号をカスタム by toshihide (@toshihide2000) on CodePen.
基本的には上記の「カウントの倍数を変更する方法」と同じです。この例では、::markerの指定を content: "1-"counter(item)". ";としています。
カウンターの前後に文字列を挿入することで、1-1.,1-2.,・・・という表記を実現しています。
リストの番号は、デフォルトではリストの外側に表示されます。
list-style-position:inside;をolに指定することで、<li>の幅に::marker擬似要素を含めることができます。
See the Pen list-style-position by toshihide (@toshihide2000) on CodePen.
リスト番号は、デフォルトではアラビア数字で表示されます。
このリスト番号は、アルファベットやローマ字などに変更することができます。
数字をアルファベットに変更
type属性で指定する
<ol>のtype属性をtype="A"とすることで、リスト番号をABC順にすることができます。
type 属性は、そのリスト番号について前後の文章で言及する場合にのみ使用することが推奨されます。装飾の都合で記号を変更する場合には type 属性ではなく後述のCSS を使用すべきです。
See the Pen リスト記号をアルファベットに変更（type属性） by toshihide (@toshihide2000) on CodePen.
CSSで指定する
olにlist-style-type: upper-latin;を指定することで、大文字のアルファベット順にすることができます。
list-style-type: lower-latin;を指定することで小文字のアルファベット順にすることができます。
See the Pen リスト記号をアルファベットに変更（CSS） by toshihide (@toshihide2000) on CodePen.
数字をローマ字に変更
type属性で指定する
<ol>のtype属性をtype="I"とすることで、リスト番号をローマ数字にすることができます。
See the Pen Untitled by toshihide (@toshihide2000) on CodePen.
CSSで指定する
olに list-style-type: upper-roman;を指定することで、大文字のローマ数字順にすることができます。
See the Pen リスト記号をローマ数字に変更（CSS） by toshihide (@toshihide2000) on CodePen.
他にも漢数字など様々な記号を使用することができます。詳しく知りたい方はhttps://developer.mozilla.org/ja/docs/Web/CSS/list-style-type
