こんにちは！フロントエンド・アーキテクチャの世界へようこそ。
日々、CSSと格闘していると、「えっ、こんなところまでスタイルできるの！？」というお宝のような機能に出会うことがありますよね。
今回フォーカスするのは、動画の字幕をめちゃくちゃおしゃれにカスタマイズできちゃう魔法のセレクタ、`::cue（キュー）` 擬似要素です。
「動画の字幕なんて、ブラウザにおまかせでいいんじゃないの？」
「CSSでいじれるなんて聞いたことないよ……」
そんなふうに思っていませんか？ 大丈夫ですよ。最初は誰だって知らないものです。今日は、身近な例えを交えながら、この `::cue` の使い方を優しく、そして現場で使える実践的なコツも含めてたっぷりと解説していきますね。
—
1. `::cue` って一体なに？（身近な例えで理解する）
突然ですが、映画館やテレビで映画を見るときに出てくる「字幕」を思い浮かべてみてください。大体が黒い背景に白い文字で、画面の下の方にピョコンと出てきますよね。
Webサイトに動画（`
ここで、こんな風に思ったことはありませんか？
- 「うちのサイト、ポップで可愛い世界観だから、字幕のフォントも丸文字風にしたいな」
- 「文字のうしろの黒い帯、ちょっとダサいから透明にできないかな」
ここで登場するのが `::cue` 擬似要素 です。
イメージとしては、「動画というステージの上で、役者（字幕）の衣装やメイクをこっそり直してあげる専属スタイリスト」のようなもの。HTML側からは直接触れない動画の字幕に対して、「おいおい、もっとカッコよくしようぜ！」と外からスタイリングを指示できる、超強力なパスポートなんです。
—
2. つまずきやすいポイント：普通のCSSと何が違うの？
CSSを少し勉強した人なら、「クラス名とかID名をつけて、いつものように `p.subtitle` みたいに書けばいいんじゃないの？」と思うかもしれません。
でも、ここが大きなトラップ。
動画の字幕（WebVTTファイル）というのは、HTMLのドキュメントツリーの外側、いわゆる「別の世界」で読み込まれるものなんです。だから、いつものような通常のCSSセレクタ（`.class` や `#id`）では、中の文字をうまく掴むことができません。
そこでブラウザクンが、「専用の特別な合言葉を用意したよ。それが `::cue` だよ」と教えてくれたわけです。このルールさえ知っていれば、もう迷うことはありません！
—
3. 実践！コードを書いてみよう
百聞は一見に如かず。実際にどのように書くのか、HTMLとCSSのコードを見てみましょう。そのままコピペして、お手元のブラウザで試せるようになっています。
HTMLとWebVTTの準備（イメージ）
まずは動画と字幕ファイルを読み込ませます。
CSSの書き方（ここが主役！）
さて、ここからが `::cue` の出番です。CSSファイルに次のように書いてみましょう。
/ ==========================================
動画の字幕（::cue）をスタイリングする基本
========================================== /
/ 字幕全体（キュー全体）のデザイン /
::cue {
/ 文字の色を明るいレモン色にする /
color: #fff4d4;
/ 文字の大きさを少しリッチにする /
font-size: 1.2rem;
/ ちょっとポップなフォントを指定してみる /
font-family: “Hiragino Kaku Gothic ProN”, Meiryo, sans-serif;
/ デフォルトの黒い背景（バックドロップ）を、おしゃれな半透明の黒にする /
background-color: rgba(0, 0, 0, 0.75);
}
たったこれだけです！これだけで、ブラウザのデフォルトの無機質な字幕が、あなたのWebサイトのデザインにぴったり寄り添う素敵な字幕に変身します。
—
4. もう一歩先へ：特定の文字だけを狙い撃ちする技
「字幕全体を変えられるのは分かったけど、特定の強調したい言葉だけ色を変えたいんだけど……」
さすが実務を意識する熱心な読者さん、いい着眼点ですね！
`::cue` は、字幕ファイル（.vtt）側でタグ付けされた特定の部分だけを狙い撃ちすることもできます。
例えば、字幕ファイルの中で `
/ 「highlight」というクラスが指定された字幕の部分だけ、文字をオレンジ色にする /
::cue(c.highlight) {
color: #ff7675;
font-weight: bold;
}
こうすることで、「全体は落ち着いた色にしつつ、重要なキーワードだけ目立たせる」という、テレビ番組のテロップ顔負けの高度な演出が可能になります。現場のデザイナーさんから「おおっ、やるね！」と言われるポイントですね。
—
5. 使えるプロパティと、知っておくべき注意点
「じゃあ、なんでもかんでも自由にスタイルできるの？」というと、実はちょっとした制限があります。セキュリティーやパフォーマンス、そして各ブラウザのエンジン（BlinkやWebkitなど）の都合上、使えるCSSプロパティには限りがあります。
安心して使える代表的なプロパティ：
- `color`（文字色）
- `background-color`（背景色）
- `font-family` / `font-size` / `font-weight`（フォント関連）
- `text-shadow`（文字の影）
- `opacity`（透明度）
逆に、レイアウトを大きく変えるような `display` や `position`、`width`、`height` などは、うまく効かないことが多いので注意してくださいね。「字幕の見た目を装飾する特効薬」と割り切って使うのが、美しくハマるコツです。
—
さいごに
いかがでしたでしょうか？
`::cue 擬似要素` は、普段のWeb制作ではあまり頻繁に出会わないマイナーな存在かもしれません。だからこそ、これをサクッと使いこなせば、動画を主軸にしたリッチなLPやポートフォリオサイトで、周りの開発者たちに「おっ」と言わせることができます。
「難しそう」に見えた新しいCSSの機能も、こうして一つひとつ紐解いていけば、怖くありません。
ぜひあなたのローカル環境で動画と字幕を用意して、自由に文字の色や大きさを変えて遊んでみてくださいね。
あなたのWeb制作ライフが、もっと楽しく、クリエイティブなものになりますように！
コメント