From 32f19c9fa9875caa788f09181f25c7f263ddbe3e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 5 Jan 2022 10:14:39 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_fullscreen/index.md | 119 +++++++++++++--------------- 1 file changed, 53 insertions(+), 66 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/_colon_fullscreen/index.md b/files/ja/web/css/_colon_fullscreen/index.md index 7696a906a3..82bc08cfec 100644 --- a/files/ja/web/css/_colon_fullscreen/index.md +++ b/files/ja/web/css/_colon_fullscreen/index.md @@ -1,95 +1,82 @@ --- title: ':fullscreen' -slug: 'Web/CSS/:fullscreen' +slug: Web/CSS/:fullscreen tags: - CSS - - Full-screen - - Full-screen API - - Fullscreen API - - Pseudo-class - - Reference - - Selector + - 全画面 + - 全画面 API + - フルスクリーン API + - 擬似クラス + - リファレンス + - セレクター - fullscreen - - screen -translation_of: 'Web/CSS/:fullscreen' + - 画面 +browser-compat: css.selectors.fullscreen +translation_of: Web/CSS/:fullscreen --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:fullscreen`** は [CSS](/ja/docs/Web/CSS) の [擬似クラス](/ja/docs/CSS/Pseudo-classes)で、現在全画面モードにあるすべての要素に一致します。複数の要素が全画面モードにある場合は、それらすべてを選択します。 -

構文

+## 構文 {{csssyntax}} -

使用上のメモ

+## 使用上のメモ -

:fullscreen 擬似クラスにより、要素が全画面と従来の表示の間を行き来した場合に、コンテンツの寸法、スタイル、レイアウトをスタイルシートで自動的に調整することができます。

+`:fullscreen` 擬似クラスにより、要素が全画面と従来の表示の間を行き来した場合に、コンテンツの寸法、スタイル、レイアウトをスタイルシートで自動的に調整することができます。 -

例

+## 例 -

この例では、文書が全画面モードであるかどうかによってボタンの色が変化します。これは JavaScript でスタイルの変更を適用せずに行われます。

+この例では、文書が全画面モードであるかどうかによってボタンの色が変化します。これは JavaScript でスタイルの変更を適用せずに行われます。 -

HTML

+### HTML -

ページの HTML は次のようなものです。

+ページの HTML は次のようなものです。 -
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>
+```html
+
MDN Web Docs Demo: :fullscreen pseudo-class

 
-<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
+
This demo uses the :fullscreen pseudo-class to automatically
   change the style of a button used to toggle full-screen mode on and off,
-  entirely using CSS.</p>
+  entirely using CSS.

 
-<button id="fs-toggle">Toggle Fullscreen</button>
+ +``` -

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

+`"fs-toggle"` の ID を持った {{HTMLElement("button")}} が、文書が全画面モードであるかどうかによって淡い赤と淡い緑の間で変化します。 -

CSS

+### CSS -

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

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

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

+文書が全画面モードになっている場合、代わりに次の CSS が適用され、背景色に淡い赤の影を設定します。 -
#fs-toggle:fullscreen {
+```css
+#fs-toggle:fullscreen {
   background-color: #faa;
-}
- -

仕様書

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

ブラウザーの互換性

- -
-

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

-
- -

関連情報

- - +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Fullscreen API](/ja/docs/Web/API/Fullscreen_API) +- [Fullscreen API のガイド](/ja/docs/Web/API/Fullscreen_API/Guide) +- {{cssxref(":not")}} +- {{cssxref("::backdrop")}} +- DOM API: {{ domxref("Element.requestFullscreen()") }}, {{ domxref("Document.exitFullscreen()") }}, {{ domxref("Document.fullscreenElement") }} +- {{HTMLAttrXRef("allowfullscreen", "iframe")}} 属性 -- cgit v1.2.3-54-g00ecf