フルスクリーンレイアウトのデモ

HTMLの用意

ベースとなるHTMLは以下の通りとします。「2つのp要素を含んだ、3つのdiv要素」を用意します。それぞれのdiv要素をフルスクリーンサイズにして縦横中央配置にするのが目的となります。

<div class="box__area">
  <div class="box box__bg_photo">
    <p>aaa</p>
    <p>bbb</p>
  </div>
  <div class="box">
    <p>aaa</p>
    <p>bbb</p>
  </div>
  <div class="box">
    <p>aaa</p>
    <p>bbb</p>
  </div>
</div>

【Step 1】 魔法の単位”vw”, “vh”で要素の幅と高さを常に画面の高さに保つ

要素をフルスクリーン（全画面）サイズにするには、以下の指定でOKです。

.box {
  width: 100vw;
  height: 100vh;
}

幅と高さの単位 “vw” / “vh”

使用しているプロパティはお馴染みの”width”と”height”です。ここでのポイントは、“width”、”height”に指定している値の単位“vw”と“vh”です。見慣れない人もいるかと思いますが、これも”px”などと同じ列記としたcssで使える値の単位となります。

詳細は以下を見ていただければと思いますが、要はviewportの幅（width）と高さ（height）を表す単位となります。viewportの1/100の値がそれぞれ1vw、1vhとなります。つまり100vwと100vhで画面サイズと同じサイズになるというわけです。

