From 35918176145e2f9de541ac623706cd3ced71612d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 21 Nov 2021 17:30:52 +0900 Subject: CSS Values and Units の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/19 時点の英語版に同期 --- files/ja/web/css/custom-ident/index.md | 178 +++++++++++++-------------------- 1 file changed, 67 insertions(+), 111 deletions(-) (limited to 'files/ja/web/css/custom-ident') diff --git a/files/ja/web/css/custom-ident/index.md b/files/ja/web/css/custom-ident/index.md index 0770a40aac..46bbf511c9 100644 --- a/files/ja/web/css/custom-ident/index.md +++ b/files/ja/web/css/custom-ident/index.md @@ -3,132 +3,88 @@ title: slug: Web/CSS/custom-ident tags: - CSS - - CSS Data Type - - Data Type - - Layout - - Reference - - Web + - CSS データ型 + - データ型 + - レイアウト + - リファレンス + - ウェブ translation_of: Web/CSS/custom-ident --- -
{{CSSRef}}
+{{CSSRef}} -

<custom-ident> は CSS のデータ型で、{{glossary("identifier", "識別子")}}として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。

+**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、{{glossary("identifier", "識別子")}}として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。 -

構文

+## 構文 -

<custom-ident> の構文は CSS の識別子 (プロパティ名など) に似ていますが、大文字と小文字を区別する点が違います。これは次の文字から成る文字の並びです:

