【HTML】背景画像だけ動かないアレの作り方

こんにちは、コンスキです。

今回はおしゃれなサイトでよく見かける背景画像だけ動かないアレの作り方をご紹介します。

作り方を知りたかったのですが、ずっと後回しにして調べていなかったので、作り方をまとめることで自分の学びにしたいと思います。

背景画像だけ動かないアレとは
作り方
- HTML
- CSS
CSSで何をやったの？
おわりに

背景画像だけ動かないアレとは

アレと言われてもわからないとお思うので実際にどんなものか見てみましょう。

このようなデザインをこれまでに見かけた事はありませんか？

実はこのようなデザインには、「パララックスデザイン」という名前があるんです。

私は最近知りました。

パララックスデザインのパララックス（Parallax）とは、日本語に訳すと「視差」になります。

視差は視点によって天体や物体の位置の見え方が変わることを表す言葉です。

HTMLとCSSだけで作れるのでぜひ作り方を確認してみてください。

作り方

機能だけを使えるようにするただけの最小限のコードがこちらになります。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>パララックスデザイン</title>
  <link rel="stylesheet" href="parallax.css">
</head>
<body>
  <div>セクション1</div>
  <div class="parallax"></div>
  <div>セクション2</div>
</body>
</html>

CSS

body,
html {
  height: 100%;
  margin: 0 auto;
}
 
/*動かなくしたい背景画像*/
div {
  box-sizing: border-box;
  height: 100%;
}
.parallax {
  background-image: url('背景画像のURL');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

背景を固定するという機能だけであれば、これだけ少ないコードで実現できます。