今回は、ナンバリングする際によく使うcounter表記をまとめました。

コピペ出来るので、是非使ってみてください。

本記事ではナンバリングの仕組みについては解説しないので、もし知りたい方がいましたら、こちらの記事を参照してください。

【CSS】ナンバリングのcounter表記一覧

数字(デフォルト)

ul {
    counter-reset: menu;
}
ul li::before {
    counter-increment: menu;
    content: counter(menu)".";
}

大文字アルファベット

ul {
    counter-reset: menu;
}
ul li::before {
    counter-increment: menu;
    content: counter(menu,upper-alpha)".";
}

小文字アルファベット

ul {
    counter-reset: menu;
}
ul li::before {
    counter-increment: menu;
    content: counter(menu,lower-alpha)".";
}

ひらがな大文字

ul {
    counter-reset: menu;
}
ul li::before {
    counter-increment: menu;
    content: counter(menu,hiragana)".";
}

ひらがな(いろは)

ul {
    counter-reset: menu;
}
ul li::before {
    counter-increment: menu;
    content: counter(menu,hiragana-iroha)".";
}

カタカナ

ul {
    counter-reset: menu;
}
ul li::before {
    counter-increment: menu;
    content: counter(menu,katakana)".";
}

カタカナ(いろは)

ul {
    counter-reset: menu;
}
ul li::before {
    counter-increment: menu;
    content: counter(menu,katakana-iroha)".";
}

大文字のローマ数字

ul {
    counter-reset: menu;
}
ul li::before {
    counter-increment: menu;
    content: counter(menu,upper-roman)".";
}

小文字のローマ数字

ul {
    counter-reset: menu;
}
ul li::before {
    counter-increment: menu;
    content: counter(menu,lower-roman)".";
}

まとめ

以上が、counter表記のまとめでした。