+`` の構文は CSS の識別子 (プロパティ名など) に似ていますが、[大文字と小文字を区別](https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%BB%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%86%E3%82%A3%E3%83%96)する点が異なります。これは 1 文字以上の下記の文字のから成ります。 -
    -
  • 任意のアルファベット (A-Z, a-z)
    • -
  • 任意の数字 (0-9)
    • -
  • ハイフン (-)
    • -
  • アンダースコア (_)
    • -
  • エスケープ文字 (バックスラッシュ \ に続く)
    • -
  • Unicode 文字 (バックスラッシュ \ と、それに続く 1 - 6 個の16進値の形式をとる、Unicode コードポイント）
    • -
+- 任意のアルファベット (`A`-`Z`, `a`-`z`) +- 任意の数字 (`0`-`9`) +- ハイフン (`-`) +- アンダースコア (`_`) +- エスケープ文字 (バックスラッシュ `\` に続く) +- [Unicode](http://ja.wikipedia.org/wiki/Unicode) 文字 (バックスラッシュ `\` と、それに続く 1 - 6 桁の 16 進数の形式で Unicode コードポイントを表す) -

このデータ値は大文字と小文字を区別するため、id1、Id1、iD1、ID1 はすべて異なった識別子です。逆に、別のエスケープ方式を使っていますが、 toto\? と toto\3F は同じ識別子です。

+なお、このデータ型では `id1`、`Id1`、`iD1`、`ID1` は[大文字と小文字を区別](https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%BB%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%86%E3%82%A3%E3%83%96)するため、すべて異なった識別子として扱われます。逆に、`toto\?` と `toto\3F` は文字をエスケープする方法が異なりますが、同じ識別子として扱われます。 -

禁止されている値

+### 禁止されている値 -

<custom-ident> を引用符または二重引用符の間に置いてはいけません。こうすると、 {{CSSxRef("<string>")}} として識別されてしまいます。さらに、先頭の文字は、数字やハイフン (-) および、それら続くものであってはなりません。

+`` を引用符または二重引用符の間に置いてはいけません。こうすると、 {{CSSxRef("<string>")}} として識別されてしまいます。さらに、先頭の文字は、数字やハイフン (`-`) および、それらの続くものであってはなりません。 -

曖昧さを避けるため、 <custom-ident> を使用する各プロパティは、特定の値の使用を禁止しています:

+曖昧さを避けるため、 `` を使用する各プロパティでは、特定の値の使用が禁止されています。 -
-
{{CSSxRef("animation-name")}}
-
グローバル CSS 値 (unset、 initial、そして inherit) を禁止し、 none も禁止しています。
-
{{CSSxRef("counter-reset")}}
-
{{CSSxRef("counter-increment")}}
-
グローバル CSS 値 (unset、 initial、そして inherit) を禁止し、 none も禁止しています。
-
{{CSSxRef("@counter-style")}}
-
{{CSSxRef("list-style-type")}}
-
グローバル CSS 値 (unset、 initial、そして inherit) および none、 inline 、そして outside の値を禁止しています。また、かなりの数の定義済みの値が様々なブラウザーに実装されています: disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-earthly-branch, cjk-heavenly-stem, cjk-ideographic, devanagari, ethiopic-numeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiragana-iroha, japanese-formal, japanese-informal, kannada, katakana, katakana-iroha, khmer, korean-hangul-formal, korean-hanja-formal, korean-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai, tibetan, trad-chinese-formal, trad-chinese-informal, upper-armenian, disclosure-open, and disclosure-close.
-
{{CSSxRef("grid-row-start")}}
- {{CSSxRef("grid-row-end")}}
- {{CSSxRef("grid-column-start")}}
- {{CSSxRef("grid-column-end")}}
-
span 値を禁止しています。
-
{{CSSxRef("will-change")}}
-
グローバル CSS 値 (unset、 initial、そして inherit) および will-change、 auto、 scroll-position そして contents の値を禁止しています。
-
+- {{CSSxRef("animation-name")}} + - : グローバル CSS 値 (`unset`, `initial`, `inherit`) を禁止し、 `none` も禁止しています。 +- {{CSSxRef("counter-reset")}}, {{CSSxRef("counter-increment")}} + - : グローバル CSS 値 (`unset`, `initial`, `inherit`) を禁止し、 `none` も禁止しています。 +- {{CSSxRef("@counter-style")}}, {{CSSxRef("list-style-type")}} + - : グローバル CSS 値 (`unset`, `initial`, `inherit`) および `none`, `inline`, `outside` の値を禁止しています。また、`disc`, `circle`, `square`, `decimal`, `cjk-decimal`, `decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-alpha`, `lower-latin`, `upper-alpha`, `upper-latin`, `arabic-indic`, `armenian`, `bengali`, `cambodian`, `cjk-earthly-branch`, `cjk-heavenly-stem`, `cjk-ideographic`, `devanagari`, `ethiopic-numeric`, `georgian`, `gujarati`, `gurmukhi`, `hebrew`, `hiragana`, `hiragana-iroha`, `japanese-formal`, `japanese-informal`, `kannada`, `katakana`, `katakana-iroha`, `khmer`, `korean-hangul-formal`, `korean-hanja-formal`, `korean-hanja-informal`, `lao`, `lower-armenian`, `malayalam`, `mongolian`, `myanmar`, `oriya`, `persian`, `simp-chinese-formal`, `simp-chinese-informal`, `tamil`, `telugu`, `thai`, `tibetan`, `trad-chinese-formal`, `trad-chinese-informal`, `upper-armenian`, `disclosure-open`, and `disclosure-close` といった定義済みの値が、様々なブラウザーで実装されています。 +- {{CSSxRef("grid-row-start")}}, {{CSSxRef("grid-row-end")}}, {{CSSxRef("grid-column-start")}}, {{CSSxRef("grid-column-end")}} + - : `span` 値を禁止しています。 +- {{CSSxRef("will-change")}} + - : グローバル CSS 値 (`unset`, `initial`, `inherit`) および `will-change`, `auto`, `scroll-position`, `contents` の値を禁止しています。 -

例

+## 例 -

有効な識別子

+### 有効な識別子 -
nono79            アルファベットと数字の組み合わせ
+
+```plain example-good
+nono79            アルファベットと数字の組み合わせ
 ground-level      アルファベットとダッシュの組み合わせ
 -test             ダッシュとそれに続くアルファベット
 _internal         アンダースコアとそれに続くアルファベット
 \22 toto          Unicode 文字とそれに続くアルファベット
-bili\.bob         ピリオドは正しくエスケープされています
-
- -

無効な識別子

- -
34rem             数字で始まってはいけません
--12rad            ダッシュで始まって数字が続いてはいけません
-bili.bob          アルファベットと数字以外でエスケープせずに使えるのは _ と - だけです
---toto            2 つのダッシュで始まってはいけません
-'bilibob'         <string> です
-"bilibob"         <string> です
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Values', '#custom-idents', '<custom-ident>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<custom-ident> for will-change')}}{{Spec2('CSS Will Change')}}{{CSSxRef("will-change")}} で除外する値を定義。
{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<custom-ident> for list-style-type')}}{{Spec2('CSS3 Counter Styles')}}キーワードの有限リストの代わりに <custom-ident> を使用。 {{CSSxRef("list-style-type")}} と {{CSSxRef("@counter-style")}} で除外する値を定義。
{{SpecName('CSS3 Lists', '#counter-properties', '<custom-ident> for counter-*')}}{{Spec2('CSS3 Lists')}}<identifier> から <custom-ident> へ改名。使い方を新しい counter-set プロパティへ追加。
{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<custom-ident> for animation-name')}}{{Spec2('CSS3 Animations')}}{{CSSxRef("animation-name")}} で除外する値を定義。
{{SpecName('CSS3 Values', '#custom-idents', '<custom-ident>')}}{{Spec2('CSS3 Values')}}<identifier> から <custom-ident> へ改名。擬似型とし、除外値の使用を禁止した。
{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<identifier>')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -

このデータ型は実際の型ではありませんが、許可された値をシンプルに記述するのに役立つ便利な型です。ブラウザーの互換性についての情報はありません。

- -

関連情報

- -
    -
  • {{CSSxRef("<ident>")}}
    • -
+bili\.bob ピリオドが正しくエスケープされている +``` + +### 無効な識別子 + +```plain example-bad +34rem 数字で始まってはいけない +-12rad ダッシュで始まって数字が続いてはいけない +bili.bob アルファベットと数字以外でエスケープせずに使えるのは _ と - だけ +--toto 2 つのダッシュで始まってはいけない +'bilibob' になります +"bilibob" になります +``` + +## 仕様書 + +| 仕様書 | 状態 | コメント | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS4 Values', '#custom-idents', '<custom-ident>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<custom-ident> for will-change')}} | {{Spec2('CSS Will Change')}} | {{CSSxRef("will-change")}} で除外する値を定義。 | +| {{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<custom-ident> for list-style-type')}} | {{Spec2('CSS3 Counter Styles')}} | キーワードの有限リストの代わりに `` を使用。 {{CSSxRef("list-style-type")}} と {{CSSxRef("@counter-style")}} で除外する値を定義。 | +| {{SpecName('CSS3 Lists', '#counter-properties', '<custom-ident> for counter-*')}} | {{Spec2('CSS3 Lists')}} | `<identifier>` から `` へ改名。使い方を新しい `counter-set` プロパティへ追加。 | +| {{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<custom-ident> for animation-name')}} | {{Spec2('CSS3 Animations')}} | {{CSSxRef("animation-name")}} で除外する値を定義。 | +| {{SpecName('CSS3 Values', '#custom-idents', '<custom-ident>')}} | {{Spec2('CSS3 Values')}} | `<identifier>` から `` へ改名。擬似型とし、除外値の使用を禁止した。 | +| {{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<identifier>')}} | {{Spec2('CSS2.1')}} | 初回定義 | + +## ブラウザーの互換性 + +*このデータ型は実際の型ではありませんが、許可された値をシンプルに記述するのに役立つ便利な型です。ブラウザーの互換性についての情報はありません。* + +## 関連情報 + +- {{CSSxRef("<ident>")}} -- cgit v1.2.3-54-g00ecf