From dd793afb6a92a3764d572ee406ae0f681c563434 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 7 Jan 2022 23:39:00 +0900 Subject: 2021/11/07 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/counter()/index.md | 167 ++++++++++++++++-------------------- 1 file changed, 76 insertions(+), 91 deletions(-) (limited to 'files/ja/web/css/counter()') diff --git a/files/ja/web/css/counter()/index.md b/files/ja/web/css/counter()/index.md index b652047eb5..b525841d28 100644 --- a/files/ja/web/css/counter()/index.md +++ b/files/ja/web/css/counter()/index.md @@ -3,136 +3,121 @@ title: counter() slug: Web/CSS/counter() tags: - CSS - - CSS Counter - - CSS Function - - Function - - Reference + - CSS カウンター + - CSS 関数 + - 関数 + - リファレンス +browser-compat: css.types.counter translation_of: Web/CSS/counter() --- -

{{CSSRef}}

+{{CSSRef}} -

counter() は CSS の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。擬似要素において用いるのが多いものの、理論的には<string>に対応するすべての箇所で用いることができます。

+**`counter()`** は [CSS](/ja/docs/Web/CSS) の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)において用いるのが多いものの、理論的には [``](/ja/docs/Web/CSS/string) に対応するすべての箇所で用いることができます。 -
/* 単純な使用法 */
+```css
+/* 単純な使用法 */
 counter(countername);
 
 /* カウンターの表示の変更 */
-counter(countername, upper-roman)
+counter(countername, upper-roman) +``` -

カウンター自身には視覚的効果が何もありません。 counter() 関数 (および {{cssxref("counters", "counters()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。

+[カウンター](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)自身には視覚的効果が何もありません。 `counter()` 関数 (および {{cssxref("counters()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。 -
-

注: counters() 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。

+> **Note:** `counter()` 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。 +> +> [ブラウザーの互換性の表](#ブラウザーの互換性)を注意深く確認してから本番環境に用いてください。 -

ブラウザーの互換性の表を注意深く確認してから本番環境に用いてください。

-
+## 構文 -

構文

+### 値 -

値

+- {{cssxref("<custom-ident>")}} + - : カウンターを識別する名前であり、{{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ 2 つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。 +- `` + - : {{cssxref("<list-style-type>")}} 名、 {{cssxref("<@counter-style>")}} 名、 {{cssxref("symbols()")}} 関数の何れかです。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の[定義済みカウンタースタイル](/ja/docs/Web/CSS/CSS_Counter_Styles)があります。省略された場合は、既定で `decimal` になります。 -
-
{{cssxref("<custom-ident>")}}
-
カウンターを識別する名前であり、{{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ2つで始めることはできず、また none, unset, initial, inherit という名前は禁止です。
-
<counter-style>
-
カウンタースタイル名または {{cssxref("symbols()")}} 関数です。カウンタースタイル名には numeric, alphabetic, symbolic などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定で decimal になります。
-
- -

形式文法

+### 形式文法 {{CSSSyntax}} -

例

+## 例 -

既定値と upper-roman との比較

+### 既定値と upper-roman との比較 -

HTML

+#### HTML -
<ol>
-  <li></li>
-  <li></li>
-  <li></li>
-</ol>
+```html +
    +
  1. +
  2. +
  3. +
+``` -

CSS

+#### CSS -
ol {
+```css
+ol {
   counter-reset: listCounter;
 }
 li {
   counter-increment: listCounter;
 }
 li::after {
-  content: "[" counter(listCounter) "] == ["
+  content: "[" counter(listCounter) "] == ["
                counter(listCounter, upper-roman) "]";
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

+{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}} -

decimal-leading-zero と lower-alpha との比較

+### decimal-leading-zero と lower-alpha との比較 -

HTML

+#### HTML -
<ol>
-  <li></li>
-  <li></li>
-  <li></li>
-</ol>
+```html +
    +
  1. +
  2. +
  3. +
+``` -

CSS

+#### CSS -
ol {
+```css
+ol {
   counter-reset: count;
 }
 li {
   counter-increment: count;
 }
 li::after {
-  content: "[" counter(count, decimal-leading-zero) "] == ["
+  content: "[" counter(count, decimal-leading-zero) "] == ["
                counter(count, lower-alpha) "]";
-}
- -

結果

- -

{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}変更なし
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.types.counter")}}

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS カウンターの使用](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) +- {{cssxref("counter-reset")}} +- {{cssxref("counter-set")}} +- {{cssxref("counter-increment")}} +- {{cssxref("@counter-style")}} +- CSS の [`counters()`](/ja/docs/Web/CSS/counters()) 関数 -- cgit v1.2.3-54-g00ecf