やあ、みんな。今日も一日お疲れ様。

さて、今日はCSSのちょっとディープな世界、それも「特定の状態」に深く切り込む`:fullscreen`疑似クラスについて、現場のリアルな視点から語っていこう。

「フルスクリーン表示？ああ、ブラウザのF11キーでしょ？」なんて思ってるキミ、ちょっと待ってくれ。ここで話すのは、JavaScriptのFullscreen APIと連携して、特定の要素だけをブラウザの表示領域いっぱいに広げる、あの没入感のある体験のことだ。動画プレイヤーや画像ギャラリー、Webゲームなんかでよく使われる、あの気持ちいい全画面表示の裏側にあるCSSの魔法を解き明かしていくぞ。

没入感の演出者：`:fullscreen`疑似クラスの真髄

まず、`:fullscreen`って一体何者なのか。一言で言えば、「要素がフルスクリーンモードで表示されている時」にだけスタイルが適用される特別な疑似クラスだ。

想像してみてくれ。キミが開発しているWebサイトに、ユーザーが大画面で楽しみたい動画コンテンツや、細部まで見せたい高解像度の画像ギャラリーがあったとする。通常表示では、ヘッダー、サイドバー、フッター、その他の関連コンテンツがひしめき合っていて、主役のコンテンツが埋もれてしまいがちだ。

しかし、ユーザーが「よし、この動画に集中したい！」「この写真の細部をじっくり見たい！」と思ったとき、我々フロントエンドエンジニアの出番だ。JavaScriptのFullscreen APIを叩いて対象要素をフルスクリーンに切り替える。その瞬間、邪魔なUIは消え去り、コンテンツが画面いっぱいに広がる。

この「邪魔なUIが消え去り、コンテンツが画面いっぱいに広がる」という状態を、CSSでどう制御するか。そこでまさに光るのが`:fullscreen`なんだ。この疑似クラスは、要素がフルスクリーン状態になったことをブラウザが検知し、その要素に対してだけ特別なスタイルを適用するトリガーとなる。

ブラウザの「裏側」で何が起きているのか

ブラウザは、JavaScriptから`element.requestFullscreen()`が呼び出され、それが許可されると、対象の要素を「最前面」かつ「全画面」で表示する特別なレイヤースタックに移動させる。この時、その要素には内部的に`:fullscreen`という状態フラグが立つ、とイメージすると分かりやすいだろう。

そして、CSSエンジンはこのフラグを検知し、「ああ、今この要素はフルスクリーンモードだから、`:fullscreen`セレクタに書かれたスタイルを適用するんだな」と判断し、通常のスタイルを上書きする形で適用するんだ。これはCSSの強力なカスケードと特異度のルールに則って行われる。つまり、通常時のスタイルより`:fullscreen`のスタイルの方が特異度が高ければ、そちらが優先されるわけだ。

なぜ今、`:fullscreen`が必要なのか？

「別に`is-fullscreen`みたいなクラスをJSで付け外しすればいいんじゃないの？」

もちろん、それでも動く。しかし、`:fullscreen`を使うことには大きなメリットがある。

1. シンプルかつ堅牢な状態管理: JavaScriptでクラスの付け外しをするのは、些細なミスで状態が同期しなくなるリスクがある。`:fullscreen`はブラウザが管理する「真のフルスクリーン状態」に直接フックするため、より堅牢で予測しやすい。
2. パフォーマンスの最適化: ブラウザはフルスクリーン要素を特別な描画レイヤーに昇格させることがある。`:fullscreen`セレクタを使うことで、ブラウザはその最適化の意図をより正確に理解し、効率的なレンダリングに繋がる可能性がある。
3. セマンティックな表現: CSSだけで「この要素がフルスクリーン時にどうあるべきか」を表現できるのは、コードの意図が明確になり、可読性も向上する。CSSがデザインの状態を語っているわけだ。

これは単なる糖衣構文じゃない。ブラウザの内部的な状態とCSSを直接結びつける、強力なツールなんだ。

かつての格闘：ブラウザプレフィックスの泥沼と、そして終焉

さて、`:fullscreen`を語る上で避けて通れないのが、ブラウザプレフィックスの話だ。

昔は本当に大変だった。新しいWeb標準が提唱されても、すぐに全ブラウザが足並みを揃えて実装するわけじゃない。各ベンダーが独自に先行実装し、その際に「これはまだ実験的な機能だよ」という意味を込めて、独自のプレフィックス（接頭辞）を付けていたんだ。

フルスクリーンAPIもその例外ではなかった。

WebKit系 (Chrome, Safari, Opera, Edge旧版): `:-webkit-full-screen`
Mozilla系 (Firefox): `:-moz-full-screen`
Microsoft系 (IE11, Edge旧版): `:-ms-fullscreen`

つまり、一つの要素をフルスクリーン時にスタイルしたいと思ったら、以下のように、同じスタイルを何度も書かなければならなかったんだ。

/ 昔はこんな風に書くのが普通だった… /
:-webkit-full-screen {
/ WebKit系のブラウザ用 /
}
:-moz-full-screen {
/ Firefox用 /
}
:-ms-fullscreen {
/ IE/Edge旧版用 /
}
:fullscreen {
/ 標準仕様（将来的にはこれだけでOK） /
}

正直、このプレフィックスとの格闘はフロントエンドエンジニアの日常だった。CSSファイルは肥大化し、開発環境ではAutoprefixerのようなツールが必須だった。

そして、現代へ

しかし、時代は進んだ。Web標準化の取り組みが進み、主要なブラウザはほとんどがプレフィックスなしの`:fullscreen`に対応している。

Chrome (64以降)
Firefox (64以降)
Safari (11.1以降)
Edge (79以降、Chromiumベースになってから)

今では、ほとんどのモダンブラウザではプレフィックスなしの`:fullscreen`だけで十分機能する。これは本当に喜ばしい進化だ。あの泥沼のようなプレフィックス地獄から解放されたんだからね。

だが、注意点もある。 もしキミのプロジェクトが、古いIEやEdgeレガシー（Chromiumベースになる前のEdge）といった環境をサポートする必要があるなら、まだプレフィックスが必要になるケースもある。その判断は、プロジェクトの要件とターゲットブラウザの範囲によるから、安易に「もういらない！」と決めつけず、常に確認する癖をつけよう。

実践！`:fullscreen`を使ったスタイリング例

それでは、実際にコードを見てみよう。今回は動画プレイヤーを例に、フルスクリーン時のスタイルを適用してみる。

HTML (index.html)

Fullscreen Video Example

動画プレイヤー

通常の表示では、動画の周りに余白や他の要素があります。

「フルスクリーンで見る」ボタンをクリックすると、動画が全画面表示になります。

CSS (style.css)

body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: #f0f2f5;
color: #333;
}

h1 {
color: #2c3e50;
margin-bottom: 20px;
}

.video-container {
width: 80%; / 通常時のコンテナ幅 /
max-width: 900px; / 最大幅 /
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
text-align: center;
}

video {
width: 100%; / コンテナいっぱいに広がる /
max-height: 60vh; / 通常時の動画の高さ制限 /
background-color: #000; / 動画が読み込まれるまでの背景 /
display: block;
border-radius: 4px;
}

button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
margin-top: 15px;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #0056b3;
}

/ — ここからが本題！フルスクリーン時のスタイル — /

