ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2019.10.02  最終更新日:2021.01.04

CSS

counter-incrementを使って、cssでリストなどの要素に番号をつける方法

画像などで対応するのではなく、cssでリストに番号をつける方法です!

cssでリストに番号を採番する方法

リストのそれぞれの左端に、番号をつけたいときってありますよね。
ランキングや、何かの手順を説明するときなど、色々な場面でリストに番号をつけることはあるかと思います。

以下、手順です。

counter-incrementでつくる単純な連番のリスト

HTML

<ul class="list-number">
    <li>りんご</li>
    <li>みかん</li>
    <li>バナナ</li>
    <li>ぶどう</li>
    <li>キウイ</li>
    <li>メロン</li>
    <li>レモン</li>
</ul>

css

.list-number {
    counter-reset: item;
}

.list-number li:before {
    counter-increment: item;
    content: counter(item)'.';
    display:inline-block;
    margin-right:3px;
}

数字のあとに記号をつけたリスト

数字の後ろに、
1:りんご
のように、『コロン』を入れたい場合の方法です。

HTML

上と同じで大丈夫です!

CSS

上のcssの、content:の部分に後ろに、クォテーションで囲んだコロンを追加してあげる。

content: counter(item)':';

それだけです!

01、02、など、0が付いた数字のリスト

HTML

上と同じで大丈夫です!

CSS

上のcssの、content:の部分に後ろに、decimal-leading-zeroを追加してあげる。

content: counter(item, decimal-leading-zero);

最新記事