【CSS Modules】:paused疑似クラスの使い方
:paused疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:paused関数は、一時停止中（ポーズ中）のメディア要素やウェブアニメーションを選択する関数です。このCSS擬似クラスを使用することで、再生が一時停止している動画や音声といったメディア要素、あるいはWeb Animations APIなどで一時停止状態にあるアニメーション要素に対して、特定のスタイルを適用することが可能になります。
例えば、ウェブページ上で動画が一時停止している際に、その動画の上に「一時停止中」を示すオーバーレイを表示したり、アニメーションが停止している要素に対して特定の枠線や背景色を適用して、ユーザーにその状態を視覚的に伝えることが可能です。これは、ユーザーがコンテンツの状態を直感的に理解しやすくなるため、ウェブサイトやアプリケーションのユーザーインターフェースの使いやすさを向上させる上で非常に有効です。
具体的には、<video>や<audio>といったHTMLのメディア要素、またはJavaScriptのWeb Animations APIを用いて制御されるアニメーション要素などに対して適用されます。この機能により、開発者はユーザーエクスペリエンスをきめ細かく制御し、インタラクティブで分かりやすいデザインを実現できます。
公式リファレンス: :paused
構文(syntax)
1video:paused { 2 opacity: 0.5; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません