Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

:fullscreen

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

概要

CSS の :fullscreen 疑似クラスは、現在フルスクリーンモードで表示されているすべての要素に適用されます。トップレベルの要素だけでなく、重なって表示されているすべての要素を選択します。

W3C の提案はダッシュのない単語 :fullscreen を使いますが、Webkit と Gecko の実験的な実装は、ダッシュで単語を繋ぎプレフィックスのある別形を使います。それぞれ :-webkit-full-screen:-moz-full-screen です。Microsoft Edge および Internet Explorer はそれぞれ、標準の構文 :fullscreen および :-ms-fullscreen を使用します。

*:fullscreen {
  position:fixed;
  top:0; 
  right:0; 
  bottom:0; 
  left:0;
  margin:0;
  box-sizing:border-box;
  width:100%;
  height:100%;
  object-fit:contain;
}
h1:fullscreen {
  border:1px solid #f00;
}
p:fullscreen {
  font-size: 200%;
}

仕様

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

ブラウザ実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 15.0 -webkit[1] 12 9.0 (9.0)-moz[1] 11 -ms[2] ? 6.0 -webkit[1]
フルスクリーンスタックの全要素を選択 ? 12 43 (43) 11 ? ?
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? 9.0 (9.0) 未サポート 未サポート 未サポート
フルスクリーンスタックの全要素を選択 ? 43.0 (43) ? ? ?

[1] Webkit と Gecko のプレフィックス版はどちらも fullscreen の間にダッシュがありますが W3C の提案は 1 単語を使っています : :fullscreen, :-webkit-full-screen, :-moz-full-screen

[2] Internet Explorer は接頭辞 -ms を使用しますが、fullscreen の間にダッシュがありません : :-ms-fullscreen

関連情報

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

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