ol要素のstart属性を使わずにCSSで番号を途中から振る方法

ol要素のstart属性を使わずにCSSで番号を途中から振る方法

Posted at July 18,2012 1:33 AM
Tag:[CSS, ol, start]

ol要素のstart属性を使わずに、CSSで番号を途中から振る方法を紹介します。

番号付きリストで「第10位以降のランキング」など、途中から番号を振るケースは少なくないと思いますので、ご活用頂ければ幸いです。

1.基本

ol要素を使えば番号付きリストを作成できます。

HTML

<ol>
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ol>

実行結果

  1. あああ
  2. いいい
  3. ううう

ol要素にstart属性を使えば、番号を途中から割り振ることもできます。

例えば、次のようにstart属性に「5」を設定すれば、番号付きリストを「5」から開始することができます。

HTML

<ol start="5">
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ol>

実行結果

  1. あああ
  2. いいい
  3. ううう

ただし、このstart属性はHTMLあるいはXHTML仕様で非推奨あるいは廃止となっているので、できればというか、start属性は使いたくないところです。
追記:HTML5では非推奨でなくなっています(HTML4.01は非推奨)。失礼致しました。

2.ol要素のstart属性を使わずに番号を途中から振る

ol要素のstart属性を使わずに番号を途中から振るには、CSSのcounter-reset/counter-incrementプロパティを利用します。

プロパティの基本的な使い方については改めて紹介したいと思いますので、ここではstart属性の代替案のみ掲載しておきます。

HTML

<ol>
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ol>

CSS

ol {
    counter-reset: item [開始値-1];
}
li {
    display: block;
}
li:before {
    content: counter(item) ". ";
    counter-increment: item;
}

実行結果は以下のサンプルをどうぞ。

表示サンプル

次のように、[開始値-1] の部分に「4」を設定すれば、1項のサンプルで「start="5"」をつけたものと同じ振舞いになります。

ol {
    counter-reset: item 4;
}
…後略…

3.他の要素を使って途中から番号を割り振る

counter-reset/counter-incrementプロパティは他の要素で利用することもできます。

以下はh3要素に番号を割り振ったときのサンプルです。

CSS

.top {
  counter-reset: section 4;
}
h3 {
  counter-increment: section;
}
h3:before {
  content: counter(section) ". ";
}

HTML

<h3 class="top">あああ</h3>
<h3>いいい</h3>
<h3>ううう</h3>

こちらもサンプルを用意しました。「いきなりh3はおかしい」というツッコミはなしで(笑)。

表示サンプル

counter-resetプロパティの「4」を削除すれば「1」から開始します。

4.対応ブラウザ

Firefox/Google Chrome/Safari/Opera/IE8以降で動作することを確認しています。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)