diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-12-21 02:55:52 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-12-28 01:46:11 +0900 |
commit | ccab5b06aae6f92392a8207594fd4bb5d263d9ce (patch) | |
tree | 94ab288140d513bcf83964ed9f2cc4b6cec6535d | |
parent | 9bf432696e556ea4685edc38a6fca4a0421bbd64 (diff) | |
download | translated-content-ccab5b06aae6f92392a8207594fd4bb5d263d9ce.tar.gz translated-content-ccab5b06aae6f92392a8207594fd4bb5d263d9ce.tar.bz2 translated-content-ccab5b06aae6f92392a8207594fd4bb5d263d9ce.zip |
2021/08/13 時点の英語版に基づき新規翻訳
-rw-r--r-- | files/ja/web/css/@counter-style/symbols/index.md | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/files/ja/web/css/@counter-style/symbols/index.md b/files/ja/web/css/@counter-style/symbols/index.md new file mode 100644 index 0000000000..f1fb6e02c1 --- /dev/null +++ b/files/ja/web/css/@counter-style/symbols/index.md @@ -0,0 +1,100 @@ +--- +title: symbols +slug: Web/CSS/@counter-style/symbols +tags: + - '@counter-style' + - アットルール記述子 + - CSS + - CSS カウンタースタイル + - CSS 記述子 + - リファレンス +browser-compat: css.at-rules.counter-style.symbols +translation_of: Web/CSS/@counter-style/symbols +--- +{{CSSRef}} + +**`symbols`** は [CSS](/ja/docs/Web/CSS) の記述子で、指定されたカウンターシステムがカウンター表現を構築するために使用する記号を指定するために使用します。 + +## 構文 + +`symbols` 記述子は、 1 つ以上の `<symbol>` で指定します。 + +### 値 + +- `<symbol>` + + - : そのカウンターシステムで使用される記号を表します。これは以下のデータ型のうちの一つである必要があります。 + + - {{cssxref("<string>")}} + - {{cssxref("<image>")}} (注: この値は「リスクあり」であり、仕様書から削除されるかもしれません。これはまだ実装されていません。) + - {{cssxref("<custom-ident>")}} + +## 解説 + +記号は文字列、画像、識別子の何れかで指定することができます。これは {{cssxref("@counter-style")}} [アットルール](/ja/docs/Web/CSS/At-rule)の中で使用されます。 + +```css +symbols: A B C D E; +symbols: "\24B6" "\24B7" "\24B8" D E; +symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9"; +symbols: url('first.svg') url('second.svg') url('third.svg'); +symbols: indic-numbers; +``` + +`symbols` 記述子は、 {{cssxref('@counter-style/system', 'system')}} 記述子の値が `cyclic`, `numeric`, `alphabetic`, `symbolic`, `fixed` の何れかである場合に指定する必要があります。 `additive` システムを使用する場合は、 symbols を指定する代わりに {{cssxref('@counter-style/additive-symbols', 'additive-symbols')}} を使用してください。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### カウンター記号の設定 + +#### HTML + +```html +<ul class="list"> + <li>One</li> + <li>Two</li> + <li>Three</li> + <li>Four</li> + <li>Five</li> +</ul> +``` + +#### CSS + +```css +@counter-style symbols-example { + system: fixed; + symbols: A "1" "\24B7" D E; +} + +.list { + list-style: symbols-example; +} +``` + +#### 結果 + +{{EmbedLiveSample('Setting_counter_symbols')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `symbols` 記述子は {{cssxref("@counter-style")}} アットルールの中で使用されます。 +- {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}} +- {{cssxref("symbols()")}}, 無名のカウンタースタイルを生成する関数記法 +- {{cssxref("url()", "url()")}} 関数 |