ol 要素のリストを 1-1 や 1.1 のように表示する方法

通常 ol 要素は「1. 2. 3.…」のように 1 つの数字だけを順に並べていきます。例えば親要素となる ol 要素 1 の中に子要素となる ol 要素が含まれるとき、子要素の数字は 1 となります。

しかしながら、書籍や書類のようなレイアウトでは「1-1」や、あるいは「1.1.1」のように表記することが良くあります。このような数字の変更は、CSS を使って実現することができます。

「1-1」や「1.1.」のようにする方法

ol 要素の数字を「1-1」や「1.1.」のように表記するには、counter-reset, counter-increment プロパティと、値 counters を使います。具体的には次のコードのようになります。

ol
{
    counter-reset: section;
    list-style-type: none;
}
li:before
{
    counter-increment: section;
    content: counters(section, ".") ".";
}

プロパティ content の値 counters は、1 つ目の引数に section、2 つ目の引数に区切り文字を指定します。さらに countent の末尾に、数字の右端に挿入する文字を指定します。

Chrome, Safari, FireFox Opera, Android, iOS, などの比較的新しいバージョンの他、IE は 8 ~ 対応します。 IE を考慮する必要がないので、積極的に使うことができます。

counter-reset, counter-increment は h1 などの異なる要素にも使うことができます。

h1
{
    counter-reset: section;
}

h1:before
{
    counter-increment: section;
    content: counter(section) ".\00A0";
}