【css】ol要素で①②などの丸数字を表示させる方法

ol要素で①②などの丸数字を表示させる方法をご紹介します。

丸数字は環境依存文字で表示することも出来ますが、今回はcssで実装したいと思います。

完成形デモ

See the Pen ol要素で丸数字を表示する by crnote (@crnote) on CodePen.

HMTL

HTMLの記述はシンプルです。

  1. <ol>
  2.   <li>リスト1</li>
  3.   <li>リスト2</li>
  4.   <li>リスト3</li>
  5.   <li>リスト4</li>
  6.   <li>リスト5</li>
  7. </ol>

CSS

ol要素の設定

「ol」に「list-style:none」を指定しておきます。

「counter-reset: list-counter;」で、list-counterの値を0にリセットします。

  1. ol {
  2.   list-style: none;
  3.   counter-reset: list-counter;
  4.   padding: 0;
  5.   margin: 0;
  6. }

li要素の設定

「li」に「position: relative;」を指定し、「li:before」に丸数字のスタイルを指定していきます。

「content: counter(list-counter);」と「counter-increment: list-counter;」で自動で連続する数字が表示されます。

丸の部分は、「border」で作成します。

  1. li {
  2.   font-size: 16px;
  3.   line-height: 1.5;
  4.   margin: 20px 0;
  5.   padding-left: 30px;
  6.   position: relative;
  7. }
  8. li:before {
  9.   content: counter(list-counter);
  10.   counter-increment: list-counter;
  11.   border: 1px solid;
  12.   box-sizing: border-box;
  13.   border-radius: 50%;
  14.   height: 22px;
  15.   width: 22px;
  16.   display: flex;
  17.   justify-content: center;
  18.   align-items: center;
  19.   position: absolute;
  20.   top: 0;
  21.   left: 0;
  22.   font-size: 85%;
  23. }

まとめ

cssで指定しておくと自動で数字が表示されるので、リストが追加になったときにも簡単に対応することが出来て便利かと思います。

丸数字のスタイルを変えることで、白抜きの丸数字など自由に表現することが出来ます。

PAGE TOP