Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web/CSS/ident を更新 #25676

Merged
merged 1 commit into from
Feb 4, 2025
Merged

Web/CSS/ident を更新 #25676

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 32 additions & 17 deletions files/ja/web/css/ident/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: <ident>
slug: Web/CSS/ident
l10n:
sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff
sourceCommit: bd74b8a8222517dead9def675a499dcf1dc30328
---

{{CSSRef}}
Expand All @@ -11,39 +11,54 @@ l10n:

## 構文

`<custom-ident>` の構文は CSS の識別子（プロパティ名など）に似ていますが、 [大文字と小文字の区別](https://ja.wikipedia.org/wiki/ケース・センシティブ) がある点が違います。 これは次の文字から成る文字の並びです。
CSS の識別子は、以下のいずれかの文字 1 つ以上から構成されます。

- アルファベット (`A` - `Z` と `a` - `z`)
- `A` - `Z` と `a` - `z` の範囲の {{glossary("ASCII")}} 文字
- 数字 (`0` - `9`)
- ハイフン (`-`)
- アンダースコア (`_`)
- エスケープ文字 (バックスラッシュ `\` に続く)
- [Unicode](https://ja.wikipedia.org/wiki/Unicode) 文字（バックスラッシュ `\` と、それに続く 1-6 個の 16 進数を形式をとる、Unicode コードポイント）
- その他の {{glossary("Unicode")}} 文字のうち `U+00A0` 以上のもの（すなわち、 ASCII 以外の Unicode 文字）
- [エスケープされた文字](#文字のエスケープ)

さらに、識別子はエスケープされていない数字で始めてはならず、エスケープされていないハイフンの後にエスケープされていない数字が続く形でも始めてはなりません。

[大文字と小文字の区別](https://ja.wikipedia.org/wiki/ケース・センシティブ) があるため `id1`、 `Id1`、 `iD1` そして `ID1` は全て異なる識別子である点に注意してください。しかし、文字をエスケープする方法はいくつか存在するため、 `toto\?` と `toto\3F` は同じ識別子です。

### 文字のエスケープ

{{glossary("Escape character", "文字のエスケープ")}}とは、ソフトウェアシステムによる解釈の仕方を変更する方法で文字を表すということです。 CSS では、文字の前にバックスラッシュ (`\`) を追加することで、文字をエスケープすることができます。 16 進数の数字 `0-9`、`a-f`、`A-F` を除くすべての文字は、この方法でエスケープすることができます。 例えば、`&` は `\&` としてエスケープすることができます。

また、バックスラッシュの後に 1 ～ 6 桁の 16 進数で表される文字の Unicode コードポイントを続けることで、任意の文字をエスケープすることもできます。例えば、 `&` は `\26` としてエスケープできます。この記法では、エスケープ文字に続いて 16 進数が続き、次のどちらかかになります。

- Unicode コードポイントの後に、空白などのホワイトスペース文字を置く。
- エスケープされる文字の完全な 6 桁の Unicode コードポイントを置く。

例えば、文字列 `&123` は、 `\26 123` （ホワイトスペース付き）または `\000026123` （`&` の 6 桁の Unicode コードポイント）とすることで `123` がエスケープパターンの一部として認識されないようにすることができます。

## 例

### 有効な識別子

```plain example-good
nono79 アルファベットと数字の組み合わせ
ground-level アルファベットとダッシュの組み合わせ
-test ダッシュとそれに続く英数字
--toto 識別子の様なカスタムプロパティ
_internal アンダースコアとそれに続く英数字
\22 toto Unicode 文字とそれに続く一連の英数字
bili\.bob 正しくエスケープされたピリオド
nono79 /* アルファベットと数字の組み合わせ */
ground-level /* アルファベットとダッシュの組み合わせ */
-test /* ダッシュとそれに続く英数字 */
--toto /* 識別子の様なカスタムプロパティ */
_internal /* アンダースコアとそれに続く英数字 */
\22 toto /* エスケープされた文字とそれに続く一連の英数字 */
\000022toto /* 前の例と同じ */
scooby\.doo /* 正しくエスケープされたピリオド */
🔥123 /* 非 ASCII 文字に続いて数字 */
```

### 無効な識別子

```plain example-bad
34rem 数字で始まってはいけません
-12rad ダッシュで始まって数字が続いてはいけません
bili.bob エスケープする必要がないのはアルファベット、 _、 - のみです
'bilibob' これは {{CSSxRef("&lt;string&gt;")}} になります
"bilibob" これは {{CSSxRef("&lt;string&gt;")}} になります
34rem /* 数字で始まってはいけない */
-12rad /* ダッシュで始まって数字が続いてはいけない */
scooby.doo /* 英数字でない ASCII 文字はエスケープする必要がある */
'scoobyDoo' /* 文字列として扱われる */
"scoobyDoo" /* 文字列として扱われる */
```

## 仕様書
Expand Down