※ 2023年9/17 長らく放置してましたが、GAアクセス見ると見てくださる方がいましたのでcodepenの埋め込みを修正しました。コード自体は自分がWeb業界2年目ぐらいの時に書いたものなので多めに見てください（暇な時に書き直しておきます）
今回は、全画面モードと通常画面モードを切り替えるボタンを作ってみました。
Fullscreen APIというものが公開されているので、簡単に使用できます。
Fullscreen APIのwebitを使用するので、フルスクリーン表示にした場合、要素がそのままの大きさで中央に配置されます。
使用する際は、下記URLのページの下の方に対応ブラウザが書いてありますのでご確認ください。
フルスクリーンモードを使用する – ウェブデベロッパーガイド | MDN
Fullscreen APIってなに？？
2011年ぐらいに発表されたAPIです。
言葉の通り「フルスクリーン」にすることができます！
何をフルスクリーンにするあというと、「要素」をフルスクリーンにすることができます。
video要素や、canvas要素を全画面にしてその世界観に浸ってもらうことができるのでとてもよいですね。
なによりも簡単に実装できるのが嬉しい！
まずは、HTMLとCSSからみてみる
今回簡単に実装するコードを見てみましょう。
まずは、HTMLをこちら↓
See the Pen Fullscreen APIを使った切り替えボタン by Chankei (@Chankei) on CodePen.
今回はdiv要素とbutton要素で構成しています。
クリックイベントを拾うことができたらなんでも良いので簡単にカスタマイズできます。
ポイントは、「onclick=””」の中身です！ここでJavaScriptの関数を実行しています。
そして、CSSはこちら↓
See the Pen Fullscreen APIを使った切り替えボタン by Chankei (@Chankei) on CodePen.
装飾しているだけなので、ここは個人の好みでお願いいたします。。。
個人的に今回の配色は、いつもお世話になっているCODEPENのコードシンタックスハイライトのイメージにしました。
ここまで大丈夫でしょうか？
きっとWeb初心者の方でもここまでは大丈夫なはずです！
Fullscreen APIの実行部分 JavaScript
今回一番の肝になるのがJavaScriptの部分です。
クリックイベント起こると、それに対応する関数が実行するようになっています。
See the Pen Fullscreen APIを使った切り替えボタン by Chankei (@Chankei) on CodePen.
少し複雑に感じる方もいるかもしれませんが、決して難しいことが行っていないので安心してください。
まずこの部分は、「フルスクリーンにするよ！」という意味
requestFullscreen
そしてこの部分は、「フルスクリーン解除するよ！」という意味
CancelFullScreen
上の2つが複数書いてあるのは、各ブラウザに対応するためのベンダープレフィックスです。
なので実質1行ずつ理解できればきっと大丈夫です！
完成系はこちら
See the Pen Fullscreen APIを使った切り替えボタン by Chankei (@Chankei) on CodePen.
まとめ
いかがでしたでしょうか？
簡単にフルスクリーンにできましたか？？
正直使うタイミングは少ないかもしれませんが、覚えておいて損はありません。
参考にしたサイト