全画面化の実現方法

JavaScriptを使用して全画面ウィンドウを作成する方法を学びます。

全画面ウィンドウ

JavaScriptを使用して全画面モードで要素を表示する方法

ビデオを全画面モードで開くためのボタンをクリックしてください：

自分で試してみる

全画面ビデオ

要素を全画面で開くには、以下のように使用します： element.requestFullscreen() 方法：

例

<script>
/* 全画面モードで表示する要素（この例ではビデオ）を取得する： */
var elem = document.getElementById("myvideo");
/* openFullscreen()関数を実行したとき、全画面でビデオを開きます。
注意、異なるブラウザには前缀を含める必要があります。なぜなら、それらはまだrequestFullscreenメソッドをサポートしていないからです */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

自分で試してみる

全画面ドキュメント

全画面で整个ページを開くには、以下のように使用してください： document.documentElement に代わりに document.getElementById("element")。

この例では、全画面を退出するために閉じる関数も使用しています：

例

<script>
/* documentElement (<html>) をフルスクリーン表示するために取得 */
var elem = document.documentElement;
/* フルスクリーン表示 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* フルスクリーンから退出 */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

ページがフルスクリーンモードになっている場合、CSSを使用してページのスタイルを設定することもできます：

例

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* 標準構文 */
:fullscreen {
  background-color: yellow;
}

自分で試してみる

関連ページ

HTML DOM リファレンスマニュアル：requestFullscreen() メソッド

HTML DOM リファレンスマニュアル：exitFullscreen() メソッド

HTML DOM リファレンスマニュアル：documentElement メソッド