HTMLとCSSでできるパララックススクロール｜基本の作成方法から応用まで徹底解説！

2025年10月20日

生徒

ペン博士！Webサイトにパララックス効果を入れてみたいんですが、作り方が分からなくて困っています……。

ペン博士

パララックス効果じゃな！仕組みさえ理解すれば、初心者でもすぐに作れるぞ！しっかり覚えていくんじゃぞ！

生徒

そうなんですね！ありがとうございます！

スクロールに合わせて背景が動く「パララックス効果」を取り入れたいけれど、HTMLやCSSでどう作ればいいのかわからない…と悩んでいませんか？
この記事では、パララックス効果の基本構造から実際のコード例、デザインに合わせた応用方法までをわかりやすく解説します。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

片山さん
妊娠をきっかけに、子どものためにもどこでも働けるスキルを身に付けたいと考える。そこで、オンラインスクールのfammで1ヶ月間Web制作の勉強を開始。その後、独学で勉強に励むも限界を感じ、案件保証が魅力のWithCodeへ入学し、稼げる力を身に付けることができた。現在は副業として稼ぐ力を身に付け、10件以上の案件を担当するまでに成長した。

詳しくはこちらの記事をご覧ください。

片山さんの主な制作実績はこちら

信用力アップを目的にした新規HP制作

株式会社かぶらや様

企業ブランディング向上を目的にした新規HP制作

株式会社SOLIS 様

パララックス効果とは

パララックス効果は、Webデザインで注目されている動的な演出手法の一つです。
スクロールやマウス操作に合わせて、背景や前景など複数の層が異なる速度や方向で動きます。
これにより、ユーザーに奥行きや立体感、さらにはストーリー性を感じさせることが可能です。

静的なページでも動きを取り入れられるため、企業サイトやポートフォリオで広く採用されています。
HTMLとCSSだけで実装できる手軽さも、人気の理由の一つです。

パララックス効果の基本構造と作成方法

ペン博士

ここでは、基本の「固定背景タイプ」によるパララックス効果を実装するぞ！
背景を固定すると、スクロールしても奥の画像は動かず、手前のコンテンツだけが流れて見えるんじゃ！

HTML

<div class="parallax-section"></div>
<div class="content-section">スクロールするコンテンツ</div>
<div class="parallax-section"></div>

CSS

body,
html {
  height: 100%;
  margin: 0 auto;
  letter-spacing: 2px;
  font-size: 10px;
}
 
