リストの先頭に数字がついたデザインってよくありますよね？あれ、皆さんはどうやって構築していますか？
私の場合、納品後のメンテナンス性も考えて、なるべく画像を使用せずにCSSだけで構築したいんですよね。（※不可能なデザインの場合はもちろん画像を使用します）
「list-style」プロパティで文頭に数字をつけることも可能ですが、それだとデザイン性に乏しくなってしまいます。なので、疑似要素を使用して文頭に数字を付けたい場合の方法をお教えします。
See the Pen 疑似要素でリストのデザインを装飾 by あお＠サイトつくる名古屋人 (@coder_ao) on CodePen.
ul要素でやること
- list-style: none; でリストのスタイルをリセット
- counter-reset: number; 「number」というカウンタをリセット
li要素でやること
- counter-increment: number; 「number」というカウンタを新たに設置
- 疑似要素を作る
liの疑似要素でやること
- content: counter(number); 「number」というカウンタを表示
- 数字の装飾をする
ざっとこんな感じで、数字に装飾をつけることができます！
もちろん以下のように、nth-childを使って数字を付けることも出来るのですが、リストが増えるたびにいちいちCSSを書かないと行けない（大変！）ので、自動でナンバリング出来るようにしました！
.list__item:nth-child::before {
content: '1';
}
.list__item:nth-child(2)::before {
content: '2';
}
...ぜひ一度使ってみてください！
- PR
