blob: 82bc08cfeca0deba61132e883f5bde6ef5b5f7cc (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
---
title: ':fullscreen'
slug: Web/CSS/:fullscreen
tags:
- CSS
- 全画面
- 全画面 API
- フルスクリーン API
- 擬似クラス
- リファレンス
- セレクター
- fullscreen
- 画面
browser-compat: css.selectors.fullscreen
translation_of: Web/CSS/:fullscreen
---
{{CSSRef}}
**`:fullscreen`** は [CSS](/ja/docs/Web/CSS) の [擬似クラス](/ja/docs/CSS/Pseudo-classes)で、現在全画面モードにあるすべての要素に一致します。複数の要素が全画面モードにある場合は、それらすべてを選択します。
## 構文
{{csssyntax}}
## 使用上のメモ
`:fullscreen` 擬似クラスにより、要素が全画面と従来の表示の間を行き来した場合に、コンテンツの寸法、スタイル、レイアウトをスタイルシートで自動的に調整することができます。
## 例
この例では、文書が全画面モードであるかどうかによってボタンの色が変化します。これは JavaScript でスタイルの変更を適用せずに行われます。
### HTML
ページの 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` 擬似クラスが適用されない要素を探します。
```css
#fs-toggle:not(:fullscreen) {
background-color: #afa;
}
```
文書が全画面モードになっている場合、代わりに次の CSS が適用され、背景色に淡い赤の影を設定します。
```css
#fs-toggle:fullscreen {
background-color: #faa;
}
```
## 仕様書
{{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")}} 属性
|
