We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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,