diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-12-19 15:52:39 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-12-26 12:48:48 +0900 |
commit | f5f367270e2d0334f542cc755a2f7b00ba2e59b3 (patch) | |
tree | 9a0c8fe5036810b45e163e2ea2deb220401e022a | |
parent | e1969bda7fafa55d6dd78e3b2a5ac428549addb2 (diff) | |
download | translated-content-f5f367270e2d0334f542cc755a2f7b00ba2e59b3.tar.gz translated-content-f5f367270e2d0334f542cc755a2f7b00ba2e59b3.tar.bz2 translated-content-f5f367270e2d0334f542cc755a2f7b00ba2e59b3.zip |
2021/08/13 時点の英語版に基づき新規翻訳
-rw-r--r-- | files/ja/web/css/@counter-style/negative/index.md | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/files/ja/web/css/@counter-style/negative/index.md b/files/ja/web/css/@counter-style/negative/index.md new file mode 100644 index 0000000000..c9f9c5ddd0 --- /dev/null +++ b/files/ja/web/css/@counter-style/negative/index.md @@ -0,0 +1,89 @@ +--- +title: negative +slug: Web/CSS/@counter-style/negative +tags: + - '@counter-style' + - アットルール記述子 + - CSS + - CSS 記述子 + - リファレンス +browser-compat: css.at-rules.counter-style.negative +translation_of: Web/CSS/@counter-style/negative +--- +{{CSSRef}} + +カスタムカウンターのスタイルを定義する際、 **`negative`** 記述子により、値が負のときにカウンターの表現に付加または前置する記号を指定する方法を提供することで、負のカウンターの表現を変更することができます。 + +## 構文 + +```css +/* <symbol> 値 */ +negative: "-"; /* 負の値の場合に先頭に '-' を付ける */ +negative: "(" ")"; /* 負の値の場合に '(' と ')' で囲む */ +``` + +### Values + +- first `<symbol>` + - : カウンターが負の時に、この記号がその表現の前に付きます。 +- second `<symbol>` + - : 存在する場合、カウンターが負の時に、この記号がその表現の後に追加されます。 + +## 解説 + +カウンターの値が負の場合、記述子の値として指定された記号がカウンター表現の前に置かれ、指定された場合は 2 番目の記号が表現の後に追加されます。 negative 記述子は、 `system` の値が `symbolic`, `alphabetic`, `numeric`, `additive`, `extends` の何れかで、拡張カウンタースタイル自体が負の符号を使用している場合のみ有効になります。負のカウンター値に対応していない他のシステムで negative 記述子が指定された場合、その記述子は無視されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### 負のカウンターを描画する + +#### HTML + +```html +<ol class="list" start="-3"> + <li>One</li> + <li>Two</li> + <li>Three</li> + <li>Four</li> + <li>Five</li> +</ol> +``` + +#### CSS + +```css +@counter-style neg { + system: numeric; + symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; + negative: "(-" ")"; +} + +.list { + list-style: neg; +} +``` + +#### 結果 + +{{ EmbedLiveSample('Rendering_negative_counters', '', '', '', 'Web/CSS/@counter-style/negative') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}} +- {{cssxref("symbols()")}}, 無名のカウンタースタイルを生成する関数記法。 |