copy_people copy_things copy_matter ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2021/08/04

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

Written by Masayuki Yamada

  • CSS

INDEX

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

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

    list-styleの種類

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

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

    counter

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

    親: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で装飾してあげながらつかうとオリジナルのカウント付きリストが使えます。

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

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View