From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/_colon_fullscreen/index.html | 97 +++++++++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 files/ja/web/css/_colon_fullscreen/index.html (limited to 'files/ja/web/css/_colon_fullscreen') diff --git a/files/ja/web/css/_colon_fullscreen/index.html b/files/ja/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..82d5cb648c --- /dev/null +++ b/files/ja/web/css/_colon_fullscreen/index.html @@ -0,0 +1,97 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - Full-screen + - Full-screen API + - Fullscreen API + - Pseudo-class + - Reference + - Selector + - fullscreen + - screen +translation_of: 'Web/CSS/:fullscreen' +--- +
{{CSSRef}}
+ +

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

+ +

構文

+ +
{{csssyntax}}
+ +

使用上のメモ

+ +

: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 を持った {{HTMLElement("button")}} が、文書が全画面モードであるかどうかによって淡い赤と淡い緑の間で変化します。

+ +

CSS

+ +

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

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

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

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

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("css.selectors.fullscreen")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf