【CSS Modules】:fullscreen疑似クラスの使い方
:fullscreen疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:fullscreenオブジェクトは、Webページ上で特定の要素が全画面表示（フルスクリーンモード）になっている状態を表すオブジェクトです。これはCSSの擬似クラスとして機能し、ユーザーがブラウザの全画面モードに入った要素にスタイルを適用するために使用されます。
この:fullscreen擬似クラスは、要素がHTML Fullscreen API（例えばJavaScriptのrequestFullscreen()メソッドなど）によって全画面表示モードに切り替わると、その要素に自動的に適用されます。そして、全画面モードから解除されると、自動的に適用が外れます。システムエンジニアを目指す方にとって、この機能は動画プレーヤーや画像ギャラリー、インタラクティブなアプリケーションなどが全画面表示になった際に、特別なデザインやレイアウトを適用したい場合に非常に役立ちます。
例えば、全画面表示中のビデオの背景色を変えたり、全画面時のみ表示されるコントロールボタンを調整したり、逆に通常のUI要素を一時的に非表示にしたりする際に利用できます。これにより、ユーザー体験を向上させ、全画面コンテンツへの没入感を高めることが可能です。
ただし、セキュリティ上の理由から、全画面表示の切り替えはユーザーの操作（クリックなど）によってトリガーされる必要があり、スクリプトが自動的に全画面モードを開始することはできません。また、ブラウザによってはベンダープレフィックスが必要となる場合がありますが、現代の主要なブラウザではほとんどの場合、プレフィックスなしで使用できます。
公式リファレンス: :fullscreen
構文(syntax)
1:fullscreen { 2 /* 全画面表示モードの要素に適用されるスタイル */ 3 background-color: black; 4 color: white; 5}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません