【JavaScript】全画面表示（フルスクリーン）のやり方

2025年4月5日 2025年4月5日

コンテンツエリア 1

コンテンツエリア 2

コンテンツエリア 3

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>全画面表示サンプル</title>
    <style>
        body {
            background: #f0f2f5;
            margin: 0;
            padding: 20px;
        }

        .mainView {
            width: 600px;
            max-width: 100%;
            height: 300px;
            background: #000;
            color: #fff;
            margin: 40px auto;
            position: relative;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .toggle-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            border: none;
            background: transparent;
            cursor: pointer;
            padding: 5px;
            transition: transform 0.2s ease;
        }

        .toggle-btn:hover {
            transform: scale(1.1);
        }

        .toggle-btn svg {
            width: 32px;
            height: 32px;
            fill: #fff;
            stroke: #fff;
            transition: fill 0.2s ease;
        }
    </style>
</head>

<body>
    <!-- 複数の全画面表示対象エリア -->
    <div class="mainView" id="mainView1">
        コンテンツエリア 1
        <button class="toggle-btn"></button>
    </div>
    <div class="mainView" id="mainView2">
        コンテンツエリア 2
        <button class="toggle-btn"></button>
    </div>
    <div class="mainView" id="mainView3">
        コンテンツエリア 3
        <button class="toggle-btn"></button>
    </div>

    <script>
        /*
         * 状態に合わせたSVGアイコンを返す関数
         * @param {String} state - "enter" なら全画面開始用、"exit" なら解除用のアイコンを返す
         * @returns {String} SVGマークアップ
         */
        function getSVGIcon(state) {
            if (state === "exit") {
                return `
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
                        <rect width="32" height="32" rx="4" ry="4" fill="none" stroke-miterlimit="10" stroke-width="1.417"/>
                        <polygon stroke="none" points="9.287 10.173 7.982 11.478 13.049 12.778 11.75 7.71 10.445 9.015 5.82 4.39 4.662 5.548 9.287 10.173"/>
                        <polygon stroke="none" points="4.662 26.587 5.82 27.745 10.445 23.12 11.75 24.425 13.049 19.358 7.984 20.659 9.287 21.962 4.662 26.587"/>
                        <polygon stroke="none" points="24.697 11.478 23.393 10.173 28.018 5.548 26.859 4.39 22.234 9.015 20.931 7.711 19.63 12.778 24.697 11.478"/>
                        <polygon stroke="none" points="19.629 19.357 20.93 24.426 22.234 23.119 26.859 27.745 28.017 26.587 23.392 21.961 24.697 20.659 19.629 19.357"/>
                    </svg>
                `;
            } else {
                return `
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
                        <rect width="32" height="32" rx="4" ry="4" fill="none" stroke-miterlimit="10" stroke-width="1.417"/>
                        <polygon stroke="none" points="8.424 6.994 9.729 5.69 4.662 4.39 5.962 9.457 7.266 8.153 11.891 12.778 13.049 11.619 8.424 6.994"/>
                        <polygon stroke="none" points="13.049 20.516 11.891 19.358 7.266 23.983 5.962 22.678 4.662 27.745 9.728 26.445 8.424 25.141 13.049 20.516"/>
                        <polygon stroke="none" points="22.95 5.69 24.255 6.994 19.63 11.619 20.788 12.778 25.413 8.153 26.716 9.456 28.018 4.39 22.95 5.69"/>
                        <polygon stroke="none" points="28.017 27.745 26.716 22.676 25.412 23.983 20.787 19.357 19.629 20.515 24.254 25.141 22.948 26.444 28.017 27.745"/>
                    </svg>
                `;
            }
        }

        // 全画面表示／解除を実現する関数群
        function enterFullScreen(elem) {
            // 標準的なメソッド
            if (elem.requestFullscreen) { elem.requestFullscreen(); }
            // WebKit (Chrome, Safari, Edge)
            else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); }
            // Firefox
            else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); }
            // IE11 / 旧Edge
            else if (elem.msRequestFullscreen) { elem.msRequestFullscreen();}
        }

        function exitFullScreen() {
            // 標準的なメソッド
            if (document.exitFullscreen) {
                // exitFullscreenはPromiseを返す場合があるため、エラーハンドリング推奨
                document.exitFullscreen().catch(err => {
                    console.error("Fullscreen exit error:", err);
                });
            }
            // WebKit (Chrome, Safari, Edge)
            else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
            // Firefox
            else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
            // IE11 / 旧Edge
            else if (document.msExitFullscreen) { document.msExitFullscreen(); }
        }

        // 各全画面表示対象エリア（.mainView）ごとにボタンのイベントを設定
        const mainViews = document.querySelectorAll('.mainView');
        mainViews.forEach(mainView => {
            const toggleBtn = mainView.querySelector('.toggle-btn');
            // 初期状態は全画面でないので "enter" アイコンを表示
            toggleBtn.innerHTML = getSVGIcon("enter");

            toggleBtn.addEventListener('click', () => {
                // すでに全画面状態のエレメントが存在する場合
                if (document.fullscreenElement || document.webkitFullscreenElement ||
                    document.mozFullScreenElement || document.msFullscreenElement) {
                    // 現在全画面になっているのが、このエリアなら解除
                    if (document.fullscreenElement === mainView ||
                        document.webkitFullscreenElement === mainView ||
                        document.mozFullScreenElement === mainView ||
                        document.msFullscreenElement === mainView) {
                        exitFullScreen();
                    } else {
                        // 他の要素が全画面中の場合、一旦解除してからこのエリアを全画面化
                        exitFullScreen();
                        // すぐにenterFullScreenを呼ぶとうまくいかないことがあるためsetTimeoutを使う
                        setTimeout(() => enterFullScreen(mainView), 300);
                    }
                } else {
                    // 全画面状態でなければ、このエリアを全画面表示
                    enterFullScreen(mainView);
                }
            });
        });

        // 全画面状態の変更検知で、各ボタンのアイコンを更新する関数
        function updateAllButtons() {
            mainViews.forEach(mainView => {
                const toggleBtn = mainView.querySelector('.toggle-btn');
                if (document.fullscreenElement === mainView ||
                    document.webkitFullscreenElement === mainView ||
                    document.mozFullScreenElement === mainView ||
                    document.msFullscreenElement === mainView) {
                    // 解除アイコンを表示
                    toggleBtn.innerHTML = getSVGIcon("exit");
                } else {
                    // 開始アイコンを表示
                    toggleBtn.innerHTML = getSVGIcon("enter");
                }
            });
        }

        // 全画面状態の変化を監視するイベントリスナー
        document.addEventListener("fullscreenchange", updateAllButtons);
        document.addEventListener("webkitfullscreenchange", updateAllButtons);
        document.addEventListener("mozfullscreenchange", updateAllButtons);
        document.addEventListener("MSFullscreenChange", updateAllButtons);

        // ESCキーで全画面解除にも対応
        document.addEventListener('keydown', (e) => {
            if ((e.key === 'Escape' || e.keyCode === 27) &&
                (document.fullscreenElement || document.webkitFullscreenElement ||
                 document.mozFullScreenElement || document.msFullscreenElement)) {
                exitFullScreen();
            }
        });
    </script>
