CSS ::cue 擬似要素
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
* Some parts of this feature may have varying levels of support.
::cue は CSS の擬似要素で、選択された要素内の WebVTT キューに一致します。これにより、 VTT トラック付きのメディアでキャプションや他のキューをスタイル付設定することができます。
試してみましょう
video {
width: 100%;
}
video::cue {
font-size: 1rem;
color: yellow;
}
::cue(u) {
color: red;
}
<video controls src="/shared-assets/videos/friday.mp4">
<track
default
kind="captions"
srclang="en"
src="/shared-assets/misc/friday.vtt" />
Sorry, your browser doesn't support embedded videos.
</video>
このプロパティは、あたかも 1 つの部品であるかのように、一連のキュー全体に適用されます。 background とその個別指定だけは例外で、各キューに個別に適用されます。これは、ボックスが生成されて予期せずメディアの大きな領域を占めることを避けるためです。
構文
::cue | ::cue(<selector>) {
/* ... */
}
利用可能なプロパティ
セレクターにこの要素を含むルールでは、次の CSS プロパティしか使用することができません。
backgroundbackground-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizecolorfontfont-familyfont-sizefont-stretchfont-stylefont-variantfont-weightline-heightopacityoutlineoutline-coloroutline-styleoutline-widthruby-positiontext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-decoration-thicknesstext-shadowvisibilitywhite-space
例
WebVTT のキューを黒地に白にする
次の CSS はキューのスタイルを設定し、テキストが白に、背景が半透明の黒い矩形になります。
::cue {
color: white;
background-color: rgb(0 0 0 / 60%);
}
WebVTT 内部ノードオブジェクトのスタイル設定
キューテキストには、内部ノードオブジェクトをタグ（HTML 要素と同様）として指定することができます。具体的には、<c>、<i>、<b>、<u>、<ruby>、<rt>、<v>、<lang> などです。
::cue() セレクターを使用することができます。これにより、これらのタグ内のコンテンツにスタイルを適用し、WebVTT トラックの表示方法をカスタマイズすることができます。
<u> タグを使用してテキストに下線を引く、次のようなキューテキストを考えてみましょう。
00:00:01.500 --> 00:00:02.999 line:80% 教えてください、<u>宇宙の主</u>はいらっしゃいますか？
次の CSS ルールは、<u> タグ内のテキストの色と text-decoration を指定してカスタマイズします。
::cue(u) {
color: red;
text-decoration: wavy overline lime;
}
仕様書
| Specification |
|---|
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |