見出しの前にCSSを使って丸数字を自動でつけたい

女の子

見出しに丸数字をいれたい

その都度 ひとつひとつ入れるのは面倒

男の子

こんな悩みをもっている方へ 自動で見出しにナンバリングする方法を紹介している記事になります。

いくつかの手法がありますが、簡単なこの手法でブログ記事作りの悩みをひとつ減らすことができるかも知れません。
とても簡単なので参考にして下さい。

以下 『記事まとめ』に沿った順番で解説していきます。

先生

CSSを利用して自動自動ナンバリングするコード紹介

See the Pen 見出しに自動ナンバリングする by Rami (@yomoriy) on CodePen.

丸数字（特殊文字）はcontent で使える特殊文字コード（数値文字参照16進）を使用しています。Unicodeで用意されているのは１から２０までの丸数字です。
もし21以上の丸数字を使用したいなら「画像の丸数字」か「CSSで作る丸数字」を考える必要があります。

カスタマイズの方法は？

カスタマイズすると用途はどんどん広がります。

• h2の部分をh3に変更可能
• 色を変えることも可能
• 大きさや余白部分の変更も可能
• 他のCSSと組みあわせOK

CSSはどこに記述すればよい？

CSS（スタイルシート）の記述先は３つあります。

1. 外部CSSに書く
2. HTMLのstyle内に書く
3. インラインで書く

丸数字をたくさんのページで用いる場合は 外部CSSに記載するのが便利です。

その他の方法

• 丸数字の画像をCSSで見出しの前に配置する方法

丸囲みテキストのコード提供サイト

※ちなみにWindows パソコンにある①～㊿までの丸数字は環境依存文字なので文字化けしてしまうので使用できない。