</body>

</html>

WebサイトやWebアプリケーションで、特定の要素（動画、画像、ゲーム画面など）を画面いっぱいに表示したいと思ったことはありませんか？ JavaScriptのFullscreen APIを使えば、ユーザーはよりコンテンツに集中でき、没入感のある体験を提供できます。

この記事では、JavaScriptを使って特定のHTML要素を全画面表示したり、元に戻したりする方法を、サンプルコードと共に解説します。特に、全画面の状態を判定するために重要な document.fullscreenElement について、初心者の方にも分かりやすく説明します。

今回のサンプルの概要

まずは、今回作成する機能のイメージです。黒い背景のコンテンツエリアが3つあり、それぞれの右上にボタンがあります。

通常時：ボタンには「全画面表示を開始する」アイコンが表示されています。
ボタンクリック：対応するコンテンツエリアが画面全体に広がります。ボタンのアイコンは「全画面表示を解除する」ものに変わります。
再度ボタンクリック（またはESCキー押下）：全画面表示が解除され、元の表示に戻ります。ボタンのアイコンも元に戻ります。
他のエリアのボタンをクリック：現在全画面表示中のエリアがあればそれを解除し、新しくクリックされたエリアを全画面表示します。

HTML構造

まず、HTMLで全画面表示の対象となる要素と、それを操作するためのボタンを用意します。今回は例として、div要素（クラス名：mainView）を3つ作成し、それぞれの内部にbutton要素（クラス名：toggle-btn）を配置します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>全画面表示サンプル</title>
  <link rel="stylesheet" href="style.css"> </head>
