意外と知らなかったlist-styleとcounterの使い方

みなさん、こんにちわ。
かれこれマークアップを５年近くやっているのですが、list-styleとcounterプロパティについて見落としていたことがあったので、備忘録として書いておきます。

同じことやっている人がいたら、今日たった今、一緒に卒業しましょう！！

list-styleの種類

まずはlist-styleプロパティについておさらいですが、これだけの種類があります。
reset.cssなんかでnoneにして考えもしない人も多いと思いますが、今一度見直してみましょう！

意外と知らなかったものありませんでしたか？
わたしは半分以上存在を忘れてました。

counter

続いてcounterプロパティについてですが、指定する際には、以下の３セットを使用する形になります。
親子３代に渡って指定するファミリーセットとして覚えましょう。

親：counter-reset

カウントする範囲を指定します。実際にカウントする親要素に対してしてします。liタグでカウントする場合は、olタグに付与する形ですね。
同じページ内で複数ある場合、カウントはリセットされて1からカウントし直されます。

子：counter-increment

カウントされる要素に対して指定し、該当する要素がある度にカウントアップされます。

孫：counter()

カウントしたものを表示する要素に指定します。カウントされる要素の擬似要素::beforeに付与することが多いかと思います。

いろんなstyle-typeでcounterを使う

数年マークアップをやっていて意外と知らなかったことなのですが、counterプロパティはいろんなstyle-typeをつかってカウントすることができます。

指定の仕方は、counterを表示するところで、content: counter(hoge, hiragana);のようにカンマ区切りでlist-style-typeを指定するだけです。

.parents {
    counter-reset: hoge;
    list-style: none;

    > li {
        counter-increment: hoge;

        &::before {
            content: counter(hoge, hiragana);
        }
    }

}

9までは、01、02、03。10以上は通常通りにつけたいとき、nth-childとSassのif分なんかを駆使してやっていたのですが、list-style-type: decimal-leading-zeroすれば簡単なことだった…

きれいにデザインして、CSSで装飾してあげながらつかうとオリジナルのカウント付きリストが使えます。

簡単な一手間を加えてデザイン性の高いリストをつくってみてください！