/*セクションの基本レイアウト*/
div {
  box-sizing: border-box;
  color: #FFF;
  font-size: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 5%;
}
/*パララックス用の背景レイヤー*/
.parallax-section {
  background-image:url('https://picsum.photos/id/1015/1600/1000');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
 
/*スクロールするコンテンツ*/
.content-section {
  background-color: #555;
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

「.parallax-section」に「background-attachment: fixed;」を指定することで、背景がスクロールに追従せず、奥に留まります。
これにより、手前の要素だけが動いて見え、ページに奥行きと立体感を与える視差効果を与えることができます。

生徒

なるほど！HTMLとCSSだけで、こんな立体的な動きを出せるなんてびっくりです！

ペン博士

そうじゃろう？パララックスの肝は、「スクロールによって背景と前景の動きがずれること」なんじゃ。

デザインに合わせたパララックス効果の応用テクニック

ペン博士

ここからは、デザインに合わせたパララックス効果の応用テクニックを紹介するぞ！
「.content-section」と「.parallax-section」の数や配置を変えるだけで、スクロール時の見え方がガラッと変わるんじゃ！
これがアクセントになって、長いページでもリズムが生まれるぞ！

HTML

<div class="content-section1">スクロールするコンテンツ１</div>
<div class="parallax-section img-section-01">固定背景１</div>
<div class="content-section2">スクロールするコンテンツ２</div>
<div class="parallax-section img-section-02">固定背景２</div>
<div class="content-section3">スクロールするコンテンツ３</div>
<div class="parallax-section img-section-03">固定背景３</div>

CSS

body,
html {
  height: 100%;
  margin: 0 auto;
  letter-spacing: 2px;
  font-size: 10px;
}

/*セクションの基本レイアウト*/
div {
  box-sizing: border-box;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/*パララックス用の背景レイヤー*/
.parallax-section {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 50dvh; /* 画面の半分 */
  font-size: 5rem; /* ← 他サンプルと統一 */
}

/* 各背景の画像 */
.img-section-01 { background-image: url('https://picsum.photos/id/1018/1600/1000'); }
.img-section-02 { background-image: url('https://picsum.photos/id/1003/1600/1000'); }
.img-section-03 { background-image: url('https://picsum.photos/id/1036/1600/1000'); }

/*スクロールするコンテンツ*/
.content-section1 { background-color: #555; min-height: 60dvh; font-size: 5rem; }
.content-section2 { background-color: #555; min-height: 60dvh; font-size: 5rem; }
.content-section3 { background-color: #555; min-height: 60dvh; font-size: 5rem; }

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

このサンプルでは、「.parallax-section」の高さを 50dvh に設定しています。
そのため、そのため、背景が画面全体を覆うのではなく、コンテンツの合間に短く差し込まれる構成になります。

高さを抑えることで、背景が主役ではなくアクセントとして機能し、文章の区切りやセクション転換を自然に演出できます。

生徒

応用テクニックって、デザインによって印象が全然変わるんですね！

ペン博士

その通りじゃ。どの速度・距離で動かすかで、サイトの雰囲気ががらっと変わるんじゃよ。

複数背景を使ったパララックス効果の演出

ペン博士

複数の固定背景をつなげて配置すると、スクロールに合わせて背景が切り替わるパララックス演出が作れるぞ！
静止していた背景が次々と入れ替わるから、まるでページ全体が動いているように見えるんじゃ！

HTML

<div class="parallax-section img-section-01">固定背景１</div>
<div class="parallax-section img-section-02">固定背景２</div>
<div class="parallax-section img-section-03">固定背景３</div>
<div class="parallax-section img-section-04">固定背景４</div>
<div class="parallax-section img-section-05">固定背景５</div>

CSS

body,
html {
  height: 100%;
  margin: 0 auto;
  letter-spacing: 2px;
  font-size: 10px;
}

/*セクションの基本レイアウト*/
div {
  box-sizing: border-box;
  color: #FFF;
  font-size: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 5%;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/*パララックス用の背景レイヤー*/
.parallax-section {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 各背景の画像 */
.img-section-01 { background-image: url('https://picsum.photos/id/1018/1600/1000'); }
.img-section-02 { background-image: url('https://picsum.photos/id/1003/1600/1000'); }
.img-section-03 { background-image: url('https://picsum.photos/id/1036/1600/1000'); }
.img-section-04 { background-image: url('https://picsum.photos/id/1040/1600/1000'); }
.img-section-05 { background-image: url('https://picsum.photos/id/1041/1600/1000'); }

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

このサンプルでは、複数の固定背景を上下に連続配置し、スクロールとともに背景が切り替わっていく構成を実現しています。

各「 .img-section-xx」に異なる背景画像を指定することで、自然なシーンの転換を表現することが可能です。
背景自体は動かないため、テキストやロゴを重ねても視認性が高く、シンプルながら高級感のあるデザインに仕上がります。

また、複数のセクションを続けて使うことで、ページ全体にリズムやストーリー性を持たせる演出も可能です。

生徒

ペン博士、パララックス効果の仕組みが分かりました！
背景の動きでこんなに印象が変わるなんてすごいですね！

ペン博士

うむ！見た目の演出だけでなく、ページ全体の流れやストーリー性も高められるんじゃ！
これを理解すれば、どんなWebサイトでもワンランク上のデザインに仕上げられるぞ！

生徒

ありがとうございます！この学びを今後のWebサイト制作に役立てます！

まとめ

本記事では、HTMLとCSSを使ったパララックス効果の作成方法について詳しく解説しました。
パララックス効果の基本構造から、デザインに合わせた応用テクニックまでのポイントを以下にまとめます。

・パララックス効果とは：背景と前景の動きをずらすことで、ページに奥行きや立体感を与える手法。
・基本構造の実装方法：「background-attachment: fixed;」を利用して、背景を固定しつつ手前の要素だけをスクロールさせる。
・デザイン応用のコツ：背景の高さを調整して短い差し込みを作ると、長いページでもリズムが生まれやすい。
・複数背景の演出：異なる背景画像を連続配置することで、スクロールに合わせて自然なシーン転換を演出できる。

これらを理解して活用すれば、HTMLとCSSだけで臨場感のある動きを取り入れたWebページを実装できます。
パララックス効果は、静的なサイトにも印象的な動きを加えられる便利な手法です。ぜひ、ご自身のWebデザインにも取り入れてみてください。