<body>
  <div class="mainView" id="mainView1">
    コンテンツエリア 1
    <button class="toggle-btn"></button>
  </div>
  <div class="mainView" id="mainView2">
    コンテンツエリア 2
    <button class="toggle-btn"></button>
  </div>
  <div class="mainView" id="mainView3">
    コンテンツエリア 3
    <button class="toggle-btn"></button>
  </div>

  <script src="script.js"></script> </body>
</html>

mainView：全画面表示させたい要素です。IDを付与して区別できるようにしています。
toggle-btn：全画面表示/解除を切り替えるボタンです。中身は後ほどJavaScriptで設定します。

CSS （スタイリング）

見た目を整えるための簡単なCSSです。mainView 要素に背景色やサイズを指定し、toggle-btn を右上隅に配置しています。アイコン用のSVGが見やすいように色やサイズも調整しています。

/* style.css */
body {
  background: #f0f2f5;
  margin: 0;
  padding: 20px;
}
.mainView {
  width: 600px;
  max-width: 100%;
  height: 300px;
  background: #000;
  color: #fff;
  margin: 40px auto;
  position: relative; /* ボタンの位置決めの基準 */
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.toggle-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.2s ease;
}
.toggle-btn:hover {
  transform: scale(1.1);
}
.toggle-btn svg {
  width: 32px;
  height: 32px;
  fill: #fff;    /* SVGアイコンの塗りつぶし色 */
  stroke: #fff;  /* SVGアイコンの線の色 */
  transition: fill 0.2s ease;
}

JavaScript解説

ここからが本題のJavaScriptです。

1. 全画面表示の開始（requestFullscreen）

特定のHTML要素を全画面表示にするには、その要素に対して requestFullscreen() メソッドを呼び出します。

function enterFullScreen(elem) {
  // 標準的なメソッド
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  }
  // WebKit (Chrome, Safari, Edge)
  else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  }
  // Firefox
  else if (elem.mozRequestFullScreen) { // 'S'が大文字な点に注意
    elem.mozRequestFullScreen();
  }
  // IE11 / 旧Edge
  else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}

ポイント：ベンダープレフィックス requestFullscreen は比較的新しい機能のため、ブラウザによっては接頭辞（プレフィックス）が付いた名前（webkitRequestFullscreen, mozRequestFullScreen, msRequestFullscreen）で実装されている場合があります。そのため、上記のように複数のメソッドをチェックして、利用可能なものを呼び出すように記述します。

2. 全画面表示の解除（exitFullscreen）

全画面表示を解除するには、document オブジェクトに対して exitFullscreen() メソッドを呼び出します。特定要素ではなく、常に document に対して実行するのがポイントです。