/ 動画要素がフルスクリーンモードになった時に適用 /
video:fullscreen {
/ フルスクリーン時はブラウザのUIが消えるため、動画を画面いっぱいに広げる /
width: 100vw; / ビューポートの幅いっぱいに /
height: 100vh; / ビューポートの高さいっぱいに /
max-height: 100vh; / 高さに制限をかけない /

/ アスペクト比を維持しつつ、要素全体を埋めるように調整 /
/ 動画の端が見切れても、画面全体に動画を表示したい場合に使う /
/ object-fit: cover; /

/ アスペクト比を維持しつつ、要素内に動画全体を収める（レターボックスが発生する可能性あり） /
/ 周囲に黒い余白が見えるが、動画全体は見える状態 /
object-fit: contain;

/ 背景色を黒にすることで、`object-fit: contain`で発生するレターボックスを馴染ませる /
background-color: #000;

/ 位置調整：フルスクリーン要素は通常、ビューポートの左上に配置される /
/ transformやpositionで中央に配置することも可能だが、多くの場合`object-fit`で十分 /
top: 0;
left: 0;
margin: 0; / bodyのmarginが影響しないように /
border-radius: 0; / 角丸をなくす /
}

/ 古いブラウザ向けプレフィックス（必要であれば残す） /
/ video:-webkit-full-screen {
width: 100vw;
height: 100vh;
max-height: 100vh;
object-fit: contain;
background-color: #000;
top: 0;
left: 0;
margin: 0;
border-radius: 0;
}
video:-moz-full-screen {
width: 100vw;
height: 100vh;
max-height: 100vh;
object-fit: contain;
background-color: #000;
top: 0;
left: 0;
margin: 0;
border-radius: 0;
}
video:-ms-fullscreen {
width: 100vw;
height: 100vh;
max-height: 100vh;
object-fit: contain;
background-color: #000;
top: 0;
left: 0;
margin: 0;
border-radius: 0;
} /

