From 400be73d57e2356c7aef10eaceb555cdfa21df1b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 7 Jan 2022 23:38:06 +0900 Subject: CSS Counters の関数を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/counter()/index.html | 138 ------------------------- files/ja/web/css/counter()/index.md | 138 +++++++++++++++++++++++++ files/ja/web/css/counters()/index.html | 181 --------------------------------- files/ja/web/css/counters()/index.md | 177 ++++++++++++++++++++++++++++++++ 4 files changed, 315 insertions(+), 319 deletions(-) delete mode 100644 files/ja/web/css/counter()/index.html create mode 100644 files/ja/web/css/counter()/index.md delete mode 100644 files/ja/web/css/counters()/index.html create mode 100644 files/ja/web/css/counters()/index.md (limited to 'files') diff --git a/files/ja/web/css/counter()/index.html b/files/ja/web/css/counter()/index.html deleted file mode 100644 index b652047eb5..0000000000 --- a/files/ja/web/css/counter()/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: counter() -slug: Web/CSS/counter() -tags: - - CSS - - CSS Counter - - CSS Function - - Function - - Reference -translation_of: Web/CSS/counter() ---- -

{{CSSRef}}

- -

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

- -
/* 単純な使用法 */
-counter(countername);
-
-/* カウンターの表示の変更 */
-counter(countername, upper-roman)
- -

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

- -
-

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

- -

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

-
- -

構文

- -

値

