TopCSS > 2012年7月
2012年7月18日

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

July 18,2012 1:33 AM
Tag:[, , ]
Permalink

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以降で動作することを確認しています。

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3