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;
}

完全な例を見る

完全な例は Glitch で利用できます。コードを表示したり編集したり動作するデモを表示したりすることができます。

仕様書

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

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 完全対応 15
代替名
完全対応 15
代替名
代替名 非標準の名前 :-webkit-full-screen を使用しています。
Edge 完全対応 12Firefox 完全対応 64
完全対応 64
完全対応 47
無効
無効 From version 47: 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
代替名
代替名 非標準の名前 :-moz-full-screen を使用しています。
IE 完全対応 11
接頭辞付き
完全対応 11
接頭辞付き
接頭辞付き -ms- のベンダー接頭辞が必要
Opera ? Safari 完全対応 6
代替名
完全対応 6
代替名
代替名 非標準の名前 :-webkit-full-screen を使用しています。
WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 64
完全対応 64
完全対応 47
無効
無効 From version 47: 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
代替名
代替名 非標準の名前 :-moz-full-screen を使用しています。
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
Select all elements in the fullscreen stack
実験的
Chrome ? Edge 完全対応 12Firefox 完全対応 43IE 完全対応 11Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

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

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, ethertank, sosleepy
最終更新者: mfuji09,