- -
-
{{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 との比較

- -

HTML

- -
<ol>
-  <li></li>
-  <li></li>
-  <li></li>
-</ol>
- -

CSS

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

結果

- -

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

- -

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

- -

HTML

- -
<ol>
-  <li></li>
-  <li></li>
-  <li></li>
-</ol>
- -

CSS

- -
ol {
-  counter-reset: count;
-}
-li {
-  counter-increment: count;
-}
-li::after {
-  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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/counter()/index.md b/files/ja/web/css/counter()/index.md new file mode 100644 index 0000000000..b652047eb5 --- /dev/null +++ b/files/ja/web/css/counter()/index.md @@ -0,0 +1,138 @@ +--- +title: counter() +slug: Web/CSS/counter() +tags: + - CSS + - CSS Counter + - CSS Function + - Function + - Reference +translation_of: Web/CSS/counter() +--- +

{{CSSRef}}

+ +

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

+ +
/* 単純な使用法 */
+counter(countername);
+
+/* カウンターの表示の変更 */
+counter(countername, upper-roman)
+ +

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

+ +
+

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

+ +

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

+
+ +

構文

+ +

値

+ +
+
{{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 との比較

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

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

結果

+ +

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

+ +

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

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::after {
+  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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/counters()/index.html b/files/ja/web/css/counters()/index.html deleted file mode 100644 index 63df22a423..0000000000 --- a/files/ja/web/css/counters()/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: counters() -slug: Web/CSS/counters() -tags: - - CSS - - CSS Counter - - CSS Function - - Function - - Reference -translation_of: Web/CSS/counters() ---- -

{{CSSRef}}

- -

counter() は CSS の関数で、階層的なカウンターを利用できるようにし、指定された名前付きカウンターがあれば、その現在値を表す連結された文字列を返します。 counters() 関数には counters(name, string) と counters(name, string, style) の二つの形式があります。一般的には擬似要素と一緒に使用されますが、理論的には <string> 値に対応している場所ならばどこでも使用できます。生成されるテキストは、指定された名前を持つすべてのカウンターの値で、指定された文字列で区切られた一番外側から一番内側までの値です。カウンターは、指定されたスタイルで表示され、スタイルが指定されていない場合は既定で decimal で表示されます。

- -
/* 単純な使用法 - スタイルは既定で decimal */
-counters(countername, '-');
-
-/* カウンターの表示の変更 */
-counters(countername, '.', upper-roman)
- -

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

- -
-

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

- -

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

-
- -

構文

- -

値

- -
-
{{cssxref("<custom-ident>")}}
-
カウンターを識別する名前であり、 {{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ2つで始めることはできず、また none, unset, initial, inherit という名前は禁止です。
-
<counter-style>
-
カウンタースタイル名または {{cssxref("symbols()")}} 関数です。カウンタースタイル名には numeric, alphabetic, symbolic などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の定義済みカウンタースタイルがあります。省略された場合は、既定で decimal になります。
-
{{cssxref("<string>")}}
-
任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスでエンコードする必要があります。例えば \000A9 は著作権記号を表します。
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

既定値と upper-roman との比較

- -

HTML

- -
<ol>
-  <li>
-     <ol>
-        <li></li>
-        <li></li>
-        <li></li>
-      </ol>
-  </li>
-  <li></li>
-  <li></li>
-  <li>
-     <ol>
-        <li></li>
-        <li>
-           <ol>
-              <li></li>
-              <li></li>
-              <li></li>
-           </ol>
-        </li>
-      </ol>
-  </li>
-</ol>
- -

CSS

- -
ol {
-  counter-reset: listCounter;
-}
-li {
-  counter-increment: listCounter;
-}
-li::marker {
-   content:  counters(listCounter, '.', upper-roman) ') ';
-}
-li::before {
-  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
-}
- -

結果

- -

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

- -

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

- -

HTML

- -
<ol>
-  <li>
-     <ol>
-        <li></li>
-        <li></li>
-        <li></li>
-      </ol>
-  </li>
-  <li></li>
-  <li></li>
-  <li>
-     <ol>
-        <li></li>
-        <li>
-           <ol>
-              <li></li>
-              <li></li>
-              <li></li>
-           </ol>
-        </li>
-      </ol>
-  </li>
-</ol>
- -

CSS

- -
ol {
-  counter-reset: count;
-}
-li {
-  counter-increment: count;
-}
-li::after {
-   content: counters(count, '.', upper-alpha) ') ';
-}
-li::before {
-  content: counters(count, ".", decimal-leading-zero) " == " counters(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.counters")}}

- -

関連情報

- - diff --git a/files/ja/web/css/counters()/index.md b/files/ja/web/css/counters()/index.md new file mode 100644 index 0000000000..2cb6dd37fe --- /dev/null +++ b/files/ja/web/css/counters()/index.md @@ -0,0 +1,177 @@ +--- +title: counters() +slug: Web/CSS/counters() +tags: + - CSS + - CSS カウンター + - CSS 関数 + - 関数 + - リファレンス +translation_of: Web/CSS/counters() +--- +{{CSSRef}} + +**`counter()`** は [CSS](/ja/docs/Web/CSS) の関数で、階層的なカウンターを利用できるようにし、指定された名前付きカウンターがあれば、その現在値を表す連結された文字列を返します。 `counters()` 関数には `counters(name, string)` と `counters(name, string, style)` の二つの形式があります。一般的には[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)と一緒に使用されますが、理論的には `[<string>](/ja/docs/Web/CSS/string)` 値に対応している場所ならばどこでも使用できます。生成されるテキストは、指定された名前を持つすべてのカウンターの値で、指定された文字列で区切られた一番外側から一番内側までの値です。カウンターは、指定されたスタイルで表示され、スタイルが指定されていない場合は既定で `decimal` で表示されます。 + +
/* 単純な使用法 - スタイルは既定で decimal */
+counters(countername, '-');
+
+/* カウンターの表示の変更 */
+counters(countername, '.', upper-roman)
+ +[カウンター](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)自身には視覚的効果が何もありません。 `counters()` 関数 (および {{cssxref("counter", "counter()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。 + +
+注: `counters()` 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。 + +[ブラウザーの互換性の表](#Browser_compatibility)を注意深く確認してから本番環境に用いてください。 +
+ +## 構文 + +### 値 + +- {{cssxref("<custom-ident>")}} + - : カウンターを識別する名前であり、 {{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ2つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。 +- <counter-style> + - : カウンタースタイル名または {{cssxref("symbols()")}} 関数です。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の[定義済みカウンタースタイル](/ja/docs/Web/CSS/CSS_Counter_Styles)があります。省略された場合は、既定で `decimal` になります。 +- {{cssxref("<string>")}} + - : 任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスでエンコードする必要があります。例えば `\000A9` は著作権記号を表します。 + +### 形式文法 + +{{CSSSyntax}} + +## 例 + +

既定値と upper-roman との比較

+ +#### HTML + +
<ol>
+  <li>
+     <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ol>
+  </li>
+  <li></li>
+  <li></li>
+  <li>
+     <ol>
+        <li></li>
+        <li>
+           <ol>
+              <li></li>
+              <li></li>
+              <li></li>
+           </ol>
+        </li>
+      </ol>
+  </li>
+</ol>
+ +#### CSS + +
ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::marker {
+   content:  counters(listCounter, '.', upper-roman) ') ';
+}
+li::before {
+  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
+}
+ +#### 結果 + +{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}} + +

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

+ +

HTML

+ +
<ol>
+  <li>
+     <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ol>
+  </li>
+  <li></li>
+  <li></li>
+  <li>
+     <ol>
+        <li></li>
+        <li>
+           <ol>
+              <li></li>
+              <li></li>
+              <li></li>
+           </ol>
+        </li>
+      </ol>
+  </li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::after {
+   content: counters(count, '.', upper-alpha) ') ';
+}
+li::before {
+  content: counters(count, ".", decimal-leading-zero) " == " counters(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.counters")}} + +## 関連情報 + +- [CSS カウンターの使用](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) +- {{cssxref("counter-set")}} +- {{cssxref("counter-reset")}} +- {{cssxref("counter-increment")}} +- {{cssxref("@counter-style")}} +- CSS の `[counters()](/ja/docs/Web/CSS/counters)` 関数 +- {{cssxref("::marker")}} -- cgit v1.2.3-54-g00ecf