どうも！LSSです！！
以前、CSS+JavaScriptネタで、
という記事を公開しました。
「ブログレイアウトを無視して画面いっぱいに表示を呼び出す」というもので、この時はJavaScriptを使用して実現していましたが、
に書いたような「checkboxとlabelを使う」方法だと、CSSだけですっきり実現できるなじゃないかな？と思い、やってみました。
ついでに、
- 閉じる時は画面のどこを押しても閉じる
- 表示したい内容の中央寄せ
も実装しています^^
フルスクリーン表示
コード
<style>
#fullscrchk{display:none;}/*管理用チェックボックスを非表示にする*/
#fullscrlbl{/*フルスクリーン表示させる枠。*/
display:none;/*非表示化*/
position:fixed;/*fixedにする事でスクロールに関係なく定位置表示*/
z-index:100;
top:0px;
left:0px;
width:100%;
height:100%;/*topとleftを0pxにする事で左上を起点とし、widthとheightを100%にする事で全画面サイズ*/
background-color:#ffffffc0;/*#ffffffの色をc0の不透明度で表示。00にすると完全透明、ffにすると完全不透明*/
}
#fullscrchk:checked~#fullscrlbl{/*チェックONの時のみ有効*/
display:block;/*display:none;だったものをblockとして表示させる*/
}
#fullscrspn{/*フルスクリーン表示枠の中の、中央に表示する内枠*/
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
}
</style>
<p>
<input id="fullscrchk" type="checkbox" />
<label for="fullscrchk">ここをクリック</label>
<label id="fullscrlbl" for="fullscrchk"><span id="fullscrspn">わっ！<br />びっくりさせちゃいました？<br />どこでもクリックすると元に戻ります。</span></label></p>
使い方
「コード」の全文をコピーし、HTML内に貼り付けてください。
青文字の「ここをクリック」の言葉や、赤文字の「わっ！<br />びっくりさせちゃいました？<br />どこでもクリックすると元に戻ります。」をお好きな内容に書き換えて使用できます。
画像の<img>タグを入れて画像を大きく表示するのも良さそうですね^^
内容にHTMLタグを使用する事もできますが、はてなブログで使用する場合はこの内容に<p>タグや<div>タグが入らないようにしたほうが良さそうです。
その他、今回珍しくコード内にコメントを入れてみました。
何かの参考になれば幸いです。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
