CSSの擬似要素「::cue」とは？ 動画や音声の字幕スタイルを自在に操る

::cue の役割

::cue を使用すると、以下のことが可能になります。

• 字幕やキューのフォントや色を変更する
• 字幕やキューの表示位置を調整する
• 動画や音声の字幕やキャプションのスタイルを設定する

::cue の構文

::cue の構文は以下の通りです。

selector ::cue {
  /* スタイル定義 */
}

ここで、selector は ::cue を適用する要素を選択します。例えば、以下のセレクターは、動画要素内のすべてのキューにスタイルを適用します。

video ::cue {
  /* スタイル定義 */
}

::cue のプロパティ

::cue には、以下のプロパティを定義することができます。

• voice: 字幕やキューの音声を調整します。
• stress: 字幕やキューの強調度を調整します。
• size: 字幕やキューのフォントサイズを調整します。
• line: 字幕やキューの行数を調整します。
• position: 字幕やキューの垂直方向の位置を調整します。
• direction: 字幕やキューの方向を調整します。
• align: 字幕やキューの水平方向の位置を調整します。

::cue の例

以下の例は、動画要素内のすべてのキューのフォントサイズを 16px に設定し、色を赤に変更します。

video ::cue {
  font-size: 16px;
  color: red;
}

• ::cue は、他の擬似要素と同様に、要素のコンテンツに追加されるコンテンツをスタイル設定します。つまり、::cue を使用して、要素自体をスタイル設定することはできません。
• ::cue は、WebVTT をサポートするブラウザでのみ機能します。

---

例 1：動画内のすべてのキューのフォントサイズを 16px に設定し、色を赤に変更する

video ::cue {
  font-size: 16px;
  color: red;
}

例 2：字幕の開始位置を 10px 左にオフセットし、終了位置を 10px 右にオフセットする

video ::cue(start) {
  margin-left: 10px;
}

video ::cue(end) {
  margin-right: 10px;
}

例 3：奇数行の字幕を太字にする

video ::cue(n + 1):odd {
  font-weight: bold;
}

例 4：特定の言語の字幕を青色にする

video ::cue(lang(ja)) {
  color: blue;
}

例 5：手話通訳のキューを緑色にする

video ::cue(kind(sign)) {
  color: green;
}

これらの例はほんの一例です。::cue を使用して、様々なスタイル設定を行うことができます。

• 実際の Web サイトで ::cue を使用する場合は、ブラウザの互換性を考慮する必要があります。
• 上記のコードは、すべて架空のものであり、実際の Web サイトで使用されているとは限りません。

---

• To style text in a different way
  You can use CSS selectors to target specific elements or groups of elements and apply different styles to them. For example, you can use the following CSS code to style all paragraphs in a document with a blue font color and a font size of 16px:

p {
  color: blue;
  font-size: 16px;
}

• To create a layout
  You can use CSS to position and size elements on a page. For example, you can use the following CSS code to create a two-column layout with a header, a navigation bar, and a main content area:

#header {
  background-color: #F0F0F0;
  padding: 20px;
}

#navigation {
  background-color: #E0E0E0;
  padding: 20px;
}

#main {
  padding: 20px;
}

• To add animations and transitions
  You can use CSS animations and transitions to create dynamic effects on your web page. For example, you can use the following CSS code to animate a button to change color when it is clicked:

button:hover {
  background-color: #000;
  color: #FFF;
}