【CSS＋JavaScript】フルスクリーン表示サンプル

　どうも！LSSです！！

先日の記事、

で、しれっと「ブログの記事幅を無視して全画面を覆うような表示」を行っていましたが、今回はその部分だけをサンプルとして公開します！

性質上、スマホはあまり関係なく、PCでブログを見る場合向けのネタとなります。

f:id:little_strange:20210402225124p:plain

サンプル
コード
使い方
CSS装飾・仕組みに関係ある部分と関係ない部分
問題は…「何を見せるか」ですねｗ

サンプル

開く

↑の「開く」をクリックすると、ブログの記事幅設定に関係なく、画面いっぱいに表示されます。

表示中に右上に出てくる「閉じる」をクリックすると元に戻ります。

コード

<div id="fullscr" style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #ffffffe0; z-index: 15; display: none;"><span id="fullscrclose" style="position: absolute; top: 50px; right: 10px; background-color: white; padding: 5px; border-radius: 5px; border: 1px solid black;">閉じる</span>
<br /><br />ここに、フルスクリーンで見せたい内容を記述します。<br /><br />何を書くか迷っちゃいますね^^;;;
</div>
<p><span id="fullscropen" style="border-radius: 5px; border: 1px solid black; background-color: white; padding: 5px;">開く</span></p>
<script>// <![CDATA[
fullscropen.addEventListener('click',function(){fullscr.style.display='block';},false);
fullscrclose.addEventListener('click',function(){fullscr.style.display='none';},false);
// ]]></script>

使い方

上記のコードを、はてなブログのHTML編集画面にコピペして、赤文字部分を好きな内容に書き換える事で使用できます。

「開く」「閉じる」の文言も好きな言葉に変更してもOKです^^

CSS装飾・仕組みに関係ある部分と関係ない部分

まず、フルスクリーンの大きな枠となる部分、

<div id="fullscr" style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #ffffffe0; z-index: 15; display: none;">

赤文字で示した部分は「画面固定、フルスクリーンサイズで表示。最初は非表示」という設定を行っている部分なので、変更しない方が良いかと思います。

background-color: #ffffffe0;

はバックの色を指定している部分で、#ffffff（真っ白）な色を不透過度e0で「ちょっとだけ透けて見える」ような設定にしています。

黒っぽくするなら #000000e0 、透けない白なら #ffffff などのように色を変更できます。

ボタンとなる、

<span id="fullscrclose" style="position: absolute; top: 50px; right: 10px; background-color: white; padding: 5px; border-radius: 5px; border: 1px solid black;">閉じる</span>

と、

<span id="fullscropen" style="border-radius: 5px; border: 1px solid black; background-color: white; padding: 5px;">開く</span>

の青文字部分は見やすいように装飾しているだけですので、好きな指定に変更しても差し支えありません^^