【CSS実践講座】olタグの数字を装飾してみる！

2016年8月29日

みなさま、こんにちは！ 株式会社ホワイトボードのフロントエンジニアの末ちゃんこと、末吉です。
台風10号も来ていて通勤や私生活も大変なことと思いますが、いかがお過ごしでしょうか。

今日はちょっとCSSの実践講座をやってみたいと思います。
これやってみたいんだけどどうすればいいんだろうなー。ってこと結構多いと思います。
今回は、olタグの数字を装飾してみたいと思います。

olタグとは

この情報を探しに来ていらっしゃる方には不要な情報ですが、簡単にご説明します。

olタグとは、数字付きのリストタグです。リストの順番を自動的に追いかけて付与してくれます。
たとえばこのように。

  1. 数字いち
  2. 数字に
  3. 数字さん

この数字は自動的に付与されるので、わざわざソースに 1. 数字いち などと書く必要がありません。
また順番を入れ替える際も、ただHTMLソースの記述の順番を変えるだけなので非常に楽です。

<ol>
<li>数字いち</li>
<li>数字に</li>
<li>数字さん</li>
</ol>

蛇足ですが、HTML5から<li>の閉じタグは記述しなくてもOKになりました。記述してもOKです。
弊社ではソースが読みやすいように閉じタグは今まで通り記述しています。

早速装飾してみましょう。

では早速装飾してみましょう。HTMLは上記のソースを使用することとします。

ol {
margin: 0;
padding: 0;
list-style: none;
counter-reset: yourDefinition;
}
ol li {
padding-left: 35px;
text-indent: -35px;
}
ol li:before {
counter-increment: yourDefinition;
content: counter(yourDefinition);
display: inline-block;
margin-right: 10px;
width: 24px;
height: 24px;
text-align: center;
color: white;
font-weight: bold;
font-family: helvetica;
text-indent: 0;
background: #ff6900;
border-radius: 100%;
}

はい、これだけの記述でできます。

では実際に表示してみましょう。

  1. 数字いち
  2. 数字に
  3. 数字さん

解説

counter-resetプロパティ

counter-resetプロパティ は要素のカウントの値をリセットします。
このプロパティを読み込んだ要素が出現するたびに値を0に戻してくれます。
そして、このプロパティ上で自分の好きなカウンタ名を定義します。

counter-incrementプロパティ

counter-incrementプロパティは、要素のカウンタをスタートさせます。
counter-resetプロパティで定義したカウンタ名を呼び出すことで、そのカウンタがカウントされます。

content: counter(###);

最後にcontent: counter(###);を宣言すると、カウンターの値を出力してくれます。

つまり

カウンターのタグをリセットして自分で好きにカウンタ名を定義します。
カウントしたいliに対して定義したカウンタを適用させます。適用させることでカウンタの数字が進みます。
liに:beforeをつけてcontentでカウンタの数字を表示させます。

通常list-styleは好きにデザインすることができません。
しかしこのカウンタの機能を流用することで、好きにデザインできる疑似要素:beforeを使用してデザインすることができました。

いかがでしたか、CSSはただ色をつけたりレイアウトするだけのものではありませんでした。

このような機能もありますので、是非便利な機能をどんどん知って、よりハイテクに、より楽に、より良いサイト作りをしましょう！

Share Button