2018年07月30日(月)

olタグのリスト番号をcounterプロパティを使ってCSSで装飾する

• 0
• 0
• 2
• 6

olタグのリストに、自動で付与される番号を装飾する方法をご紹介します。
この方法なら順番の入れ替えがあっても、柔軟に対応できるリストが作れます。

主に使うプロパティ

counter-reset: カウンター名 番号の初期値; カウンター名と番号の初期値を指定します。
番号の初期値のデフォルトは０です。 content: counter(カウンター名) “カウンターに挿入する文字列”; カウンターの表示形式を指定します。カウンターの前後に 「””」で囲った文字列が表示されます。 counter-increment: カウンター名 増加させる値; カウンターを増加させる値を指定します。デフォトは1です。

CSS

CSSは以下のとおりです。(SCSSで書かれています)
before で番号の背景になるエリアを設定して、after でカウンターの設定を行っています。
また、入れ子の番号リストが存在した時にカウンターと装飾が影響しないよう、.numberクラスがついたol直下のliのみにカウンターを入れるようにしています。

.number { list-style: none; counter-reset: circ...