/ フルスクリーン要素の「背面」に表示される部分のスタイル /
/ 通常はフルスクリーンの要素自体に`background-color`を設定すれば十分だが、
要素の外側、つまりブラウザの描画領域いっぱいに広がる領域のスタイルを制御したい場合に使う /
video::backdrop {
background-color: #333; / フルスクリーン時の要素の背景色を設定 /
opacity: 0.9; / 少し透過させて、裏側の要素をうっすら見せる（あまり推奨されないが例として） /
transition: opacity 0.3s ease; / 切り替え時のトランジション /
}
/ 古いブラウザ向けプレフィックス /
/ video::-webkit-backdrop { background-color: #333; opacity: 0.9; transition: opacity 0.3s ease; }
video::-moz-backdrop { background-color: #333; opacity: 0.9; transition: opacity 0.3s ease; } /

JavaScript (script.js)

document.addEventListener(‘DOMContentLoaded’, () => {
const video = document.getElementById(‘myVideo’);
const fullscreenButton = document.getElementById(‘fullscreenButton’);

// フルスクリーンボタンがクリックされたら
fullscreenButton.addEventListener(‘click’, () => {
// 現在のドキュメントにフルスクリーン要素が存在しない場合（つまり、フルスクリーンではない場合）
// フルスクリーンAPIは、ユーザーの操作（クリックなど）によってのみ呼び出すことができる
if (!document.fullscreenElement) {
// video要素をフルスクリーンモードにする
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.webkitRequestFullscreen) { // Safari, Chrome (旧版)
video.webkitRequestFullscreen();
} else if (video.mozRequestFullScreen) { // Firefox
video.mozRequestFullScreen();
} else if (video.msRequestFullscreen) { // IE/Edge (旧版)
video.msRequestFullscreen();
}
} else {
// すでにフルスクリーンモードの場合、フルスクリーンを終了する
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { // Safari, Chrome (旧版)
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) { // IE/Edge (旧版)
document.msExitFullscreen();
}
}
});

// フルスクリーン状態の変更を検知するイベントリスナー
// これを使ってボタンのテキストを「フルスクリーンで見る」と「フルスクリーンを終了」で切り替えることもできる
document.addEventListener(‘fullscreenchange’, () => {
if (document.fullscreenElement) {
console.log(‘要素がフルスクリーンになりました。’);
fullscreenButton.textContent = ‘フルスクリーンを終了’;
} else {
console.log(‘フルスクリーンが終了しました。’);
fullscreenButton.textContent = ‘フルスクリーンで見る’;
}
});
// 各ブラウザ向けのイベント名も考慮（必要に応じて追加）
// document.addEventListener(‘webkitfullscreenchange’, () => { / … / });
// document.addEventListener(‘mozfullscreenchange’, () => { / … / });
// document.addEventListener(‘MSFullscreenChange’, () => { / … / });
});

このコードでは、`:fullscreen`によって動画要素が画面いっぱいに広がり、`object-fit: contain`でアスペクト比を維持しつつ、`background-color: #000`で余白を黒くしている。`::backdrop`疑似要素も使い、フルスクリーン要素の「後ろ」に描画される領域を制御しているのがポイントだ。

`::backdrop`は、フルスクリーン要素のすぐ後ろに重ねて表示されるボックスで、フルスクリーン要素自体が透明だったり、`object-fit: contain`で余白ができたりする場合に、その背後の色を制御するのに役立つ。これもまた、フルスクリーン表示のUXを細かく調整するための強力なツールだ。

注意点とベストプラクティス

最後に、`:fullscreen`を扱う上でのいくつかの注意点と、現場で役立つベストプラクティスを共有しておこう。

1. ユーザーインタラクションの必須性

最も重要な点の一つだが、フルスクリーンAPIはユーザーの明示的な操作（クリック、キーボード入力など）なしには呼び出せない。 例えば、ページロード時に勝手に`requestFullscreen()`を実行しようとしても、セキュリティ上の理由からブラウザにブロックされる。これは、悪意のあるサイトがユーザーを閉じ込めたり、広告を強制表示したりするのを防ぐための重要な仕組みだ。必ずユーザーの操作をトリガーにしよう。

2. アクセシビリティへの配慮

フルスクリーンモードに切り替わったことを、視覚に障がいのあるユーザーにも伝える配慮が必要だ。例えば、スクリーンリーダーに対して「フルスクリーンモードに切り替わりました」といったアナウンスをするなど、ARIA属性やJavaScriptで適切なフィードバックを提供することを検討しよう。

3. レスポンシブデザインとの連携

フルスクリーンモードは、デバイスのアスペクト比や解像度によって見え方が大きく変わる可能性がある。`object-fit`プロパティを適切に使うことで、コンテンツが不自然に引き伸ばされたり、重要な部分が隠れたりするのを防ぐことができる。`object-fit: contain` (全体を表示、レターボックスあり) と `object-fit: cover` (全体を覆う、はみ出しあり) を状況に応じて使い分けよう。

4. フルスクリーン時のUI設計

フルスクリーンは没入感を高めるが、ユーザーが「元の状態に戻る」「次のコンテンツへ移動する」といった操作をできなくしてはならない。画面の端に透過性のあるコントロールバーをオーバーレイ表示したり、キーボードショートカット（Escキーなど）のヒントを表示したりするなど、最低限の操作性を提供するUIも考慮しよう。

5. `::backdrop`の活用

前述の通り、`::backdrop`疑似要素はフルスクリーン要素の背後のスタイルを制御できる。要素自体が`object-fit: contain`で表示される場合など、周囲にできる余白の色を統一したり、背景にブランドカラーを適用したりする際に非常に有効だ。

まとめ

`:fullscreen`疑似クラスは、単なる見た目の変更に留まらず、ユーザーの「コンテンツへの没入」という体験を支える重要なCSSの機能だ。かつてはブラウザプレフィックスとの格闘があったものの、標準化が進んだ現代では、よりシンプルかつ強力にその力を発揮できるようになった。

僕たちが作るWeb体験は、ただ情報を表示するだけじゃない。ユーザーが「おお！」と感じるような、感動や集中を生み出すものでなければならない。`:fullscreen`は、まさにその「おお！」という瞬間の演出を、CSSの力で実現するための鍵となる。

この知識を現場で活かし、ユーザーに最高の没入体験を提供できるよう、ぜひ実践してみてくれ。今日の話が、キミのフロントエンド開発の一助となれば幸いだ。それじゃ、また次の課題で会おう！

【実務・中級編】 fullscreen疑似クラスによる全画面表示時のスタイル – CSS実践ガイド