おい、最近よくある「画面いっぱいにリッチなコンテンツを表示したい」っていう要件、君のプロジェクトでも実装したよな？ 動画プレイヤー、画像ギャラリー、あるいはダッシュボードのデータビジュアライゼーション。
ユーザーが「全画面表示（フルスクリーン）」のボタンをポチッと押したとき、開発者である僕たちが頭を悩ませるのが「通常時とフルスクリーン時で、CSSのレイアウトやデザインをどう切り替えるか」という問題だ。
JavaScriptの `requestFullscreen()` を叩いてブラウザを全画面モードにするだけなら誰でも書ける。だが、その後の見た目のチューニングを怠ると、全画面にした瞬間に背景が真っ白になったり、コントロールバーの配置が盛大に崩れたりして、QAチームから容赦ないバグチケットが飛んでくることになる。
そこで今日は、CSSの知られざる実力者であり、このフルスクリーン狂騒曲を華麗に鎮める `:fullscreen` 擬似クラスについて、実務で即座に使える知見を余すところなく伝授しよう。公式リファレンスには載っていない、ブラウザの裏側の挙動や泥臭いハックも含めてな。
—
1. `:fullscreen` 擬似クラスの基本と正体
まずは基本の確認だ。`:fullscreen` は、ブラウザのFullscreen APIによって「現在フルスクリーンモードで表示されている要素」にマッチする動的な擬似クラスだ。
中級へのステップアップとして最初に叩き込んでおいてほしいのは、「何がフルスクリーンになるか」という点だ。大体のエンジニアは、動画や画像（`video`タグや`img`タグなど）そのものを全画面にすると思っているが、実務ではラッパー要素（`div`などのコンテナ）ごと全画面化するケースがほとんどだ。
/ フルスクリーン表示されたコンテナ内のデザインを制御する /
.media-container:fullscreen {
width: 100vw;
height: 100vh;
background-color: #000000; / 全画面時は背景を強制的に漆黒に /
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
このコードの何が美しいか？ JavaScript側でわざわざクラスを付け外しする泥臭い処理を書かなくても、ブラウザがネイティブで全画面状態を検知し、自動的にこのスタイルを適用してくれる点にある。状態管理の関心をCSSに委譲できる、これぞモダニズムだ。
—
2. 現場の現実：ベンダープレフィックスの悪夢とブラウザの裏側
さて、ここからがシニアの腕の見せ所だ。「よし、`:fullscreen` を書けば完璧だな」と思ったそこの君、甘い。現実のブラウザはそんなに優しくない。
ブラウザが裏側でどう処理しているかを知る必要がある。Fullscreen APIは歴史的経緯もあり、各ベンダーが独自の拡張を重ねてきた。そのため、現在でもベンダープレフィックスの亡霊がコードベースに立ち込めている。
特にSafariだ。デスクトップ版やiOSのWebKit系ブラウザでは、未だに `-webkit-full-screen` という独自の構文を要求してくることが多い。ここをサボると、「Chromeでは完璧なのに、MacのSafariで全画面にするとレイアウトが崩壊する」という、よくある悪夢を見る羽目になる。
実務では、必ず以下のようにセレクタをカンマ区切りでチェインさせ、将来の標準と過去の遺物に対する防衛策（防御的CSS）を講じるのがプロの流儀だ。
/ ブラウザごとのプレフィックスを網羅した安全なセレクタ群 /
.app-viewer:fullscreen,
.app-viewer:-webkit-full-screen,
.app-viewer:-moz-full-screen,
.app-viewer:-ms-fullscreen {
/ ここに共通のフルスクリーン用スタイルを書く /
padding: 0;
margin: 0;
max-width: none;
max-height: none;
}
さらに、ブラウザのレンダリングエンジンの裏側についても触れておこう。要素がフルスクリーン化されると、多くのブラウザはその要素を現在のDOMツリーのコンテキストから切り離し、最上位のレイヤー（Top Layer）へと強制的に引き上げる。
つまり、`z-index` の数値をいくつに設定しようが、フルスクリーンになった要素は問答無用で画面の最前面に描画される。この「Top Layerへの昇格」という挙動を頭に叩き込んでおかないと、フルスクリーン時に予期せぬスタッキングコンテキストのバグに頭を抱えることになるぞ。
—
3. 実践！コピペで使える「完璧なフルスクリーン動画・画像ビューア」
理屈はこれくらいにして、現場でそのまま使える実用的なコードを見せよう。
今回は、リッチなメディアプレイヤーのコンテナを想定したサンプルだ。通常時は通常のレイアウトに収まり、フルスクリーンボタンが押された瞬間に画面全体を支配して、美しいUIを提供するコードだ。
HTML構造
CSSコード
/ — 通常時のスタイル — /
.media-container {
position: relative;
width: 100%;
max-width: 800px;
height: 450px;
background: #f0f0f0;
overflow: hidden;
border-radius: 8px;
transition: all 0.3s ease;
}
.media-content {
width: 100%;
height: 100%;
object-fit: cover; / アスペクト比を維持しつつコンテナを埋める /
}
.media-controls {
position: absolute;
bottom: 16px;
right: 16px;
opacity: 0.8;
transition: opacity 0.2s;
}
.media-controls:hover {
opacity: 1;
}
/ — フルスクリーン時のスタイル（ベンダープレフィックス完全網羅） — /
.media-container:fullscreen,
.media-container:-webkit-full-screen,
.media-container:-moz-full-screen,
.media-container:-ms-fullscreen {
width: 100vw !important; / ビューポート幅いっぱいに強制拡張 /
height: 100vh !important; / ビューポート高さいっぱいに強制拡張 /
max-width: none !important;
max-height: none !important;
background-color: #0d0d0d; / シネマティックな暗めの背景 /
border-radius: 0; / フルスクリーン時は角丸をリセット /
display: flex;
justify-content: center;
align-items: center;
}
/ フルスクリーン時の内部コンテンツの振る舞いを微調整 /
.media-container:fullscreen .media-content,
.media-container:-webkit-full-screen .media-content,
.media-container:-moz-full-screen .media-content,
.media-container:-ms-fullscreen .media-content {
width: 100%;
height: 100%;
object-fit: contain; / 全画面では画像全体が見切れないようにcontainへ切り替える /
}
/ フルスクリーン時のみコントロールバーの位置や見た目を変えるハック /
.media-container:fullscreen .media-controls,
.media-container:-webkit-full-screen .media-controls,
.media-container:-moz-full-screen .media-controls,
.media-container:-ms-fullscreen .media-controls {
bottom: 32px; / 画面下部から少し余裕を持たせる /
right: 32px;
}
このコードのポイントは、通常時は `object-fit: cover` でカード型レイアウトに馴染ませ、フルスクリーンになった瞬間には `:fullscreen` セレクタの力で `object-fit: contain` に切り替え、画像の全体像を美しく見せるというUX上の細やかな配慮だ。こういう「痒いところに手が届く実装」ができるかどうかが、中級からシニアへ上がれるかの分かれ道になる。
—
4. シニアからの実践的なアドバイスと罠の回避
最後に、現場でよくハマる「罠」と、それを回避するための知見をいくつかシェアしておこう。
1. スクロールバーの消し忘れに注意
フルスクリーン要素がHTMLのルート要素（`` や `
2. JavaScriptとの連携は最小限に
「フルスクリーン状態になったらクラスを付与する」というJSのコードをわざわざ書くエンジニアがいるが、それはアンチパターンだ。ブラウザの「ESCキー」でフルスクリーンが解除されたとき、JSのイベントリスナーがうまく発火せずに状態がズレるバグの温床になる。
スタイリングに関する状態変化は、ブラウザが確実なタイミングで判定してくれる `:fullscreen` 擬似クラスにすべて任せる。これがモダンCSSアーキテクチャの鉄則だ。
3. 子孫セレクタの活用（`:not` や `:has` との組み合わせ）
もしさらに高度なことをやりたいなら、`:fullscreen` と他のモダンセレクタを組み合わせるんだ。例えば、「フルスクリーン中ではないときだけ特定のバナーを表示する」といった制御も、CSSだけでスマートに書けるようになる。
さあ、理屈は理解できたはずだ。
次のスプリントでフルスクリーン関連のタスクが回ってきたら、ただ動くだけのコードではなく、こうしたブラウザの挙動や保守性を考慮した美しいCSSを書いて、チームをうならせてやってくれ。期待しているぞ。
コメント