TIPSWEB制作の備忘録

ホーム > WEB制作の備忘録 > パララックスをHTMLとCSSで作ってみる

パララックスをHTMLとCSSで作ってみる

公開：2026.02.23　

HTML&CSSでなんちゃってパララックス

パララックスとは、視差効果のことです。
背景が固定されていて、その上を別のコンテンツがスクロールしているような状態をイメージしてみてください。たぶんだいたいそれで合ってます。
今回は、HTML&CSSでなんちゃってパララックスを作ってみます。
実際の作成例はこちら。
背景画像は、今年の初日の出を見に行ったときの写真を加工したものです。

背景色をつけている部分です。
背景画像の要素が見えないようにしています。
背景色をつけていない部分です。
背景部分の要素が見えるようになっています。
背景色をつけている部分です。
背景画像の要素が見えないようにしています。

なぜなんちゃってパララックスかというと、jsも使ったパララックスはスクロールに応じて背景も少しずつ動いたりします。
今回はHTMLとCSSなので、背景は動かないため、「なんちゃって」パララックスと呼んでいます。

HTMLとCSSはこちらです。
ページ内でちょっと変わった動きをさせたいな～というときに使ったりしていました。
では、こちらのHTMLとCSSについて簡単に説明していきます。
※CSSでrem指定しているところは、使用する人の環境によって数値が変わりますのでご注意ください。
※このwebサイトでは、1rem＝10pxくらいのサイズになります。

HTML
<div class="parallax-contents-scroll-wrap">
	<div class="parallax-contents-inner">
		<div class="parallax-contents-scroll-img" style="background-image: url(画像のパスが入ります);"></div>
		<div class="parallax-contents-inner-white">
			背景色をつけている部分です。<br>背景画像の要素が見えないようにしています。
		</div>
		<div class="parallax-contents-inner-main">
			背景色をつけていない部分です。<br>背景部分の要素が見えるようになっています。
		</div>
		<div class="parallax-contents-inner-white">
			背景色をつけている部分です。<br>背景画像の要素が見えないようにしています。
		</div>
	</div>
</div>
CSS
.parallax-contents-scroll-wrap {
  -webkit-transform: translate(0);
          transform: translate(0);
  position: relative;
  z-index: 1;
}

.parallax-contents-inner {
  width: 100%;
  height: 50rem;
  overflow: auto;
  text-align: center;
}

.parallax-contents-scroll-img {
  content: " ";
  width: 100%;
  height: 50rem;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  z-index: -1;
}

.parallax-contents-inner-white {
  background-color: #fff;
  padding-top: 20rem;
  padding-bottom: 20rem;
}

.parallax-contents-inner-main {
  padding-top: 20rem;
  padding-bottom: 20rem;
}

パララックスのHTMLの説明

今回はこのページ内で作成例を表示するために、「parallax-contents-scroll-wrap」内でパララックスが見えるようにしました。

「parallax-contents-inner」がスクロールする部分。
その中に背景画像用の要素「parallax-contents-scroll-img」が入ります。
今回はstyleで背景画像を指定しましたが、CSSの方で書いても大丈夫です。

「parallax-contents-inner-white」が背景色をつけている部分。
このように、背景色がついている部分では背景画像が見えません。
「parallax-contents-inner-main」が背景色をつけていない部分です。
ここは背景画像が見えるようになります。

HTML
<div class="parallax-contents-scroll-wrap">
	<div class="parallax-contents-inner">
		<div class="parallax-contents-scroll-img" style="background-image: url(画像のパスが入ります);"></div>
		<div class="parallax-contents-inner-white">
			背景色をつけている部分です。<br>背景画像の要素が見えないようにしています。
		</div>
		<div class="parallax-contents-inner-main">
			背景色をつけていない部分です。<br>背景部分の要素が見えるようになっています。
		</div>
		<div class="parallax-contents-inner-white">
			背景色をつけている部分です。<br>背景画像の要素が見えないようにしています。
		</div>
	</div>
</div>

パララックスのCSSの説明

実際の制作の際は、普通に「position: fixed」して背景画像を配置、背景画像を表示したくない範囲だけ背景色をつける…というような状態にしていました。
今回はこのページ内で作成例を表示するため、いつもとは違った設定を追加しています。

ページ内での作成例表示のための設定

CSS
.parallax-contents-scroll-wrap {
  -webkit-transform: translate(0);
          transform: translate(0);
  position: relative;
  z-index: 1;
}
.parallax-contents-inner {
  width: 100%;
  height: 50rem;
  overflow: auto;
  text-align: center;
}

こちらは、このページ内で作成例を表示するための設定です。

この後「parallax-contents-scroll-img」の画像の説明をしますが、そこで「position: fixed」を指定しています。
「position: fixed」は通常親要素ではなく、表示されている画面を基準に配置してしまいます。
それでは今回の作成例の表示が難しいため、「parallax-contents-scroll-wrap」に「transform: translate(0)」を指定しました。
これで、この要素を基準に配置してくれます。

「parallax-contents-inner」は、パララックスの作成例を表示する範囲を設定しています。

背景画像の設定

CSS
.parallax-contents-scroll-img {
  content: " ";
  width: 100%;
  height: 50rem;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  z-index: -1;
}

背景画像の要素に「position: fixed」を設定して、スクロールしても表示位置は固定されるようにしました。

今回はこのページ内で表示するため、幅と高さを100%・50remにしています。
ですが、表示する画面のサイズに合わせるなら100vw・100vhの方がいいと思います。

「background-image」ですが、今回はHTMLの方で「style=”background-image: url(画像のパスが入ります);”」のような状態で指定しています。

更に「z-index: -1」を指定することで、他の要素よりも背面に表示されます。

背景画像を見せる範囲の設定

CSS
.parallax-contents-inner-white {
  background-color: #fff;
  padding-top: 20rem;
  padding-bottom: 20rem;
}

.parallax-contents-inner-main {
  padding-top: 20rem;
  padding-bottom: 20rem;
}

背景画像を見せたくない部分は「parallax-contents-inner-white」のように背景色を指定します。

逆に、背景画像を見せたい部分には背景色をつけません。

まとめ

以上、なんちゃってパララックスの作り方でした。
今回は、このページ内での作成例表示のための設定が入ってしまっているので、コピペでそのまま使うのは難しいかもですね。
こちらを参考にカスタマイズしてもらうような感じになりました。

背景色をつけている部分です。
背景画像の要素が見えないようにしています。
背景色をつけていない部分です。
背景部分の要素が見えるようになっています。
背景色をつけている部分です。
背景画像の要素が見えないようにしています。

HTMLとCSSだけでできますので、パララックス的なものを作りたいけどjsめんどくさい…というときにおすすめです。

今回のまとめ

  • 親要素を基準に「position: fixed」を使いたいときは、「transform: translate(0)」を指定する
  • 背景画像用の要素は「position: fixed」で表示位置を固定する
  • 背景画像用の要素に「z-index: -1」を指定して、他の要素の背面に表示させる
  • 背景画像の上に表示させる要素に背景色をつける／つけないで、背景画像を見せる範囲を決める

今回の参考サイト

チャット風デザインのHTML&CSS