content【コンテンツ】
counter-reset【カウンタ リセット】・counter-increment【カウンタ更新】
counter()【単一カウンタ】・counters()【複数カウンタ】

content【コンテンツ】

メモ 構文 例 関連

メモ

構文 (※記述方法)

プロパティ値備考
content:    normal【none と同じ】
| none【疑似要素の生成なし】
| [
         《string【文字列】》
    | 《url【URL】》
    | 《counter【カウンタ】》
    | attr(＜identifier＞)
    | open-quote【開始引用符】
    | close-quote【終了引用符】
    | no-open-quote【開始引用符 (挿入なし)】
    | no-close-quote【終了引用符 (挿入なし)】
    ]+
content: [
   [
         《image【画像】》
    | 《url【URL】》
   ]
   ','
]*
[
       normal【疑似要素では生成なし】
  | none【疑似要素では生成なし】
  | ＜content-list【コンテンツリスト】＞
]
[/ 《string【文字列】》 ]?
＜content-list【コンテンツリスト】＞ [
       《string【文字列】》
  | contents
  | 《url【URL】》
  | ＜quote【引用符】＞
  | document-url
  | ＜target＞
  | leader()【リーダー】
]+
＜quote【引用符】＞ [
       open-quote【開始引用符】
  | close-quote【終了引用符】
  | no-open-quote【開始引用符 (挿入なし)】
  | no-close-quote【終了引用符 (挿入なし)】
]
＜target＞ [
       target-counter()
  | target-counters()
  | target-text()
]
leader()【リーダー】 leader(
       dotted【点線】
  | solid【実線】
  | space【スペース】
  | 《string【文字列】》
);

例

<style>
.ex:before { content: open-quote "(前)"; color: red; font-weight: bold; }
.ex:after { content: "(後)" close-quote; color: blue; font-weight: bold; }
</style>

<span class="ex"> コンテンツ </span>

コンテンツ

関連

counter-reset【カウンタ リセット】
counter-increment【カウンタ更新】

メモ 構文 例 関連

メモ

構文 (※記述方法)

プロパティ値備考
counter-reset:    [ ＜identifier【カウンタ識別子】＞  《integer【リセット値 (省略：0)】》? ]+
| none【リセットなし】 		カウンタのリセット
(リセット値は負数も可)
counter-increment:    [ ＜identifier【カウンタ識別子】＞  《integer【加算値 (省略：1)】》? ]+
| none【更新なし】 		カウンタの更新
(加算値は 0 または 負数も可)

例

counter()【単一カウンタ】使用
<style>
#div1 { counter-reset: header4; }

h4 { counter-reset: header5; }
h4:before {
  content: counter(header4) "：";
counter-increment: header4;
color: red; }

h5 { counter-reset: header6; }
h5:before {
  content: counter(header4) "-" counter(header5, upper-alpha) "：";
counter-increment: header5;
color: red;
}

h6:before {
  content: counter(header4) "-" counter(header5, upper-alpha) "-" counter(header6, lower-alpha) "：";
counter-increment: header6;
color: red;
}
</style>

<div id="div1">(header4 = 0)
  <h4>ヘッダ４ (++header4 / header5 = 0)</h4>
  <h4>ヘッダ４ (++header4 / header5 = 0)</h4>
    <h5>ヘッダ５ (++header5 / header6 = 0)</h5>
  <h4>ヘッダ４ (++header4 / header5 = 0)</h4>
    <h5>ヘッダ５ (++header5 / header6 = 0)</h5>
      <h6>ヘッダ６ (++header6)</h6>
      <h6>ヘッダ６ (++header6)</h6>
    <h5>ヘッダ５ (++header5 / header6 = 0)</h5>
      <h6>ヘッダ６ (++header6)</h6>
      <h6>ヘッダ６ (++header6)</h6>
</div>
(header4 = 0)

ヘッダ４ (++header4 / header5 = 0)

ヘッダ４ (++header4 / header5 = 0)

ヘッダ５ (++header5 / header6 = 0)

ヘッダ４ (++header4 / header5 = 0)

ヘッダ５ (++header5 / header6 = 0)
ヘッダ６ (++header6)
ヘッダ６ (++header6)
ヘッダ５ (++header5 / header6 = 0)
ヘッダ６ (++header6)
ヘッダ６ (++header6)
counters()【複数カウンタ】使用
<style>
/* exB クラスの子孫の ol要素 ( E F【子孫 結合子】 参照) */
.exB ol { counter-reset: item; list-style-type: none; }
/* exB クラスの子孫の li要素 */
.exB li:before { content: counters(item, "-") "："; counter-increment: item; color: red; }
</style>

<div class="exB">
  <ol>
  <li>項目 ( item[0] = 0 / ++item[0] )
  <li>項目 ( ++item[0] )
  </ol>

  <ol>
  <li>項目 ( item[0] = 0 / ++item[0] )
  <li>項目 ( ++item[0] )
    <ol>
    <li>項目 ( item[1] = 0 / ++item[1] )
    <li>項目 ( ++item[1] )
    </ol>
  <li>項目 ( ++item[0] )
    <ol>
    <li>項目 ( item[1] = 0 / ++item[1] )
      <ol>
      <li>項目 ( item[2] = 0 / ++item[2] )
      <li>項目 ( ++item[2] )
      <li>項目 ( ++item[2] )
      </ol>
    <li>項目 ( ++item[1] )
      <ol>
      <li>項目 ( item[2] = 0 / ++item[2] )
      <li>項目 ( ++item[2] )
      <li>項目 ( ++item[2] )
      </ol>
    </ol>
  </ol>
</div>
  1. 項目 ( item[0] = 0 / ++item[0] )
  2. 項目 ( ++item[0] )
  1. 項目 ( item[0] = 0 / ++item[0] )
  2. 項目 ( ++item[0] )
    1. 項目 ( item[1] = 0 / ++item[1] )
    2. 項目 ( ++item[1] )
  3. 項目 ( ++item[0] )
    1. 項目 ( item[1] = 0 / ++item[1] )
      1. 項目 ( item[2] = 0 / ++item[2] )
      2. 項目 ( ++item[2] )
      3. 項目 ( ++item[2] )
    2. 項目 ( ++item[1] )
      1. 項目 ( item[2] = 0 / ++item[2] )
      2. 項目 ( ++item[2] )
      3. 項目 ( ++item[2] )

counter()【単一カウンタ】
counters()【複数カウンタ】

メモ 構文 例 関連

メモ

  • カウンタの表示で使用
  • counter()【単一カウンタ】
    • counter-reset【カウンタ リセット】の要素が入れ子にならない場合に使用
  • counters()【複数カウンタ】
    • counter-reset【カウンタ リセット】の要素が入れ子になる場合に使用
    • 入れ子になると新規のカウンタを生成

構文 (※記述方法)

構文備考
counter ( ＜identifier【カウンタ識別子】＞  [, ＜list-style-type【リストマーカー種類】＞ ] )

戻り値：指定した【リストマーカー種類】の【カウンタ識別子】カウンタの文字列 		単一カウンタ
counters ( ＜identifier【カウンタ識別子】＞,  《string【セパレータ】》  [, ＜list-style-type【リストマーカー種類】＞ ] )

戻り値：指定した【リストマーカー種類】の【カウンタ識別子】カウンタを【セパレータ】で区切った文字列 		複数カウンタ

例

counter-reset【カウンタ リセット】・counter-increment【カウンタ更新】の 例 を参照