BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。

皆さんはHTMLでリストを作る際にどの様に作成しますか?
テキストの前に番号を付ける方法もあります。
その際にわざわざ手打ちで番号を振っている人もいるかもしれません。
しかし、その様な手間をかけなくても自動で番号付きのリストを作ることが可能です。
しかもJavaScriptやjQueryを使わず簡単に実装できます。

その方法はolタグを使うことだけです。
下記の様にolタグを使うだけで、簡単に番号付きのリストができます。

See the Pen
abJOGvP
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

では今回はさらに深掘りし、この番号を丸付きの数字をカスタマイズする方法についてご紹介いたします。

丸付きの番号リスト作成方法

結論を最初に言います!
それは、olタグにカウンタ機能追加で実装します。
まずこちらが実装した内容です。

See the Pen
GRWJdNq
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

① olタグに最初からついている数字は使わない

list-style-typeというプロパティが標準でついているので、こちらを無くしましょう。

② 「カウンタ機能」を使い、擬似要素で番号をつけなおす

「カウンタ機能」を使うことで1.2.3.4…といった連番を擬似要素で表示すことができます。
丸付きのリストを作成するには:before要素連番を、:affter要素丸の装飾をつけます。

:before要素の内容

:affter要素の内容

番号付きリストをカスタムする点でのポイント

・counter-reset: item;
・counter-increment: item;
・content: counter(item) “”;

counter-reset: item;

カウンタをリセットするためのプロパティになります。
「item」の後ろに整数を指定することで2以上の番号からカウントすることもできます。

counter-increment: item;

カウンタの値を進めるプロパティになります。
「item」の後ろに整数を指定することで「カウントをいくつずつ進めていくか」変えることもできます。

content: counter(item) “”;

カウントした番号を出力するプロパティになります。
疑似要素:beforeのcontentプロパティ内で実行します。

出力される番号の種類を数字以外に変えることもできます。

まとめ

今回CSSで丸付きの番号リストを簡単に作成する方法をご紹介いたしました。
olタグに一工夫するだけで、オリジナリティのある番号リストを作成することができます。
カウンタ機能にはカスタムできる要素がまだまだありますので、いろいろ試してみてお気に入りの装飾方法を探してみてください。