CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:fullscreen疑似クラスでブラウザのフルスクリーンモードに対応する方法

Webページがブラウザのフルスクリーンモードで表示されているとき、その状態に合わせて専用のスタイルを適用したいケースは少なくありません。そんなときに役立つのが、CSSの:fullscreen疑似クラスです。

:fullscreen疑似クラスを使うと、要素がフルスクリーン表示になっている間だけ、背景色・フォントサイズ・背景画像などのスタイルを切り替えることができます。

:fullscreen疑似クラスの基本構文

基本的な構文は以下のとおりです。セレクターの後ろに:fullscreenを付けるだけで、フルスクリーン時のみ有効なスタイルを定義できます。

Selector:fullscreen {
    attribute: /*value*/
}

ただし、Safariなど一部のブラウザではベンダープレフィックス付きの:-webkit-full-screen、旧EdgeやIEでは:-ms-fullscreenが必要になります。すべての環境で確実に動作させるには、これらを併せて定義しておくのが安全です。

例1：フルスクリーン時に背景色と文字サイズを変更する

次の例では、ページをクリックするとフルスクリーンに切り替わり、背景色が「thistle」に、フォントサイズが2emに変化します。

<!DOCTYPE html>
<html>
<head>
<style>
* {
    margin: 3%;
}
:fullscreen {
    background-color: thistle;
    font-size: 2em;
}
:-webkit-full-screen {
    background-color: thistle;
    font-size: 2em;
}
:-ms-fullscreen {
    background-color: thistle;
    font-size: 2em;
}
</style>
</head>
<body onclick="fullScreenNow();">
<p>Proin eleifend quam nunc, et ultrices neque euismod a.</p>
<p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
<script>
let item = document.documentElement;
function fullScreenNow() {
    if (item.requestFullscreen) {
        item.requestFullscreen();
    } else if (item.webkitRequestFullscreen) {
        item.webkitRequestFullscreen();
    } else if (item.msRequestFullscreen) {
        item.msRequestFullscreen();
    }
}
</script>
</body>
</html>

出力結果

上記のコードを実行し、ページをクリックすると、次のようにフルスクリーン表示へ切り替わります。

CSSの:fullscreen疑似クラスでブラウザのフルスクリーンモードに対応する方法

例2：フルスクリーン時に背景画像を表示する

次の例では、フルスクリーン化すると背景に画像が表示され、テキストは白抜きになります。さらにbox-shadowによる内側の緑色の装飾も加えています。

<!DOCTYPE html>
<html>
<head>
<style>
* {
    margin: 3%;
    color: white;
    box-shadow: inset 0 0 40px green;
}
:fullscreen {
    background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
    font-size: 2em;
}
:-webkit-full-screen {
    background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
    font-size: 2em;
}
:-ms-fullscreen {
    background: url("https://images.unsplash.com/photo-1612149413930-72410fd9a021?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixlib=rb1.2.1&q=80&w=1920") no-repeat;
    font-size: 2em;
}
</style>
</head>
<body onclick="fullScreenNow();">
<p>Proin eleifend quam nunc, et ultrices neque euismod a.</p>
<p>Nulla eleifend tempus tempor. Nam non nibh imperdiet est interdum eleifend vitae quis augue. Vivamus aliquam dolor vel elit semper egestas. Fusce consequat dolor nisl, eu interdum ex mattis id. Suspendisse consectetur ligula libero, vel pharetra tortor varius id. Nulla arcu lorem, convallis a erat vel, suscipit rutrum leo.</p>
<script>
let item = document.documentElement;
function fullScreenNow() {
    if (item.requestFullscreen) {
        item.requestFullscreen();
    } else if (item.webkitRequestFullscreen) {
        item.webkitRequestFullscreen();
    } else if (item.msRequestFullscreen) {
        item.msRequestFullscreen();
    }
}
</script>
</body>
</html>

出力結果

コードを実行してページをクリックすると、通常表示では次のように白背景＋緑の内側シャドウで表示されます。

CSSの:fullscreen疑似クラスでブラウザのフルスクリーンモードに対応する方法

フルスクリーンに切り替えると、指定した背景画像が全面に表示されます。

CSSの:fullscreen疑似クラスでブラウザのフルスクリーンモードに対応する方法

ポイントまとめ

  • requestFullscreen()はユーザーの操作（クリックなど）をきっかけに呼び出す必要があります。ページ読み込み時に自動的に呼び出してもブラウザにブロックされます。
  • フルスクリーンを解除するには、Escキーを押すか、document.exitFullscreen()を実行します。
  • モダンブラウザ向けには標準の:fullscreen、Safari向けには:-webkit-full-screen、旧IE/Edge向けには:-ms-fullscreenをセットで定義しておくと互換性が高まります。
  1. Firefoxでピクチャーインピクチャー(PIP)モードを有効にする方法を徹底解説

    本記事では、さまざまなアプリケーションに搭載され注目を集めている「ピクチャーインピクチャー(PIP)モード」について詳しく解説します。PIPモードとは、動画を小さなウィンドウで再生しながら、同時に別の作業を進められる便利な機能です。WhatsAppでは今年初めにこの機能が導入され、大きな話題となりました。 デスクトップ環境では、Chromeが先駆けてピクチャーインピクチャーモードを実装しました。そして次にこの機能を採用したのがMozilla Firefoxです。PIPモードを使えば、作業を続けながら動画を視聴でき、タブを最小化しても動画が停止することはありません。ユーザー体験を大きく向上させる

  2. 主要ブラウザをシークレットモード（プライベートブラウジング）で自動起動する方法

    ブラウザでシークレットタブ（プライベートブラウジング）を自動的に開きたい方は、ぜひ最後までお読みください。プライベートモードやシークレットモードは、完全な匿名性こそ得られないものの、足跡を残さずにウェブを閲覧するための便利な機能です。ユーザーがプライベートモードで閲覧する場合、ブラウザはデフォルトで訪問したページの履歴、検索履歴、Cookie、一時ファイルなどを保存しません。現在のほとんどのブラウザにはプライベートブラウジング機能が搭載されていますが、通常モードで起動した後に手動で切り替えるのが一般的です。しかし実は、ブラウザを最初からシークレットモードで起動するよう設定することも可能です。本