こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。

CSSを学び始めたばかりの頃って、次から次へと出てくるセレクタや「擬似クラス」という呪文のような言葉に、思わず頭を抱えたくなりませんか？「要素に名前をつけてスタイリングするだけなのに、なんでこんなにルールがあるんだよ！」って、昔の私も夜な夜なコーヒーを片手にディスプレイを睨みつけていました。

だから、安心してください。今日お話しする `:fullscreen` 擬似クラス も、最初は難しく聞こえるかもしれませんが、正体を知れば「なんだ、そういうことか！」と拍子抜けするくらいシンプルで、しかもWebサイトをちょっと魔法のようにカッコよくできる面白い奴なんです。

さあ、肩の力を抜いて、一緒にその仕組みを紐解いていきましょう！

—

そもそも「フルスクリーンモード」ってどんな状態？

みなさんも、YouTubeで動画を見るときや、スマホの写真ギャラリーを見ているときに、画面いっぱいにコンテンツが広がるあのモードを使ったことがあると思います。ブラウザの余計なメニューバーやタブがスッと消えて、いま見ているものだけに集中できる、あのプライベートシアターのような空間のことです。

あの状態を、Web業界では「フルスクリーンモード」と呼びます。

通常、Webサイトの要素（画像や動画、あるいは記事全体など）は、ブラウザという「額縁」の中に収まっていますよね。でも、ユーザーが「もっと大きく見たい！」とボタンを押したとき、その要素が画面いっぱいに広がる……それがフルスクリーンです。

—

`:fullscreen` 擬似クラスの正体と、やさしい例え話

ここで登場するのが、今回の主役である `:fullscreen` 擬似クラス です。

これはいわば、要素専用の「お着替えセンサー付きのスイッチ」だと思ってください。

普段、要素たちは普段着で過ごしています。でも、ユーザーが操作して「フルスクリーンモードだ！」と画面一杯に広がった瞬間、その要素はビシッと特別なタキシード（フルスクリーン用のスタイル）に着替えます。

この「今まさにフルスクリーンでおめかししている最中の要素」だけをピンポイントで指名して、スタイルを当てられるのが `:fullscreen` のお仕事なんです。

• 普段の姿： 普通のサイズ
• フルスクリーン時： 「おっ、いま全画面になったね！」とセンサーが反応して、`:fullscreen` のスタイルが自動で適用される

ね？ ちょっとイメージしやすくなったのではないでしょうか。

—

どうしてこのセレクタが必要なの？（実務でのリアルな話）

「あれ、全画面にするならJavaScriptでサイズを画面いっぱいに広げればいいんじゃないの？」

鋭い方はそう思ったかもしれません。ええ、その通りです。JavaScriptで要素の幅や高さを `100vw` や `100vh` に設定することはできます。

しかし、現場で私たちが頭を悩ませるのが「背景色」や「余白」のコントロールです。
例えば、ただ要素を大きくしただけだと、ブラウザの背景が元の白いままで、なんだか中途半端にかっこ悪い見た目になってしまうことがあります。

フルスクリーンモードになったときには、「背景を真っ黒にしたい」「中の文字や画像を画面の真ん中にドンと配置したい」「閉じるボタンを目立たせたい」といった、普段とは違う特別なコーディネートが必要になります。

そういうときに、この `:fullscreen` を使えば、HTMLの構造をいじらなくても、CSSだけで「フルスクリーンになった瞬間の変身」を完璧にサポートできるというわけです。

—

実際に動かしてみよう！優しく学べるコード例

百聞は一見に如かず。実際にエディタに貼り付けて試せるサンプルコードを用意しました。
今回は、みんな大好き（？）な「写真画像」をフルスクリーンでド迫力に表示する例で見てみましょう。

HTML

CSS (`style.css`)

/ — 普段の姿 — /
body {
font-family: sans-serif;
text-align: center;
padding: 40px;
background-color: #f0f2f5;
}

.container img {
max-width: 100%;
height: auto;
border-radius: 8px;
cursor: pointer; / クリックできることがわかるように指マークにするよ /
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s;
}

.container img:hover {
transform: scale(1.02); / マウスを乗せたらちょっとだけ大きくする優しさ /
}

/ — ここからが本番！フルスクリーンに変身したときの姿 — /
target-image:fullscreen {
/ フルスクリーンになった瞬間、背景を強制的に真っ黒にするよ /
background-color: #000000;

/ 画像が縦横にビヨーンと伸びないように、画面の中央にキレイに収めるよ /
object-fit: contain;

/ 幅と高さを画面いっぱいに広げるよ /
width: 100vw;
height: 100vh;

/ 普段ある角丸や影は、全画面のときはいらないから消しちゃう！ /
border-radius: 0;
box-shadow: none;
}

このコードを保存してブラウザで開いてみてください。画像をクリックすると、まるで映画のスクリーンが切り替わるように、背景が黒くなって写真だけがドンと大きく表示されるはずです。そして、もう一度クリックするか `Esc` キーを押せば、元の可愛いサイズに戻ります。

これが、`:fullscreen` 擬似クラスが持つ魔法の瞬間です。

—

初学者がつまずきやすいポイントと「大丈夫だよ」のフォロー

新しいCSSを学ぶとき、誰しも一度は壁にぶつかります。ここで、私がよく受ける質問や、初心者がハマりがちなポイントを先回りしてこっそりシェアしておきますね。

つまずきポイント1：「あれ、CSSを書いたのに全然反映されないよ？」

• 原因の多く： ブラウザの仕様や、そもそも「フルスクリーンにするためのトリガー（JavaScriptの `requestFullscreen()` など）」が実行されていないケースです。
• アドバイス： CSSセレクタ自体が間違っていなくても、要素自体がまだフルスクリーンになっていなければ、`:fullscreen` は発動しません。まずは「ちゃんとフルスクリーンモードのスイッチが入っているか」をブラウザの検証ツール等で確認してみましょう。

つまずきポイント2：「ベンダープレフィックス（`-webkit-` など）って必要？」

• 昔の話と今の話： 以前はブラウザごとに書き方が違って（`-webkit-full-screen` や `-moz-full-screen` など）、CSSを書くのが本当に大変な時代でした。
• 今の安心情報： 現在のモダンブラウザ（Chrome, Safari, Edge, Firefoxなど）では、標準化された `:fullscreen` がそのまま使えますので、昔の複雑な書き方を無理に覚える必要はありません！技術はちゃーんと進化して優しくなっているんです。

—

さいごに

CSSのセレクタは、いわば「Webページを彩るためのスタイリストへの指示書」です。
その中でも `:fullscreen` は、普段の姿から一歩進んで、ユーザーが「おっ！」と驚くような特別な体験を演出するための、ちょっと粋で便利なスパイスです。

最初は難しく感じるかもしれませんが、今日お話しした「お着替えセンサー」というイメージさえ持っていれば、もう怖くありません。

もしコードを書いていて「あれ、うまくいかないな」と思ったら、一度深呼吸して、コーヒーでも飲みながらゆっくりコードを見直してみてください。焦る必要は全くありません。一歩一歩、確実に自分のものにしていきましょう。

あなたの前端（フロントエンド）の旅が、これからも楽しくワクワクするものでありますように！チーフアーキテクトの私から、心いっぱいのエールを送ります。