フルスクリーンレイアウト - 実践

(2020-06-24 加筆)

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

• 背景画像を固定させて、スクロールしてもついてくるレイアウトのことです。
• パララックスデザイン：背景を固定して前面の要素が動きます。

実践

• テキストはアタリ、画像は個別に用意します。
  • 背景画像のサイズは：1920×1280pxで用意します。

例

解答

デモページ

ポイント

• トップのロゴは、編集できるフリー素材を活用して作成します。

blog.spoongraphics.co.uk

• bodyに背景画像を設置して、スクロールしても画像が残るように固定します。

body {
  width: 100%;
  height: 100vh;/* 画面に対する高さの割合100% */
  background: url(../img/people-2591838.jpg) no-repeat center center;/* 横縦中央位置に配置 */
  background-attachment: fixed;/* スクロールのとき画像が固定_囲みが長くてもずっと表示できる */
  background-size: cover;/*背景画像の縦横の長い方を基準に、縦横比を保ったまま表示_画面サイズによっては、縦横どちらかがはみ出し、背景いっぱいに表示される */
  〜
}

• トップページの縦横中央にロゴを配置し、見やすく調整します。

.header {
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.35);/* ロゴを見やすくするため背景画像の上に黒の透過を入れる */
  position: relative;/* 縦横中央配置のために、親要素に基準を置く */
}
.logo {
  width: 500px;
  height: 372px;/* 縦横比の高さの実数を入れないと中央にならない */
  position: absolute;/* 縦横中央配置の記述 */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto ;
  opacity: .85;/* ロゴ自体に抜け感を出すため少し透過させる */
}

• iPhoneで実機確認したときに、background-attachment:fixed;が効かなかったので、別の方法で対応します。

@media screen and (max-width: 480px) {
  /* 
  iPhoneでbackground-attachment:fixed;が効かない対処法
  ・位置を固定した要素をコンテンツの後ろに配置
  */
  body:before {
  content: "";
  display: block;
  position: fixed;/* 要素を固定 */
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background: url(../img/people-2591838.jpg) no-repeat center center;
  background-size: cover;
  }
}

＜参考サイト＞

shig.starfree.jp
y-com.info