最近綺麗な画像を活用したフルスクリーンレイアウトの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> . . 手順は以下の3つです。 画面サイズいっぱいの要素 ".box" を作る ".