CSS3 Pre-Reference



カウンター

 

試す

コード

#containe ol {
  counter-reset: item;
}
#containe li {
  display: block;
}
#containe li::before {
  content: counters(item, ".", upper-roman);
  counter-increment: item;
}

サンプル

counters()の例です。カウンターの値とリストの内容が合致していれば正しく表示されています。

  1. 項目 I
  2. 項目 II
    1. 項目 II.I
    2. 項目 II.II
    3. 項目 II.III
      1. 項目 II.III.I
      1. 項目 II.III.I
    4. 項目 II.IV
  3. 項目 III
  4. 項目 IV
  1. 項目 I
  2. 項目 II

コメントする


対応ブラウザ

Firefox
Chrome/Safari
Opera
InternetExplorer
9

パラメータ

レベル 2.0
参考文献 CSS3 Values and Units#3.7.3. The 'counter' function

解説

カウンターの値を参照します。

記述方法は、”counter(<カウンタ名>,<リストスタイルタイプ>)”または”counters(<カウンタ名>,<文字列>,<リストスタイルタイプ>)”です。

カウンターの数字の操作には、counter-incrementプロパティ、counter-resetプロパティを使用します。

CSS3からは、ページメディアで"footnote"という名前のカウンターが自動生成されるようになります(参考:CSS Generated Content for Paged Media Module)。
これは脚注のカウンターで、脚注1つごとに1インクリメントされ、また、ページが変わると自動的にゼロに戻されます。 

トラックバック

投稿されたコメント