From f8d3b5e87b9ea519f5f78627bbac5a5f765d0340 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 17 Sep 2024 11:46:10 +0900 Subject: [PATCH] =?UTF-8?q?2024/07/27=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3=20(#23527)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/07/27 時点の英語版に基づき新規翻訳 * Update files/ja/web/api/webvtt_api/web_video_text_tracks_format/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../web_video_text_tracks_format/index.md | 636 ++++++++++++++++++ 1 file changed, 636 insertions(+) create mode 100644 files/ja/web/api/webvtt_api/web_video_text_tracks_format/index.md diff --git a/files/ja/web/api/webvtt_api/web_video_text_tracks_format/index.md b/files/ja/web/api/webvtt_api/web_video_text_tracks_format/index.md new file mode 100644 index 00000000000000..82ef3f69e4f1e0 --- /dev/null +++ b/files/ja/web/api/webvtt_api/web_video_text_tracks_format/index.md @@ -0,0 +1,636 @@ +--- +title: ウェブ動画テキストトラック形式 (WebVTT) +slug: Web/API/WebVTT_API/Web_Video_Text_Tracks_Format +l10n: + sourceCommit: 44c4ec928281dc2d7c5ea42b7d2c74a2013f16ac +--- + +{{DefaultAPISidebar("WebVTT")}} + + + +**ウェブ動画テキストトラック形式 (WebVTT)** は、{{HTMLElement("video")}} および {{HTMLElement("audio")}} 要素内のコンテンツと同期するタイミング設定されたテキストトラックを表示するためのプレーンテキストファイル形式です。 +例えば、クローズドキャプションや字幕テキストを {{HTMLElement("video")}} に追加する際に使用することができます。 + +メディア要素に関連付けられた WebVTT ファイルは、{{HTMLElement("track")}} 要素を使用して追加します。[ファイルで定義された VTT コンテンツの表示](/ja/docs/Web/API/WebVTT_API#ファイルで定義された_vtt_コンテンツの表示)を参照してください。 +メディア要素は、異なる時点のデータを表す複数のファイルに関連付けることができます。例えば、さまざまなロケールに翻訳された、クローズドキャプション、字幕、チャプター見出しなどです。 + +> [!NOTE] +> WebVTT コンテンツは、[WebVTT API](/ja/docs/Web/API/WebVTT_API) を使用してプログラムで作成し、管理することもできます。 + +## 概要 + +WebVTT ファイルは、MIME タイプが `text/vtt` で、ファイル拡張子が `.vtt` です。 +コンテンツは {{Glossary("UTF-8")}} を使用してエンコードする必要があります。 + +WebVTT の構造は、以下の部品から構成されます。オプションの部品も含まれますが、この順序に則って構成されます。 + +- ヘッダーは、オプションのバイトオーダーマーク (BOM) と、"`WEBVTT`" という文字列に続き、1 つ以上の空白またはタブ文字で区切られたオプションのテキストヘッダーが続きます（WebVTT ファイルでは、タブと空白は同等です）。 +- 1 つ以上の空行は、それぞれ 2 つの連続した改行に相当します。 +- 1 行以上の空白行で区切られた、ゼロ個以上の `STYLE`、`REGION`、`NOTE` ブロックのいずれか。 +- 1 行以上の空白行で区切られた、ゼロ個以上のキューまたは `NOTE` ブロック。 + +下記に、`WEBVTT` 文字列（ヘッダーテキストなし）、メモブロック、および 2 つのキューを保有する単純な WebVTT ファイルを示します。 + +```plain +WEBVTT + +NOTE これは複数行のノートブロックです。 +これらは著者のコメントに使用します。 +2 つのキューブロックが以下で定義されています。 + +00:01.000 --> 00:04.000 +- 液体窒素を絶対に飲まないでください。 + +00:05.000 --> 00:09.000 +なぜなら、 +- 胃に穴をあけます。 +- 死ぬ可能性があります。 +``` + +以下の節では、上記の例で使用されていないものも含め、ファイルの各部分について説明します。 + +## WebVTT ヘッダー + +WebVTT ファイルは、以下の内容が格納されたヘッダーブロックから始まります。 + +- オプションのバイトオーダーマーク (BOM)、Unicode 文字 `U+FEFF` です。 +- "`WEBVTT`" という文字列。 +- オプションで、`WEBVTT` の右側のテキストヘッダー。 + + - `WEBVTT` の後に少なくとも 1 つの空白が必要です。 + - このヘッダーを使用して、ファイルに説明を追加することができます。 + - テキストヘッダーでは、改行または "`-->`" という文字列を除いて、どのようなものも使用することができます。 + +`WEBVTT` 文字列は、`WEBVTT` ファイルで唯一要求される部分であるため、最もシンプルな　`WEBVTT` ファイルは次のようになります。 + +```plain +WEBVTT +``` + +例えば、下記はテキスト入りのヘッダーを示しています。 +このテキストは、少なくとも 1 つの空白またはタブで隔てる必要があります。 + +```plain +WEBVTT このファイルにはキューがありません。 +``` + +## WebVTT キュー + +キューは、具体的な時間経過に伴って表示される単一のキャプション、字幕、その他のテキストブロックを定義します。 +キューはヘッダーと、`STYLE` または `REGION` ブロックの後に現れなければなりません。 + +各キューは 3 行以上の行で構成されます。 + +- オプションのキュー識別子に続く改行。 +- 本文テキストをどの時点に表示すべきかを示すキューのタイミング。これらはオプションで、最初の設定の前に少なくとも1つの空間があり、各設定の間にも空間があり、単一の改行が続くキュー設定に従うことができます。 + キューの本文テキストは、複数行にまたがる可能性があり、空行で終了します。 + +単純なキューの例を以下に示します。 +最初の行では、文字列 "`-->`" を使用して別個の時刻を指定することで、キューの表示開始時点と終了時点を指定します。 +2 行目は表示するテキストを定義します。 + +```plain +00:01.000 --> 00:04.000 +Never drink liquid nitrogen. +``` + +次のキューは少し複雑です。 +キュー識別子 "`1 - Title Crawl`" で始まり、これは JavaScript や CSS でキューを参照するために使用することができます。 +また、キューの時点の後にキュー設定があり、キューの位置を設定します。 + +```plain +1 - Title Crawl +00:05.000 --> 00:09.000 line:0 position:20% size:60% align:start +Because: +- It will perforate your stomach. +- You could die. +``` + +出力は内容テキスト内の改行をそのまま反映しますので、表示されているように、ハイフン (`-`) 文字を用いて箇条書きリストを作成することができます。 +一般的に、ブラウザーがテキストを適切に折り返すため、改行は必要な場合のみ挿入するようにしましょう。 + +キューの中で「余分な」空行を使用しないことが重要です。例えば、タイミングラインとキューの内容の間や、キューの内容の中に空行を入れないようにしてください。 +これは、空行があると現在のキューがそこで終わってしまうからです。 + +キューの各部分については、以下の節でさらに詳しく説明します。 + +### キュー識別子 + +識別子は、キューを識別する名前です。スクリプトからキューを参照するために使用できます。改行を含むことはできず、文字列 "`-->`" を含むことはできません。それは単一の改行で終わらなければなりません。番号をつけるのが一般的ですが（例えば、1、2、3、...）、それらは一意である必要はありません。 + +例えば、下記は識別子を記載した複数のキューを含むファイルを示しています。 + +```plain +WEBVTT + +1 +00:00:22.230 --> 00:00:24.606 +これは最初の字幕です。 + +2 Some Text +00:00:30.739 --> 00:00:34.074 +これは 2 番目です。 + +3 +00:00:34.159 --> 00:00:35.743 +これは 3 番目です。 +``` + +### キューのタイミング + +キューのタイミングは、キューがいつ表示されるかを示します。タイムスタンプで表される開始時刻と終了時刻があります。終了時刻は開始時刻より後でなければならず、開始時刻は前のすべての開始時刻より後でなければなりません。キューは、タイミングが重複するかもしれません。 + +WebVTT ファイルをチャプターに使用している場合（{{HTMLElement("track")}} の [`kind`](/ja/docs/Web/HTML/Element/track#kind) は `chapters` です）、ファイルは重複するタイミングを持つことはできません。 + +各キューのタイミングには次の 5 つの要素があります。 + +- 開始時刻のタイムスタンプ。 +- 少なくとも 1 つのスペース。 +- 文字列 "`-->`"。 +- 少なくとも 1 つのスペース。 +- 終了時刻のタイムスタンプ。開始時刻より後でなければなりません。 + +タイムスタンプは、次の 2 つの形式のいずれかになります。 + +- `mm:ss.ttt` +- `hh:mm:ss.ttt` + +そのコンポーネントは次のように定義されています。 + +- `hh` + - : 時を表し、2 桁以上でなければなりません。2 桁を超えることがあります（例えば、`9999:00:00.00`）。 +- `mm` + - : 分を表し、00 以上 59 以下でなければなりません。 +- `ss` + - : 秒を表し、00 以上 59 以下でなければなりません。 +- `ttt` + - : ミリ秒を表し、000 以上 999 以下でなければなりません。 + +キューのタイミングの例をいくつか示します。 + +- 基本的なキューのタイミングの例 + + ```plain + 00:00:22.230 --> 00:00:24.606 + 00:00:30.739 --> 00:00:34.074 + 00:00:34.159 --> 00:00:35.743 + 00:00:35.827 --> 00:00:40.122 + ``` + +- 重複するキューのタイミングの例 + + ```plain + 00:00:00.000 --> 00:00:10.000 + 00:00:05.000 --> 00:01:00.000 + 00:00:30.000 --> 00:00:50.000 + ``` + +- 重複しないキューのタイミングの例 + + ```plain + 00:00:00.000 --> 00:00:10.000 + 00:00:10.000 --> 00:01:00.581 + 00:01:00.581 --> 00:02:00.100 + 00:02:01.000 --> 00:02:01.000 + ``` + +### キュー設定 + +キュー設定は、動画上にキュー本体のテキストを表示する位置を決めるために使用するオプションのコンポーネントです。これには、テキストを水平に表示するか垂直に表示するかが含まれます。それらは 0 個以上存在することができ、各設定が 2 回以上使用されない限り、それらは任意の順序で使用できます。 + +キュー設定は、キューのタイミングの右側に追加します。キューのタイミングと最初の設定の間、および各設定の間には 1 つ以上のスペースが必要です。設定の名前と値はコロンで区切ります。設定では大文字と小文字が区別されるため、次のように小文字を使用してください。次の 5 つのキュー設定があります。 + +- `vertical` + - : 一部のアジアの言語のように、テキストを水平ではなく垂直に表示することを示します。取りうる値は 2 つあります。 + - `rl` + - : 書字方向は右から左 + - `lr` + - : 書字方向は左から右 +- `line` + + - : vertical が設定されていない場合は、テキストを垂直方向に表示する場所を指定します。vertical が設定されている場合、line はテキストを水平方向に表示する場所を指定します。値は次の何れかです。 + + - 行番号 + - : 数値は、映像に表示されるキューの最初の行の垂直位置です。正の数値はトップダウン、負の数値はボトムアップを示します。 + - パーセント値 + - : 0 から 100 までの整数（小数点を含まない）で、その後にパーセント記号 (%) を付けなければなりません。 + + | line | `vertical` を省略 | `vertical:rl` | `vertical:lr` | + | ----------- | ----------------- | ------------- | ------------- | + | `line:0` | 上端 | 右端 | 左端 | + | `line:-1` | 下端 | 左端 | 右端 | + | `line:0%` | 上端 | 右端 | 左端 | + | `line:100%` | 下端 | 左端 | 右端 | + +- `position` + + - : `vertical` を設定しなかった場合、`position` はテキストが水平に現れる位置を指定します。`vertical` を設定した場合、`position` はテキストが垂直に現れる位置を指定します。値は 0 以上 100 以下のパーセント値です。 + + | position | `vertical` を省略 | `vertical:rl` | `vertical:lr` | + | --------------- | ----------------- | ------------- | ------------- | + | `position:0%` | 左端 | 上端 | 上端 | + | `position:100%` | 右端 | 下端 | 下端 | + +- `size` + + - : `vertical` を設定しなかった場合、`size` はテキスト領域の幅を指定します。`vertical` を設定した場合、`size` はテキスト領域の高さを指定します。値は 0 以上 100 以下のパーセント値です。 + + | size | `vertical` を省略 | `vertical:rl` | `vertical:lr` | + | ----------- | ----------------- | ------------- | ------------- | + | `size:100%` | 幅全体 | 高さ全体 | 高さ全体 | + | `size:50%` | 半分の幅 | 半分の高さ | 半分の高さ | + +- `align` + + - : テキストの配置を指定します。設定している場合、テキストは size キュー設定で指定された領域内に配置されます。 + + | align | `vertical` を省略 | `vertical:rl` | `vertical:lr` | + | -------------- | ------------------ | ------------------ | ------------------ | + | `align:start` | 左端 | 上端 | 上端 | + | `align:center` | 水平方向に中央揃え | 垂直方向に中央揃え | 垂直方向に中央揃え | + | `align:end` | 右端 | 下端 | 下端 | + +キュー設定の例を見てみましょう。 +最初の行は設定がないことを示しています。2 行目は、サインやラベルの上にテキストを重ねるために使用します。3 行目はタイトルに使用できます。最後の行はアジアの言語に使われるかもしれません。 + +```plain +00:00:05.000 --> 00:00:10.000 +00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start +00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start +00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end +00:00:05.000 --> 00:00:10.000 position:10%,line-left align:left size:31% +00:00:05.000 --> 00:00:10.000 position:90% align:right size:35% +00:00:05.000 --> 00:00:10.000 position:45%,line-right align:center size:90% +``` + +### キュー本体 + +本体は、字幕やクローズドキャプションのテキストのようなキューのコンテンツを定義するところです。 +本体のテキストには改行を含めることができますが、空白行を含めることはできません。これは、2 つの連続する改行に相当します。空白行はキューの終わりを表します。 + +キュー本体のテキストには、文字列 `-->`、アンパサンド文字 (`&`)、小なり記号 (`<`) を含めることはできません。 +必要であれば、代わりに{{glossary("character reference", "文字参照")}}を使用することができます。たとえば、アンパサンドには `&` を、小なりには `<` を使用します。 +タグとの混同を避けるために、大なり記号 (`>`) の代わりに大なりエスケープシーケンス `>` を使用することをお勧めします。 +メタデータに WebVTT ファイルを使用している場合、これらの制限は適用されません。 + +すべての主要ブラウザーでは、キュー、メモ、または他のテキストに任意の{{glossary("character reference", "文字参照")}}を使用できます。 +古いバージョンのブラウザーでは、名前付き文字参照の以下のサブセットのみに対応している場合があります。 + +| 名前 | 文字 | エスケープシーケンス | +| ------------ | ------ | -------------------- | +| アンパサンド | `&` | `&` | +| 小なり | `<` | `<` | +| 大なり | `>` | `>` | +| 左書きマーク | _なし_ | `‎` | +| 右書きマーク | _なし_ | `‏` | +| 無改行空白 | | ` ` | + +### キュー本体テキストタグ + +キュー内のテキストのマークアップやスタイル設定には、`` などの多数のタグを使用することができます。 +ただし、WebVTT ファイルが {{HTMLElement("track")}} 要素の中で使われていて、その属性 [`kind`](/ja/docs/Web/HTML/Element/track#kind) が `chapters` である場合は、タグを使うことができません。 + +- タイムスタンプタグ + + - : タイムスタンプは、キューの開始タイムスタンプより大きく、キュー本体内の前のタイムスタンプより大きく、キューの終了タイムスタンプより小さくなければなりません。*アクティブテキスト*は、タイムスタンプと次のタイムスタンプの間、または本体に別のタイムスタンプがない場合は本体の最後までのテキストです。本体内の*アクティブテキスト*より前のテキストはすべて*過去のテキスト*です。*アクティブテキスト*より後のテキストはすべて*将来のテキスト*です。これによりカラオケ風のキャプションが実現できます。 + + ```plain + 1 + 00:16.500 --> 00:18.500 + When the moon <00:17.500>hits your eye + + 1 + 00:00:18.500 --> 00:00:20.500 + Like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie + + 1 + 00:00:20.500 --> 00:00:21.500 + That's <00:00:21.000>amore + ``` + +次のタグは、キューで使用できる HTML タグで、開始タグと終了タグ（例えば、`テキスト`）が必要です。 +これらのタグでマークアップされたテキストは、{{cssxref("::cue")}} 擬似要素を使用して [`STYLE` ブロック](#style_ブロック)で書式化することができます。 + +- イタリック体タグ (``) + + - : 含まれているテキストをイタリック体にします。 + + ```xml + text + ``` + +- 太字タグ (``) + + - : 含まれているテキストを太字にします。 + + ```xml + text + ``` + +- 下線タグ (``) + + - : 含まれているテキストに下線を引きます。 + + ```xml + text + ``` + +- クラスタグ (``) + + - : CSS クラスを使用して含まれているテキストをスタイルします。 + + ```xml + text + ``` + +- ルビタグ (``) + + - : [ルビ文字](https://ja.wikipedia.org/wiki/%E3%83%AB%E3%83%93)（すなわち、他の文字の上にある小さな注釈文字）を表示するためにルビテキストタグと共に使用します。 + + ```xml + WWWWorld Wide Webouiyes + ``` + +- ルビテキストタグ (``) + + - : [ルビ文字](https://ja.wikipedia.org/wiki/%E3%83%AB%E3%83%93)（つまり、他の文字の上にある小さな注釈文字）を表示するためにルビタグとともに使用します。 + + ```xml + WWWWorld Wide Webouiyes + ``` + +- ボイスタグ (``) + + - : クラスタグと同様に、CSS を使用して含まれているテキストをスタイル設定するためにも使用します。 + + ```xml + text + ``` + +- 言語タグ (``) + + - : {{RFC(5646, "Tags for Identifying Languages (別名 BCP 47)")}} で定義された形式を使用して、具体的な言語または言語のバリエーションに属するものとしてマークアップされたテキストをハイライトする際に使用します。 + + ```xml + Engish text as spoken in Great Britain! + ``` + +## NOTE ブロック + +NOTE ブロックは、WebVTT ファイルにコメントを追加するために使用できるオプションの節です。 +これは、ファイルを読む人々を意図したものであり、ユーザーには表示されません。 +例えば、作成者の連絡先を記録したり、構造の概要を提供したり、まだ書く必要があるキューのプレースホルダを追加したりするために使用することができます。 + +これらは、ヘッダーの後に続く WebVTT ファイル内のどこでも使用することができます。 + +NOTE ブロックには改行を入れることができますが、2 つの改行を連続して格納することはできません。2 つの改行を連続して格納すると、ブロックの終わりを示す空行が作成されます。 + +コメントには、文字列 `-->`、アンパサンド文字 (`&`)、小なり記号 (`<`) を含めることはできません。 +必要であれば、代わりに{{glossary("character reference", "文字参照")}}を使用することができます。たとえば、アンパサンドには `&` を、小なりには `<` を使用します。 +タグとの混同を避けるために、大なり記号 (`>`) の代わりに大なりエスケープシーケンス `>` を使用することをお勧めします。 + +コメントは 3 つの部分から構成されます。 + +- 文字列 `NOTE` +- 空白または改行 +- 上記に示した以外の 0 以上の文字。 + +いくつか例を示します。 + +```plain +NOTE これは単一行コメントです + +NOTE +これは単純な複数行コメントです + +NOTE +複数行にまたがる +単一のコメントです。 + +NOTE このように複数行にまたがる +コメントを作成できます。 + +NOTE TODO まだ作業が残っていることを示す行を追加することができます。 +``` + +## STYLE ブロック + +`STYLE` ブロックはオプションの節で、WebVTT ファイル内にキューの CSS スタイルを埋め込むために使用することができます。 +これらのスタイルはキューの外観とサイズを指定するために使用しますが、位置やレイアウトは指定できません。これらは[キュー設定](#キュー設定)で制御できます。 + +> [!NOTE] +> WebVTT キューは、[video/audio 要素を埋め込んだ]((/ja/docs/Web/API/WebVTT_API#styling_webvtt_in_html_or_a_stylesheet))関連文書から読み込まれた CSS スタイルにも一致します。 + +`STYLE` ブロックは、ファイル内のすべてのキューブロックより前に現れなければなりません。 + +各ブロックは以下の行で構成されています。 + +- 文字列 `STYLE` に続く、0 個以上の空白またはタブ文字、そして改行。 +- 一致する CSS スタイルを定義し、適用する文字列は、{{cssxref("::cue")}} 擬似要素を使用します。 + +ブロックには文字列 `-->` を含めることはできません。 +改行は含めることができますが、2 行の改行を連続して含めることはできません。2 行の改行は空白行を作成し、ブロックの終わりを示します。 + +下記に、2 つの `STYLE` ブロックを含む単純な WebVTT ファイルを示します。 +{{cssxref("::cue")}} を使用して、すべてのキューテキストにテキスト色を適用し、`` タグでタグ付けされたテキストだけに異なるテキスト色を適用しています。 + +```plain +WEBVTT + +STYLE +::cue { + background-image: linear-gradient(to bottom, dimgray, lightgray); + color: papayawhip; +} +/* スタイルブロックでは、空行や「ダッシュダッシュ大なり」を使用することはできません。 */ + +NOTE コメントブロックはスタイルブロックの間に使用することができます。 + +STYLE +::cue(b) { + color: peachpuff; +} + +00:00:00.000 --> 00:00:10.000 +- Hello world. + +NOTE スタイルブロックは最初のキューの後には現れることができません。 +``` + +> [!NOTE] +> WebVTT API の[キュースタイル設定例](/ja/docs/Web/API/WebVTT_API#more_cue_styling_examples)では、次の多くの例に従うことで、ライブの例が示されています。 + +### すべてのキュー本体テキストとの照合 + +{{cssxref("::cue")}} を使用して、キューの内容テキストすべてについて照合します。 + +例えば、次の `STYLE` ブロックは、すべてのキューテキストと一致し、それを黄色に色付けするというものです。 + +```plain +STYLE +cue { + color: yellow; +} +``` + +### タグ型との照合 + +{{cssxref("::cue()")}} にタグを型セレクターとして入力すると、`c`、`i`、`b`、`u`、`ruby`、`rt`、`v`、`lang`な どの具体的なキュー本体テキストタグでマークアップされたキューテキストと一致するキューテキストと一致します。 + +例えば、次のブロックは、 `lang` で黄色にマークアップされたキュー本体テキストと、その他のタグが赤でマークアップされたものに一致します。 + +```plain +STYLE +cue(c), +cue(i), +cue(b), +cue(u), +cue(ruby), +cue(rt), +cue(v) { + color: red; +} +cue(lang) { + color: yellow; +} +``` + +### クラスセレクターの照合 + +クラスセレクターを `::cue()` で使用すると、マークアップされたすべてのタグと照合します。 + +次の WebVTT ファイルの `STYLE` ブロックは、すべてのタグが `myclass` クラスを保有しているため、続くすべてのテキストと一致します。 + +```plain +WEBVTT + +STYLE +::cue(.myclass) { + color: yellow; +} + +00:00:00.000 --> 00:00:08.000 +Yellow! +Yellow! +Yellow! +Yellow! +Yellow! +Yellow! Yellow! +Yellow! +Yellow! +``` + +具体的なタグとクラスを選択するには、`::cue()` のどちらも指定する必要があります。 + +```css +STYLE ::cue(b.myclass) { + color: yellow; +} +``` + +### 属性の照合 + +特定のタグと属性でマークアップされたキュー本体テキストは、属性セレクターを使用して照合することができます。 + +例えば、次の WebVTT ファイルを考えてみましょう。このファイルには、`v` と `lang` の[キュー本体テキストタグ](#キュー本体テキストタグ)を使用してマークアップされたテキストがあり、属性を使用して具体的な音声 ("Salame") と言語を指定します。 + +```plain +WEBVTT + +STYLE +::cue([lang="en-US"]) { +color: yellow; +} +::cue(lang[lang="en-GB"]) { +color: cyan; +} +::cue(v[voice="Salame"]) { +color: lime; +} + +00:00:00.000 --> 00:00:08.000 +Yellow! + +00:00:08.000 --> 00:00:16.000 +Cyan! + +00:00:16.000 --> 00:00:24.000 +I like lime. +``` + +### 擬似クラスの照合 + +例えば、属性の照合を使用して、具体的な言語のテキストにスタイル設定を行うことができます。 +下記 `STYLE` ブロックで示されているように、`:lang()` 疑似クラスを使用して言語を照合することもできます。 + +```plain +STYLE +::cue(:lang(en)) { + color: yellow; +} +::cue(:lang(en-GB)) { + color: cyan; +} +``` + +同様に、`:past` および `:future` 擬似クラスと照合させることで、カラオケのような体験を提供することができます。 + +```css +video::cue(:past) { + color: yellow; +} +video::cue(:future) { + color: cyan; +} +``` + +他にも、`link`、`nth-last-child`、`nth-child` などの疑似クラスも同様に動作します。 + +### キュー ID の照合 + +{{cssxref("::cue()")}} 内の `id` を指定することで、特定のキューの `id` と照合します。 + +> [!NOTE] +> これを書いている時点では、主要ブラウザーのいずれにも対応していないようです。 + +例えば、次の WebVTT ファイルは、識別子 `cue1` のキューを緑色にスタイル設定するでしょう。 + +```plain +WEBVTT + +STYLE ::cue(#cue1) { + color: green; +} + +cue1 +00:00:00.000 --> 00:00:08.000 +Green! +``` + +WebVTT CSS では、HTML ページと同様にエスケープシーケンスを使用します。下記は、キュー識別子内の空間をエスケープする方法を示す例です。 + +```plain +WEBVTT + +STYLE +::cue(#crédit\ de\ transcription) { + color: red; +} + +crédit de transcription +00:04.000 --> 00:05.000 +Transcrit par Célestes™ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- CSS の [`::cue` および `::cue()`](/ja/docs/Web/CSS/::cue) 擬似要素