これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

CSS:fullscreen 疑似クラスは、ブラウザーが全画面モードにあるときに表示される要素を表します。

/* 全画面モードで表示されている <div> をすべて選択 */
/* Firefox, WebKit/Chrome, Edge/IE では接頭辞付きで実装。
   Edge は接頭辞なしのものに対応しています。 */
div:-moz-full-screen {
  background-color: pink;
}

div:-webkit-full-screen {
  background-color: pink;
}

div:fullscreen {
  background-color: pink;
}

メモ: W3C の仕様書では、ダッシュが入らない一語の :fullscreen を使用していますが、 WebKit と Gecko の実験的な実装では、接頭辞を付けてダッシュで区切った2語のもの、それぞれ :-webkit-full-screen:-moz-full-screen を使用しています。 Microsoft Edge と Internet Explorer は普通の表現、それぞれ :fullscreen または :-ms-fullscreen を使用しています。

構文

:fullscreen

HTML

<div id="fullscreen">
  <h1>:fullscreen のでも</h1>
  <p>この文字列は、ブラウザーが全画面モードになると大きく赤くなります。</p>
  <button id="fullscreen-button">全画面モードにする</button>
</div>

CSS

#fullscreen:fullscreen {
  padding: 42px;
  background-color: pink;
  border:2px solid #f00;
  font-size: 200%;
}

#fullscreen:fullscreen > h1 {
  color: red;
}

#fullscreen:fullscreen > p {
  color: darkred;
}

#fullscreen:fullscreen > button {
  display: none;
}

結果

Click here to try out this example.

仕様書

仕様書 策定状況 コメント
Fullscreen API
:fullscreen の定義
現行の標準 初回定義。

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート15112

92

473

11 -ms- ?61
Select all elements in the fullscreen stack ?124311 ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート ? ? 有り

92

473

無し 無し ?
Select all elements in the fullscreen stack ? ? 有り ? ? ? ?

1. Supported as -webkit-full-screen.

2. Supported as -moz-full-screen.

3. 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.

関連項目

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

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