こんにちは！日夜、Web制作やデザインの勉強に励んでいるみなさん、本当にお疲れ様です。
CSSを学び始めると、「ボタンの色が変わった！」「文字が大きくできた！」と、自分の書いたコードが画面に反映されるたびにワクワクしますよね。その一方で、「なんだか思った通りに動かないな…」と、ちょっぴり不安になって立ち止まってしまう瞬間もあるかもしれません。
でも、大丈夫ですよ。どんなにプロとして活躍しているエンジニアだって、最初はみんな同じところでつまずき、試行錯誤を繰り返してきたのですから。ゆっくり、一歩ずつ進んでいきましょう。
今日は、数あるCSSのテクニックの中でも、使うとちょっと嬉しくなる特別な魔法「`:fullscreen`（フルスクリーン）疑似クラス」についてお話しします。
「動画を画面いっぱいに広げて見せたい！」
「アルバムの写真を、映画館のスクリーンのように大迫力で表示させたい！」
そんな「全画面表示（フルスクリーン）」の瞬間にだけ、ピタッとデザインを切り替える賢い仕組みを、身近な例え話を交えながら、世界一優しくひも解いていきましょう。
—
1. フルスクリーンって、どんな状態？（身近な例え話）
まずは頭の中で、おうちでの「映画鑑賞」をイメージしてみてください。
普段、テレビやパソコンで映画を見ているときは、周りに本棚が見えたり、机の上のコップが見えたりしていますよね。これが「通常のWebページを見ている状態」です。
しかし、「よし、今から映画に集中するぞ！」と部屋の電気を消して、カーテンを閉め切り、画面を最大化した瞬間を思い出してください。周りの雑音がスッと消えて、目の前には映像だけが広がりますよね。
Webの世界における「フルスクリーンモード」も、まさにこれと同じです。
ブラウザの余計なボタンやURLバー、他のタブなどを全部隠して、「指定した特定の要素（動画や画像など）だけを、画面いっぱいに表示する状態」にすることを指します。
そして、この「電気を消して、映画館モードになった瞬間」を見逃さずに、「じゃあ、映画館用の特別な飾り付け（スタイル）に変えますね！」と自動で動いてくれるのが、今回主役となる`:fullscreen`疑似クラスなのです。
—
2. `:fullscreen` 疑似クラスの基本
CSSには、特定の状態のときだけスタイルを適用する「疑似クラス」という便利な道具があります。マウスを乗せたときの `:hover` や、入力欄をクリックしたときの `:focus` は、すでに出会ったことがあるかもしれませんね。
`:fullscreen` も、その仲間です。
/ 通常のときのノート（要素） /
.my-card {
background-color: white;
border: 2px solid #ccc;
padding: 20px;
}
/ 【魔法】フルスクリーン（全画面）になったときだけのスタイル /
.my-card:fullscreen {
background-color: #1a1a1a; / 背景を映画館のように暗くする /
color: #ffffff; / 暗い背景でも文字が読めるように白くする /
border: none; / 枠線は邪魔なので消しちゃう /
}
このように書くだけで、ブラウザが「あ、今この要素が全画面表示になったな！」と判断した瞬間に、自動的に `:fullscreen` の中身のスタイルに切り替えてくれます。元に戻ると、何事もなかったかのように通常のスタイルに戻ります。とってもお利口さんですよね。
—
3. 実際に動かしてみよう！サンプルコード
「でも、どうやってフルスクリーンにするの？」と思いますよね。
実は、フルスクリーンを開始するには、CSSだけでなく、JavaScript（ジャバスクリプト）という技術の力を「ほんの１行だけ」借りる必要があります。
難しく考えなくて大丈夫です。まずはそのままエディタに貼り付けて、動きを試せるセットを用意しました。HTMLファイルを作って、以下のコードを貼り付けてみてくださいね。
ようこそ、ミニシアターへ！
下のボタンを押すと、このエリアが画面いっぱいに広がります。
これをブラウザで開いて、赤いボタンをポチッと押してみてください。
一瞬にして画面が真っ暗になり、映画館のようなシックなデザインに切り替わりましたよね！もう一度ボタン（緑色に変わっています）を押すか、キーボードの「Esc（エスケープ）」キーを押すと、元の可愛い枠線のデザインに戻ります。
これが `:fullscreen` の持つ力です。
—
4. つまずきやすいポイント：ブラウザごとの「方言」（ベンダープレフィックス）
Webの世界には、Google Chrome、Safari、Firefoxなど、様々なブラウザ（インターネットを見るためのソフト）があります。
実は、この「フルスクリーン」という機能が作られたばかりの頃、ブラウザの開発者たちはそれぞれ独自の「方言（ブラウザプレフィックス）」を使って、この機能をテストしていました。
「うちのブラウザでは、まだ実験中だから `-webkit-` っていう目印をつけておいてね！」という具合です。
現在では、ほとんどの最新ブラウザが標準の `:fullscreen` を理解してくれるようになりましたが、少し古いiPhoneのSafariなど、一部の環境では今でもこの「方言」を使わないと動かないことがあります。
もし、「あれ？ Safariでうまくスタイルが当たらないな…」と困ったときは、以下のように方言を並べて書いてあげてください。
/ 1. これが標準（今の基本はこれだけでOK！） /
.theater-box:fullscreen {
background-color: #111;
}
/ 2. Safariや古いChrome、iOS向けの方言（webkit） /
/ ※疑似クラスの前にハイフンが入る独特な書き方になります /
.theater-box:-webkit-full-screen {
background-color: #111;
}
「書くことが増えて面倒くさいな…」と思うかもしれませんが、「色んな環境で見ている読者さんへの、優しい気配り」だと思って、そっと添えてあげましょう。これだけで、崩れ知らずのタフなWebサイトになります。
—
5. さらに一歩先へ！映画館の暗幕 `::backdrop`
最後に、もっとデザインを素敵にするプロの隠し味をひとつ紹介します。
要素をフルスクリーンにしたとき、その要素の「後ろ側」に広がる背景スペース（隙間）のことを 「バックドロップ（backdrop）」 と呼びます。
これは、舞台の背景に垂れ下がる「黒い幕」のようなものです。
CSSでは、`::backdrop`（コロンが2つ！）という特別な記法を使うことで、この背景の幕の色を自由に変えることができます。
/ フルスクリーンになった要素の「後ろの隙間」を、
うっすら透けるおしゃれな黒（半透明）にする /
.theater-box::backdrop {
background-color: rgba(0, 0, 0, 0.8);
}
これを使うことで、動画プレイヤーの周りに上品な映画館の暗闇を作り出し、ユーザーを一気に画面に没頭させることができるようになります。
—
まとめ：あなたのコードが、体験を劇的に変える
Webデザインにおいて、ユーザーが「全画面で見たい」と思う瞬間は、そのコンテンツに一番ワクワクしている瞬間です。
その特別な瞬間に、`:fullscreen` を使って「目に優しい暗い背景」にしてあげたり、「文字を読みやすい大きさに調整」してあげたりする。そのちょっとした思いやりが、素晴らしいWebサイトを作る秘訣です。
最初から全部を暗記する必要はありません。
「そういえば、全画面表示のときだけデザインを変える魔法があったな」
「困ったら、あのおうちのカーテンの例え話を思い出そう」
それだけで十分です。
もしコードが動かなくて迷子になったら、いつでもこのブログに戻ってきて、サンプルコードをそっとコピー＆ペーストして使ってくださいね。
あなたのWeb制作の旅が、もっと楽しく、もっと素敵なものになりますように。応援しています！
コメント