webの全画面表示を徹底解説する実践的活用法ガイド

2025 10/29

2025/10/29

はじめに

この記事の目的

本記事は、WebブラウザやWebサイトで使われる「全画面表示（フルスクリーン）」について、実際の操作方法や技術的な実装例、使いどころや注意点までをわかりやすくまとめることを目的としています。初心者の方でも手順や考え方がつかめるように具体例を交えて説明します。

全体の概要

第2章では主要なブラウザでの全画面切り替え方法を、第3章ではWebサイトで見られる全画面のUI事例を紹介します。第4章で具体的な実装（JavaScriptのFullscreen APIなど）を解説し、第5章で解除方法や安全面の注意点を記します。第6章は実践的な活用シーン、第7章はよくあるQ&Aとトラブル事例を扱います。

想定する読者

・サイト運営者やフロントエンドに関心のある方
・動画・画像表示やプレゼン用途で全画面を活用したい方
・操作方法や実装の基礎を知りたい開発初心者

読み方のヒント

まず第2章で操作方法を確認し、必要に応じて第4章の実装例に進んでください。トラブルは第7章で探すと見つかりやすいです。

各種ブラウザでの全画面表示の方法

概要

ブラウザの全画面表示は画面上の余分なバーやタブを隠し、表示内容に集中できます。動画視聴やブラウザゲームでよく使います。

Windowsでの操作

キーボード：F11キーを押すと全画面になります。もう一度F11で元に戻ります。
メニュー：ブラウザ右上のメニューボタン（⋮や三本線）から「全画面」を選べます。

Macでの操作

キーボード：command + control + Fで全画面に切り替えます。解除も同じキーです。
画面左上の緑色ボタンをクリックして全画面にすることもできます。

主要ブラウザ別の注意点

Google Chrome：F11 またはメニュー→「全画面表示」。動画プレーヤーは個別に全画面ボタンを持つことが多いです。
Firefox：F11 またはメニュー→「全画面表示」。拡張機能が影響する場合は無効化して確認します。
Microsoft Edge：Chromeと同様の操作で可能です。
Safari（Mac）：緑色ボタンまたはcommand + control + Fで切り替えます。

動画・ゲームでの補足

多くの動画プレーヤーやWebゲームはプレーヤー内の全画面ボタンを優先します。プレーヤーの全画面はEscキーで通常解除します。ブラウザ全体の表示とプレーヤーの全画面は別扱いになる点に注意してください。

解除やトラブル対策

Escキーや同じショートカットで解除できます。
一部の拡張機能やポップアップが妨げる場合は拡張機能を確認してください。
表示が崩れるときはページを再読み込みすると改善することがあります。

Webサイト内での全画面UI事例

概要

Webサイト内での全画面UIは、限られた画面を有効に使いユーザーを没入させる目的で使われます。スマホやタブレットで特に効果的です。ここでは代表的な事例と、それぞれの使いどころや配慮点を分かりやすく説明します。

フルスクリーンナビゲーション

メニューボタンを押すと全画面でナビが開く形式です。選択肢を大きく表示でき、誤操作を減らせます。サイトの導線をはっきり示せるため、情報量が多いサイトやブランドサイトに向きます。注意点は戻る操作や閉じる方法を明示することです。

画像・動画の全画面表示

ギャラリーやプロモーション動画でよく使われます。細部まで見せたい作品や、視覚的インパクトを重視する場面で有効です。視聴中に音声の有無や画面サイズが変わることを配慮すると親切です。

ポップアップ・モーダルの全画面化

フォーム入力や重要なお知らせに全画面モーダルを使うと注目度が上がります。ただし過度に使うとユーザーの流れを妨げるため、表示頻度と閉じ方を工夫してください。

その他の活用例

地図の全画面表示、チュートリアルのステップ表示、スライドショーやインタラクティブな背景などがあります。いずれも目的を明確にし、戻る・閉じる操作を分かりやすくすることが重要です。

技術的な全画面表示の実装方法

概要

WebではFullscreen APIを使って要素を全画面表示にできます。主要なメソッドは element.requestFullscreen() と document.exitFullscreen() で、現在の全画面要素は document.fullscreenElement で取得します。

基本的な使い方（例）

下はシンプルな切替ボタンの例です。モダンブラウザは Promise を返すため、エラー処理も行います。

<button id="fsBtn">全画面切替</button>
<div id="app">ここを全画面にします</div>
<script>
const el = document.getElementById('app');
const btn = document.getElementById('fsBtn');

async function enterFullscreen(target){
  try{
    if (target.requestFullscreen) await target.requestFullscreen();
    else if (target.webkitRequestFullscreen) target.webkitRequestFullscreen(); // 古いSafariやiOS用
  }catch(e){
    console.error('全画面にできませんでした', e);
  }
}

function exitFullscreen(){
  if (document.exitFullscreen) document.exitFullscreen();
  else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
}

btn.addEventListener('click', ()=>{
  if (document.fullscreenElement) exitFullscreen();
  else enterFullscreen(el);
});
</script>

全画面状態の検知

全画面の変化はイベントで受け取れます。UIの切替や状態表示に使います。

document.addEventListener('fullscreenchange', ()=>{
  const isFs = !!document.fullscreenElement;
  console.log(isFs ? '全画面に入りました' : '全画面を終了しました');
});

document.addEventListener('fullscreenerror', (e)=>{
  console.error('全画面エラー', e);
});