:fullscreen

CSS:fullscreen 疑似クラスは、現在全画面モードにあるすべての要素に一致します。複数の要素が全画面モードにある場合は、それらすべてを選択します。

構文

:fullscreen

使用上のメモ

:fullscreen 疑似クラスにより、要素が全画面と従来の表示の間を行き来した場合に、コンテンツの寸法、スタイル、レイアウトをスタイルシートで自動的に調整することができます。

この例では、文書が全画面モードであるかどうかによってボタンの色が変化します。これは JavaScript でスタイルの変更を適用せずに行われます。

HTML

ページの HTML は次のようなものです。

<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>

<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
  change the style of a button used to toggle full-screen mode on and off,
  entirely using CSS.</p>

<button id="fs-toggle">Toggle Fullscreen</button>

"fs-toggle" の ID を持った <button> が、文書が全画面モードであるかどうかによって淡い赤と淡い緑の間で変化します。

CSS

魔法は CSS で起こります。ここでは二つの規則があります。最初のものは要素が全画面状態でない場合に「Toggle Full-screen Mode」ボタンの色の背景を設定します。鍵になるのは :not(:fullscreen) を使用していることで、 :fullscreen 疑似クラスが適用されない要素を探します。

#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}

文書が全画面モードである場合、代わりに次の CSS が適用され、背景色に淡い赤の影を設定します。

#fs-toggle:fullscreen {
  background-color: #faa;
}

仕様書

仕様書 状態 備考
Fullscreen API
:fullscreen の定義
現行の標準 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:fullscreen
実験的
Chrome 完全対応 71
完全対応 71
完全対応 15
代替名
代替名 非標準の名前 :-webkit-full-screen を使用しています。
Edge 完全対応 12Firefox 完全対応 64
完全対応 64
未対応 47 — 65
無効
無効 From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 9 — 65
代替名
代替名 非標準の名前 :-moz-full-screen を使用しています。
IE 完全対応 11
接頭辞付き
完全対応 11
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera 完全対応 58
完全対応 58
完全対応 15
代替名
代替名 非標準の名前 :-webkit-full-screen を使用しています。
Safari 完全対応 6
代替名
完全対応 6
代替名
代替名 非標準の名前 :-webkit-full-screen を使用しています。
WebView Android 完全対応 71
完全対応 71
完全対応 37
代替名
代替名 非標準の名前 :-webkit-full-screen を使用しています。
Chrome Android 完全対応 71
完全対応 71
完全対応 18
代替名
代替名 非標準の名前 :-webkit-full-screen を使用しています。
Firefox Android 完全対応 64
完全対応 64
未対応 47 — 65
無効
無効 From version 47 until version 65 (exclusive): this feature is behind the full-screen-api.unprefix.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 9 — 65
代替名
代替名 非標準の名前 :-moz-full-screen を使用しています。
Opera Android 完全対応 50
完全対応 50
完全対応 14
代替名
代替名 非標準の名前 :-webkit-full-screen を使用しています。
Safari iOS 未対応 なしSamsung Internet Android 完全対応 10.0
完全対応 10.0
完全対応 1.0
代替名
代替名 非標準の名前 :-webkit-full-screen を使用しています。
Select all elements in the fullscreen stack
実験的
Chrome 未対応 なしEdge 完全対応 12Firefox 完全対応 43IE 完全対応 11Opera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 43Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報