【CSS Modules】:picture-in-picture疑似クラスの使い方
:picture-in-picture疑似クラスの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
:picture-in-picture擬似クラスは、現在ピクチャーインピクチャーモードで表示されている要素にスタイルを適用するために使用されるCSSの擬似クラスです。ピクチャーインピクチャーモードとは、Webページ内の動画などのメディアコンテンツを、他のWebコンテンツの上に小さなフローティングウィンドウとして表示する機能のことです。この機能により、ユーザーはWebページをスクロールしたり、他のタブやアプリケーションに切り替えたりしても、中断することなく動画の視聴を継続できます。
この擬似クラスは主にHTMLの<video>要素に適用され、動画がピクチャーインピクチャーモードに入った際に、その動画要素の視覚的な表現を変更することを目的としています。例えば、通常表示時とは異なるボーダー、背景色、またはシャドウなどを適用することで、動画が現在ピクチャーインピクチャーモードで表示されていることをユーザーに明確に伝えることができます。
具体的な使用例としては、ピクチャーインピクチャーモード中の動画に識別しやすい太い枠線を追加したり、背景色を変更して通常表示との区別を強調したりすることが挙げられます。この擬似クラスをCSSセレクタに含めてスタイルを定義すると、ブラウザが該当要素のピクチャーインピクチャーモードへの移行を検知した際に、自動的にそのスタイルが適用されます。
この擬似クラスによって適用されるスタイルは、要素がピクチャーインピクチャーモードである間のみ有効です。モードを終了すると、定義されたスタイルは自動的に解除され、要素は通常のスタイルに戻ります。これにより、開発者はユーザーインターフェースの一貫性を保ちつつ、特定の表示モードでのみ必要なスタイルを柔軟に管理することが可能です。
構文(syntax)
1:picture-in-picture { 2 /* CSSプロパティ */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません