シングルページのWebサイトを作るとき、要素をフルスクリーンで表示させるレイアウトを取り入れることもあるかと思います。フルスクリーンレイアウトを実装する際に、ウィンドウの幅や高さをJavaScriptを使って取得したりしていましたが、CSSを使うとそんなことをする必要もなく、いとも簡単に実装できることが最近わかったので紹介します。ついでにフルスクリーンレイアウト時に使いたい「縦横中央配置」、「背景画像のフルスクリーン表示」の実装方法についても紹介します。 フルスクリーンレイアウトのデモ http://codepen.io/maechabin/full/MmOGWb/HTMLの用意ベースとなるHTMLは以下の通りとします。「2つのp要素を含んだ、3つのdiv要素」を用意します。それぞれのdiv要素をフルスクリーンサイズにして縦横中央配置にするのが目的となります。 <div class="bo
![CSSでフルスクリーン(全画面) + 縦横中央配置レイアウトを作る【3ステップ + おまけ】](https://cdn-ak-scissors.b.st-hatena.com/image/square/29c3a3053301e38faea72c4e55bb6c2fdfb9076d/height=288;version=1;width=512/https%3A%2F%2Fmae.chab.in%2Fwp-content%2Fuploads%2F2015%2F09%2Ffullscreen_view-1024x543.png)