[CSS]順序付きリスト、ol要素を丸数字で実装するスタイルシートのテクニック -spanや①は無し

Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。

対応ブラウザはすべてのモダンブラウザで、IEは8+です。

ol要素を丸数字で実装するテクニックはこちら。
丸の形やサイズやカラーなど、デザインを変更することもできます。

Styling <ol> numbers

HTML

HTMLは、olのリストを普通に記述するだけです。

CSS

丸数字の作り方は、まずはol要素に「list-style: none;」でデフォルトのスタイルを取り除き、「counter-reset」と「counter-increment」プロパティでカウントする数字を与え、丸をデザインして適用します。

「counter-reset」と「counter-increment」プロパティのサポートブラウザは、下記の通りです。
オールグリーン状態で、IEは8+です。

CSS Countersのサポートブラウザ

①②③の数値文字参照を使用すると、リスト要素が増える度に④⑤⑥と記述していきますが、この実装方法だと数字は自動でカウントされるので、リストのアイテムをいくつに増やしても問題ありません。