[CSS]ol要素に頼らないナンバリングするスタイルシートのテクニック

掲載するコンテンツにナンバリングをつける際にまず思いつくのは、ol要素を使うことでしょう。確かに、ol要素はナンバリングするのに非常に合理的です。
ここでは、そのol要素を頼らずにナンバリングするテクニックを紹介します。

Numbering In Style

[ad#ad-2]

下記は各ポイントを意訳したものです。

ol要素を使用しないでナンバリングをするコンテンツは、例えばデモにあるようなFAQのリストです。
このFAQのリストは、dl要素で実装されています。

dl要素でナンバリングしたデモページ
※実装は、下記で紹介。

ナンバリングの実装には擬似要素と「counter-increment」を利用しており、アイデアの元となったのは「Styling ordered list numbers」の記事です。

Styling ordered list numbers
デモページ

このデモでは入れ子のol要素でナンバリングを行っています。

[ad#ad-2]

では、デモページの実装をみてみましょう。

HTML

HTMLはFAQにありがちなシンプルなdl要素で実装されています。

<dl class="faq">

        <dt>How much wood would a wood chuck chuck if a wood chuck could chuck wood?</dt>
        <dd>1,000,000</dd>

        <dt>What is the air-speed velocity of an unladen swallow?</dt>
        <dd>What do you mean? An African or European swallow?</dd>

        <dt>Why did the chicken cross the road?</dt>
        <dd>To get to the other side</dd>

</dl>

CSS

「counter-reset」でカウンタの初期化をし、dt要素に擬似要素を使ってナンバリングを設定します。

.faq {
        counter-reset: my-badass-counter;
}
.faq dt:before {
        content: counter(my-badass-counter);
        counter-increment: my-badass-counter;
}

ナンバリングは、:before擬似要素にスタイルされます。

dl要素でナンバリングしたデモページ

カウンタの値は数字以外にも、さまざまなものが指定できます。

• disc (• • •)
• circle (○ ○ ○)
• square (▪ ▪ ▪)
• decimal (1 2 3)
• decimal-leading-zero (01, 02, 03)
• lower-roman (i ii iii)
• upper-roman (I II III)
• lower-greek (α β γ)
• lower-latin (a b c)
• upper-latin (A B C)
• armenian (Ա Բ Գ)
• georgian (ა ბ გ)
• lower-alpha (a b c)
• upper-alpha (A B C)

「lower-roman (i ii iii)」でスタイルする場合は、下記のようになります。

content: counter(my-counter, lower-roman);

また、将来には下記のようなスタイルも実装できると面白いかもしれません。

li::marker {
  width: 30px;
  text-align: right;
  margin-right: 10px;
  display: inline-block;
}

ol {
  list-style: symbols("*" "20" "21" "\A7");
}

ul {
  list-style-type: "★";
}

※2011年現在サポートしているブラウザはありません。