最近綺麗な画像を活用したフルスクリーンレイアウトのwebサイトが増えていますね！
私も最近、フルスクリーンレイアウトを実装することがあったのでその話をします。
今回は背景画像が全画面に表示され、コンテンツが縦横中央に配置されるだけのシンプルなレイアウトです。
Demo：
https://codepen.io/omaemi/full/rWgBGW/
".box" が画面フルサイズの要素で、".box" 直下の要素を縦横中央に配置します。
<div class="page">
<div class="box"> // 画面フルサイズの要素
// 中央寄せされるコンテンツ
<p>
LOREM IPSUM DOLOR SIT AMET,...
<p>
</div>
<div class="box">
</div>
.
.
手順は以下の３つです。
- 画面サイズいっぱいの要素 ".box" を作る
- ".box" に背景画像を指定する
- コンテンツの中身を縦横中央に配置する
1. 画面サイズいっぱいの要素 ".box" を作る
ここで使うのがvw(viewport width), vh(viewport height)という単位です。
これを使えばviewportをもとにサイズを指定でき、
画面サイズの幅=100vw
画面サイズの高さ=100vh
が指定できます。画面サイズ半分の高さなら50vh。
vw, vhのブラウザ対応状況
・Can I Use
http://caniuse.com/#search=vw
これを知らない時はjsでウィンドウの高さをとってたなあ(遠い目)
ということで ".box" に100vh, 100vwを指定します。
.box {
width: 100vw;
height: 100vh;
}
デザインによってはこれでも良いのですが、スマホなど小さいウィンドウで見た時に100vhをはみ出てしまうことがある場合はmin-height: 100vh;とします。
.box {
width: 100vw;
height: auto;
min-height: 100vh;
}
2. ".box" に背景画像を指定する
".box" のサイズいっぱいに背景画像を表示させるため
background-size: cover;
を指定します。(縦横どちらかはみ出た方が切り取られる)
また、画像の中央を表示させます。
background-position: center;
.box {
background-size: cover;
background-position: center;
background-image: url('http://placeimg.com/850/530/animals');
}
3. コンテンツの中身を縦横中央に配置する
縦横中央に配置するために使うのがflexboxです。
画面サイズの要素 ".box" に対して、以下のプロパティを書くだけで、要素 ".box" 直下のコンテンツが縦横中央寄せされます。
.box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
/* 左右中央寄せ */
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
/* 上下中央寄せ */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
ちなみに左右は
justify-content: flex-start; // 左寄せ
justify-content: center; // 中央寄せ
justify-content: flex-end; // 右寄せ
```
上下は
align-items: flex-start; // 上寄せ
align-item: center; // 中央寄せ
align-item: flex-end; // した寄せ
で調整できます。
```position: absolute;```などで上下中央寄せするより直感的だし、absoluteだとコンテンツの量が多いと親要素からはみ出てしまうことがあるので、flexboxを使うことをオススメします！
flexboxのブラウザ対応状況
・Can I Use
http://caniuse.com/#search=flexbox
あとはスマホで見た時、コンテンツが多い時にもギチギチになってしまわないように、paddingをしっかりとって終わりです！
```
.box {
padding: 30px;
box-sizing: border-box;
}
```
あと、どうやらiOSでiframeのスクロールが効かない問題があるらしく、".box" の親要素 ".page"に
```
.page {
height: 100vh;
overflow: scroll;
}
```
を指定していますが、iframeで埋め込まない場合はおそらくこれはなくてOKです！
ソースコード：
https://codepen.io/omaemi/pen/rWgBGW/
遅れてしまってすいませんでした。
メリークリスマスイブ☆