【CSS】olタグのカスタマイズ！番号に装飾を加える方法

HTMLでolタグの番号に「色」や「装飾」を付けたい時ってありますよね。
デフォルトのolタグだと、テキストに指定した「色」しか反映されませんし「装飾」をすることもできません。
そこで今回はolタグのカスタマイズ方法についてご紹介していきます。

olタグの装飾サンプル

まずはどのように装飾ができるのかサンプルを見てみましょう。

HTML

<ol>
	<li>番号つきのリストが入ります。番号つきのリストが入ります。番号つきのリストが入ります。</li>
	<li>番号つきのリストが入ります。</li>
	<li>番号つきのリストが入ります。番号つきのリストが入ります。番号つきのリストが入ります。</li>
</ol>

HTMLは通常通りに記述していただいて大丈夫です。

CSS

ol{
	/*要素の連番（カウンタ）の値をリセットする*/
	counter-reset: li;
}
li{
	position: relative;
	font-size: 20px;
	padding-left: 30px;
	margin: 0 0 10px;
	/*デフォルトのスタイルを非表示にする*/
	list-style: none;
}
li:before{
	position: absolute;
	top: 0;
	left: 0;
	font-weight: bold;
	color: #f00;
	/*要素の連番（カウンタ）の値を進める*/
	counter-increment: li;
	/*自動連番を付ける関数*/
	content: counter(li)'.';
}

CSSは、普段使わないプロパティが記述されていますので、主要となるポイントを説明していきます。

/*要素の連番（カウンタ）の値をリセットする*/
counter-reset: li;

「counter-reset」プロパティを適用すると、要素が出現するたびに指定した名前のカウンタの値が「0」にリセットされます。
指定する名前はなんでも良いですが、ここでは「li」と記述しておきます。

/*デフォルトのスタイルを非表示にする*/
list-style: none;

「list-style」プロパティを記述すると番号がなくなってしまいますが、デフォルトのスタイルを非表示にする必要があります。

/*要素の連番（カウンタ）の値を進める*/
counter-increment: li;

先ほど指定した「li」という値を「counter-increment」プロパティに入れます。
この要素が出現するたびに、定義したカウンタの値が進められます。

/*自動連番を付ける関数*/
content: counter(li)'.';

「content」プロパティは、要素の直前や直後に値を挿入するときに使います。
これまで定義したプロパティを表示するために、「counter(li)」を記述します。
「’.’」ドットは、番号に続いて挿入するために記述しています。

以上でolタグのカスタマイズは完了です。
今回はシンプルに番号の色を変更しただけですが、before要素にborderプロパティなどを記述すれば、番号の外側に枠線を付けることも可能です。
色々とカスタマイズしてスタイルを付けてみましょう。