• <length> – CSS | MDN
• Viewport-percentage lengths: the vw, vh, vmin, vmax units – W3C
• [CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス

ブラウザの対応状況は以下の通りです。

• Viewport units: vw, vh, vmin, vmax – Can I use…

コンテンツが要素の領域をはみ出してしまったら…

vw、whは画面サイズに合わせてリアルタイムで値を変更していくので、コンテンツ量が多いと、画面を狭めたときに要素の領域をはみ出してしまう場合があります。その場合は、以下のようにメディアクエリを使って画面サイズがある一定の値を下回ったら、要素の幅と高さを絶対値で指定するようにします。

.box {
  width: 100vw;
  height: 100vh;
}
@media screen and (max-width: 320px) and (max-width: 480px) {
  .box {
    width: 320px;
    height: 480px;
  }
}

それから、widthを100vwで指定すると、（上記デモでもそうなってしまっていますが）縦のスクロールバーが表示された場合、横のスクロールバーも表示されてしまうので、横幅は常に100%で指定する方がよいかなと思います。

これでほぼほぼフルスクリーンレイアウトの完成です。しかも驚くべきことにリアルタイムなリサイズにも対応しています。自分はよくこれをJavaScriptで実装していました…。

【Step 2】 “flexible box (flexbox)”で縦横中央配置を実現

フルスクリーン（全画面）レイアウトでは、縦横中央配置がしっくりくるかと思います。縦横中央配置の実装方法はpositionプロパティは使う方法などいろいろやり方はありますが、今回は“flexible box (flexbox)”を使った方法を紹介したいと思います。

“flexbox”を使って縦横中央配置を実装する方法は以下の通りとなります。

.box {
  display: flex; /* 要素をflexboxに対応させる */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  flex-direction: column; /* 子要素の並びを上から下にする（要素の改行に対応） */
}

スマホやらIEやらで対応させるようにベンダープレフィックスをつけたりすると、以下のようになります。

.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

“flexible box (flexbox)”

flexbox(可変ボックス)は、指定した要素をフレクシブルにし、滑らかに拡大縮小できる複雑なページのレイアウトに対応できるようにしてくれます。詳細は以下をご確認ください。

• CSS flexible box の利用 – Web developer guide | MDN
• CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG

上記の通り、flexboxは複数の要素をフレクシブルに配置するために使うためのものですが、縦横中央配置も簡単に実装することができるようになっています。

flexboxをマスターするには、覚えなくてはいけないプロパティが多く、骨が折れるので、縦横中央配置を実現するために必要なプロパティのみ紹介しておきます。詳細はリンク先のMDNの記事を参照してください。

ブラウザの対応状況は以下の通りです。

• Flexible Box Layout Module – Can I use…

【Step 3】 “background-size: cover;”で画面一杯に1枚の大きな画像（ヒーローイメージ）を表示

上記までの方法でほぼほぼフルスクリーンで縦横中配置のレイアウトは完成です。最後にフルスクリーンレイアウトの背景に大きな画像を、これまたフルスクリーンで、さらにウィンドウの中心に画像の中心を合わせて表示させる方法を紹介します。いわゆる「ヒーローイメージ」というものです。

CSSの指定は以下の通りとなります。

.box__bg_photo {
  background-image: url(http://jsrun.it/assets/Q/s/j/P/QsjPn);
  background-size: cover;
  background-position: center;
}

“background-size”プロパティ

“background-image”プロパティのオプションとなる“background-size”プロパティの使い方がポイントとなります。background-sizeプロパティは、背景画像の大きさを指定するためのプロパティとなります。

• background-size – CSS | MDN

“contain”と”cover”の違い

background-sizeの値を指定する際に紛らわしいのが、“contain”と“cover”だと思います。簡単にその違いを説明します。基本はどちらもアスペクト比を維持したまま拡大縮小されます。違いは、“contain”だと内包ブロック内で最大のサイズで描画され、“cover”だと背景配置領域を覆うように描画されます。

background-size: contain;

背景画像（1:1の正方形） | ウィンドウ

※background-repeat: no-repeat;を指定しています。

background-size: cover;

背景画像（1:1の正方形） | ウィンドウ

“background-position”プロパティでウィンドウの中心に配置

background-imageで指定した背景は、デフォルトだとウィンドウの左上を起点に表示されます。それを“background-position: center;”としてウィンドウの中心を起点に背景画像を表示するようにします。

• background-position – CSS | MDN

background-imageプロパティのオプションのブラウザの対応状況は以下の通りとなります。

• CSS3 Background-image options – Cab I use…

【おまけ】 “scroll-snap-*プロパティ”で全画面に対応させた要素単位でスクロールさせる

ここから現在一部ブラウザのみでしか使えない機能となるため、「おまけ」となります。これから紹介するscroll-snap-系のプロパティを使うと、全画面表示させた要素を、その要素ごとスクロールさせることができるようになります。上記のデモにも実装済みですが、現時点ではFirefox、Safari、IEなど一部のブラウザのみの対応となると思うので、それらのブラウザを使ってお試しください。

CSSの指定は以下の通りとなります。全画面表示に対応させた要素をラップしている親要素に対して以下のように指定します。

.box__area {
  height: 100vh;
  overflow-y: auto;

  /* スクロールのスナップ位置を100vhごとに設定 */
  -webkit-scroll-snap-points-y: repeat(100vh);
  -ms-scroll-snap-points-y: repeat(100vh);
  scroll-snap-points-y: repeat(100vh);

  /* スナップ位置に強制的にスクロール */
  -webkit-scroll-snap-type: mandatory;
  -ms-scroll-snap-type: mandatory;
  scroll-snap-type: mandatory;
}

“scroll-snap-*”プロパティ

scroll-snap-points-yプロパティは、縦方向のスクロールスナップ位置を指定するためのプロパティです。repeat()関数を使ってスナップ位置の間隔を指定します。今回は全画面単位でスクロールさせるので引数には100vhを指定しています。プロパティを指定している要素（コンテナ）内でのみ適用されます。

• scroll-snap-points-y – CSS | MDN

scroll-snap-typeプロパティは、スクロールした際にどのようにスナップするか指定するためのプロパティです。詳細は以下をご参照ください。

• scroll-snap-type – CSS | MDN
• Native CSS Scroll Snap Points – Serg Gospodarets Blog

ブラウザの対応状況は以下のとおりです。

• CSS Scroll snap points – Cab I use…

polyfill

かなり使えそうなプロパティですが、chromeで使えないのがかなり痛いです。ただ、chromeなど対応していないブラウザで使えるようにするための「polyfill」も作られています。これで一安心ってところでしょうか。基本的には、polyfillをページに読み込めば良いということですが、特定のclass名などをつける必要があったりします。詳細は以下をご確認ください。

• zigotica/scrollSnapPointsPolyfill – GitHub

ちなみに今回は縦方向のスクロールについて紹介しましたが、横方向のスクロールも実装可能です。

まとめ

フルスクリーンレイアウトを実現するだけなら、要素の幅と高さに100vhと100vwを指定するだけで済むのは驚きです。とても簡単にフルスクリーンレイアウトは実装できてしまいますね。あとは、実装したフルスクリーンレイアウトにJavaScriptを使った機能をつけてあげると、さらに使い勝手のよいページにすることができるようになるかと思います。それには、以下のページが参考になります。

• シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋

何かとJavaScriptでやりがちですが、CSSだけでできることも調べればいくらでもあります。そんなモダンなCSSに関しては、以下のオライリーの本がとても参考になります。もちろん今回紹介したテクニックもちゃんと載っています。最後に紹介しておきます。