このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
CSS :fullscreen 擬似クラス
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
:fullscreen は CSS の 擬似クラスで、現在全画面モードにあるすべての要素に一致します。複数の要素が全画面モードにある場合は、それらすべてを選択します。
構文
css
:fullscreen {
/* ... */
}
使用上のメモ
:fullscreen 擬似クラスにより、要素が全画面と従来の表示の間を行き来した場合に、コンテンツの寸法、スタイル、レイアウトをスタイルシートで自動的に調整することができます。
例
全画面要素のスタイル設定
この例では、文書が全画面モードであるかどうかによってボタンの色が変化します。これは JavaScript でスタイルの変更を適用せずに行われます。
html
<div class="element">
<h1><code>:fullscreen</code> 擬似クラスのデモ</h1>
<p>
このデモでは、<code>:fullscreen</code> 擬似クラスを使用して、<code>.element</code> の div の背景色を自動的に変更しています。
</p>
<p>
通常、背景色は薄い黄色です。全画面モードでは、背景色は薄いピンクになります。
</p>
<button class="toggle">全画面切り替え</button>
</div>
:fullscreen 擬似クラスは、<div> が全画面モードのときに、その background-color を上書きするために使用されます。
css
.element {
background-color: lightyellow;
}
.element:fullscreen {
background-color: lightpink;
}
文書が全画面モードになっている場合、代わりに次の CSS が適用され、背景色に淡い赤の影を設定します。
js
document.querySelector(".toggle").addEventListener("click", (event) => {
if (document.fullscreenElement) {
// 全画面要素がある場合は、全画面モードを終了する
document.exitFullscreen();
return;
}
// .element の div を全画面表示にする
document.querySelector(".element").requestFullscreen();
});
.element {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: sans-serif;
padding: 1.2em;
}
[フレーム]
仕様書
| 仕様書 |
|---|
| Selectors Level 4 # selectordef-fullscreen |
| Fullscreen API # css-pc-fullscreen |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。