function exitFullScreen() {
  // 標準的なメソッド
  if (document.exitFullscreen) {
    // exitFullscreenはPromiseを返す場合があるため、エラーハンドリング推奨
    document.exitFullscreen().catch(err => {
      console.error("Fullscreen exit error:", err);
    });
  }
  // WebKit (Chrome, Safari, Edge)
  else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
  // Firefox
  else if (document.mozCancelFullScreen) { // 名前が異なる点に注意
    document.mozCancelFullScreen();
  }
  // IE11 / 旧Edge
  else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

こちらも同様に、ベンダープレフィックスに対応する必要があります。Firefoxでは mozCancelFullScreen という名前になっている点に注意しましょう。

3. 全画面状態の確認（document.fullscreenElement）【重要！】

さて、ボタンをクリックしたときに、「全画面表示を開始する」のか「解除する」のかを判断する必要があります。また、どの要素が現在全画面になっているのかを知りたい場面もあります。ここで登場するのが document.fullscreenElement プロパティです。

document.fullscreenElement とは？

現在、全画面モードで表示されている要素 を示す読み取り専用のプロパティです。
いずれかの要素が全画面表示されていれば、その要素オブジェクトを返します。
どの要素も全画面表示されていなければ、null を返します。

なぜ document.fullscreenElement が重要なのか？

このプロパティを使うことで、以下のようなことが可能になります。

現在の状態判定：if (document.fullscreenElement) のように書くことで、「現在、何かが全画面表示されているか？」を簡単に判定できます。null でなければ true と評価されます。
対象要素の特定：if (document.fullscreenElement === myElement) のように書くことで、「myElement が全画面表示されているか？」を判定できます。
処理の分岐：現在の状態に応じて、ボタンのアイコンを変えたり、クリック時の動作（全画面開始 or 解除）を切り替えたりできます。

使い方（サンプルコードでの活用例）

サンプルコードでは、主に以下の2箇所で document.fullscreenElement（およびそのベンダープレフィックス版）を使用しています。

① ボタンクリック時の処理分岐

// ボタンがクリックされたとき
toggleBtn.addEventListener('click', () => {
  // 現在、何らかの要素が全画面表示されているか？
  if (document.fullscreenElement || document.webkitFullscreenElement ||
      document.mozFullScreenElement || document.msFullscreenElement) {
    // 全画面表示されている場合

    // それが、このボタンに対応する要素か？
    if (document.fullscreenElement === mainView ||
        document.webkitFullscreenElement === mainView ||
        document.mozFullScreenElement === mainView ||
        document.msFullscreenElement === mainView) {
      // YES: 解除する
      exitFullScreen();
    } else {
      // NO: 一旦解除し、少し待ってからこの要素を全画面化
      exitFullScreen();
      // すぐにenterFullScreenを呼ぶとうまくいかないことがあるためsetTimeoutを使う
      setTimeout(() => enterFullScreen(mainView), 300);
    }
  } else {
    // どの要素も全画面表示されていない場合
    // このボタンに対応する要素を全画面表示する
    enterFullScreen(mainView);
  }
});

ここでは、まず document.fullscreenElement（とその他）が null かどうかで、現在全画面中かどうかを判定しています。さらに、全画面中だった場合、それが今クリックされたボタンが所属する mainView かどうかを比較し、解除するか、他の要素から切り替えるかを判断しています。

② ボタンアイコンの更新

// 全画面状態が変わったときに呼び出される関数
function updateAllButtons() {
  mainViews.forEach(mainView => {
    const toggleBtn = mainView.querySelector('.toggle-btn');
    // この mainView が現在全画面表示されているか？
    if (document.fullscreenElement === mainView ||
        document.webkitFullscreenElement === mainView ||
        document.mozFullScreenElement === mainView ||
        document.msFullscreenElement === mainView) {
      // YES: 解除アイコンを表示
      toggleBtn.innerHTML = getSVGIcon("exit");
    } else {
      // NO: 開始アイコンを表示
      toggleBtn.innerHTML = getSVGIcon("enter");
    }
  });
}

// 全画面状態の変化を監視するイベントリスナー
document.addEventListener("fullscreenchange", updateAllButtons);
document.addEventListener("webkitfullscreenchange", updateAllButtons);
document.addEventListener("mozfullscreenchange", updateAllButtons);
document.addEventListener("MSFullscreenChange", updateAllButtons); // 'MS'が大文字

ここでは、全画面状態が変化するたび（fullscreenchange イベントが発生するたび）に、全ての mainView 要素をチェックします。document.fullscreenElement がその mainView と一致するかどうかで、表示すべきアイコン（開始用 or 解除用）を判断し、ボタンの表示を更新しています。

ベンダープレフィックスへの対応 requestFullscreen や exitFullscreen と同様に、fullscreenElement にもベンダープレフィックスが付いたプロパティが存在します（webkitFullscreenElement, mozFullScreenElement, msFullscreenElement）。そのため、これらのいずれかが値を持っているかを確認する必要があります。

4. アイコンの表示（getSVGIcon）

ボタンに表示するアイコンを、状態に応じて切り替えるための関数です。引数 "enter" を渡すと全画面開始用のアイコン、"exit" を渡すと解除用のアイコンのSVG文字列を返します。

function getSVGIcon(state) {
  if (state === "exit") {
    // 解除アイコンのSVG文字列
    return `...`; // (コードは省略)
  } else {
    // 開始アイコンのSVG文字列
    return `...`; // (コードは省略)
  }
}

5. イベントリスナーの設定

最後に、これまでの関数を組み合わせて動作するように、イベントリスナーを設定します。

各ボタンへのクリックイベント：各 .toggle-btn がクリックされたら、対応する .mainView を全画面表示/解除する処理を呼び出します。初期状態では開始アイコン（ getSVGIcon("enter") ）を設定しておきます。
全画面状態変化イベント：fullscreenchange （およびベンダープレフィックス版）イベントを監視し、状態が変わるたびに updateAllButtons 関数を呼び出して、すべてのボタンのアイコンを適切に更新します。
ESCキー押下イベント：keydown イベントを監視し、ESCキー（キーコード 27）が押され、かつ現在全画面表示中であれば、exitFullScreen() を呼び出して全画面を解除します。

// script.js

// (getSVGIcon, enterFullScreen, exitFullScreen 関数の定義は省略)

const mainViews = document.querySelectorAll('.mainView');

mainViews.forEach(mainView => {
  const toggleBtn = mainView.querySelector('.toggle-btn');
  // 初期アイコン設定
  toggleBtn.innerHTML = getSVGIcon("enter");

  // クリックイベント設定
  toggleBtn.addEventListener('click', () => {
    // (前述のクリック処理)
    if (document.fullscreenElement || /* ... */) {
      if (document.fullscreenElement === mainView || /* ... */) {
        exitFullScreen();
      } else {
        exitFullScreen();
        setTimeout(() => enterFullScreen(mainView), 300);
      }
    } else {
      enterFullScreen(mainView);
    }
  });
});

// 全画面状態変化イベント設定
function updateAllButtons() {
  // (前述のアイコン更新処理)
  mainViews.forEach(mainView => {
    const toggleBtn = mainView.querySelector('.toggle-btn');
    if (document.fullscreenElement === mainView || /* ... */) {
      toggleBtn.innerHTML = getSVGIcon("exit");
    } else {
      toggleBtn.innerHTML = getSVGIcon("enter");
    }
  });
}
document.addEventListener("fullscreenchange", updateAllButtons);
document.addEventListener("webkitfullscreenchange", updateAllButtons);
// ... (他のベンダープレフィックスも同様に)

// ESCキーイベント設定
document.addEventListener('keydown', (e) => {
  if ((e.key === 'Escape' || e.keyCode === 27) &&
      (document.fullscreenElement || /* ... */)) {
    exitFullScreen();
  }
});

まとめ

JavaScriptのFullscreen APIと document.fullscreenElement プロパティを使うことで、インタラクティブな全画面表示機能を実装できます。

element.requestFullscreen()：要素を全画面表示にする（ベンダープレフィックスに注意）。
document.exitFullscreen()：全画面表示を解除する（ベンダープレフィックスに注意）。
document.fullscreenElement：現在全画面表示中の要素を取得する（null でなければ全画面中。ベンダープレフィックスに注意）。
fullscreenchange イベント：全画面状態の変化を検知する（ベンダープレフィックスに注意）。

これらのAPIを組み合わせることで、動画プレーヤー、画像ギャラリー、プレゼンテーションツール、Webゲームなど、様々な場面でユーザー体験を向上させることができます。ぜひ、あなたのWeb制作にも活用してみてください。

カテゴリー: Javascript

タグ: document.fullscreenElement フルスクリーン全画面表示

【JavaScript】全画面表示（フルスクリーン）のやり方

今回のサンプルの概要

HTML構造

CSS （スタイリング）

JavaScript解説

1. 全画面表示の開始（requestFullscreen）

2. 全画面表示の解除（exitFullscreen）

3. 全画面状態の確認（document.fullscreenElement）【重要！】

document.fullscreenElement とは？

なぜ document.fullscreenElement が重要なのか？

使い方（サンプルコードでの活用例）

4. アイコンの表示（getSVGIcon）

5. イベントリスナーの設定

まとめ

【CSS】FlexboxとCSS Grid Layoutの基本と使い分け

【HTML】Web制作の基礎を再確認！タグの使い方からSEOまで

今回のサンプルの概要

HTML構造

CSS （スタイリング）

JavaScript解説

1. 全画面表示の開始 （requestFullscreen）

2. 全画面表示の解除（exitFullscreen）

3. 全画面状態の確認（document.fullscreenElement）【重要！】

document.fullscreenElement とは？

なぜ document.fullscreenElement が重要なのか？

使い方（サンプルコードでの活用例）

4. アイコンの表示（getSVGIcon）

5. イベントリスナーの設定

まとめ

【CSS】FlexboxとCSS Grid Layoutの基本と使い分け

【HTML】Web制作の基礎を再確認！タグの使い方からSEOまで

1. 全画面表示の開始（requestFullscreen）