Fullscreen API
Fullscreen APIを使用すると、任意の要素をフルスクリーン表示に切り替えることができます。動画プレーヤーやプレゼンテーション、ゲームなど、没入感のある体験を提供する場面で活用されます。:fullscreen疑似クラスを使ってフルスクリーン時のスタイルを制御できます。
概要
Fullscreen APIを使用すると、任意の要素をフルスクリーン表示に切り替えることができます。動画プレーヤーやプレゼンテーション、ゲームなど、没入感のある体験を提供する場面で活用されます。:fullscreen疑似クラスを使ってフルスクリーン時のスタイルを制御できます。
対応ブラウザ
デスクトップ
Chrome 71+
Edge 79+
Safari 16.4+
Firefox 64+
モバイル
Chrome Android 71+
Safari iOS 未対応
Firefox Android 64+
基本構文
CSS
:fullscreen {
background-color: black;
}
::backdrop {
background-color: rgba(0, 0, 0, 0.8);
}実務での使いどころ
-
動画のフルスクリーン再生
動画プレーヤーをフルスクリーン表示し、背景を黒にして没入感のある視聴体験を提供します。
注意点
- Fullscreen APIはユーザー操作（クリックなど）をトリガーとして呼び出す必要があり、自動的にフルスクリーンにすることはできません。
アクセシビリティ
- フルスクリーンモードではEscキーで終了できることをユーザーに明示し、キーボード操作でもフルスクリーンの切り替えが可能であることを確認してください。