【CSS Modules】::cue疑似要素の使い方

::cueオブジェクトは、ウェブページ上で表示されるメディア（動画や音声）の字幕やキャプションといった『キュー』を表すオブジェクトです。この擬似要素は、HTMLの<track>要素を通じて提供される字幕テキスト、例えばWebVTT形式の各テキストブロック（キュー）に対して、カスケーディングスタイルシート（CSS）を用いて視覚的なスタイルを適用するために特別に設計されています。

具体的には、動画や音声コンテンツが再生される際に画面に表示される字幕テキストの色、フォントサイズ、背景色、配置、文字の影など、多岐にわたるスタイルを詳細に制御することができます。これにより、ウェブサイトのブランドイメージに合わせた字幕デザインを実現したり、ユーザーがより内容を理解しやすいように視認性を高めたりすることが可能になります。例えば、話者ごとに字幕の色を変えることや、字幕の背景を半透明にすることで動画の邪魔にならないように調整するといった利用方法があります。

この機能は、コンテンツのアクセシビリティを向上させる上で非常に重要な役割を担っています。聴覚に障がいを持つユーザーや、公共の場所などで音声をオフにしてコンテンツを視聴するユーザーにとって、適切にスタイルが適用された字幕は、情報へのアクセスを大きく助けます。::cueは、一般的なHTML要素には直接適用されず、<video>や<audio>要素内で使用される<track>要素と連携してその機能を発揮します。ブラウザによるサポート状況には差異がある場合があるため、実装時には互換性を考慮することが推奨されます。

Copy
1::cue {
2  color: white;
3  background-color: black;
4}

引数なし

引数はありません

戻り値なし

戻り値はありません