【CSS初心者向け】パララックス効果の作り方を丁寧に解説｜background-attachment・translateZで奥行きを演出

2024年12月29日2025年11月12日

【CSS初心者向け】パララックス効果の作り方を丁寧に解説｜background-attachment・translateZで奥行きを演出

「スクロールすると背景がゆっくり動くおしゃれなサイトを作りたい」
そんなときに使えるのが パララックス効果（Parallax Effect） です。

この記事では、CSSだけで実装できるパララックス効果の作り方を、初心者でもわかるように丁寧に解説します。
そのままコピー＆ペーストして使えるコードも紹介します！

TOC

パララックスとは？

パララックスとは、「スクロールに合わせて背景や要素が異なる速度で動くことで、奥行きや立体感を表現するテクニック」です。

静的なページでも動きが加わることで、より印象的でスタイリッシュなWebサイトに仕上がります。

CSSでパララックスを作る主な方法

CSSで作る方法はいくつかありますが、ここでは初心者でも扱いやすい3つの方法を紹介します。

最も簡単：background-attachment: fixed を使う方法
モダン：perspective + translateZ を使う方法
応用：複数レイヤーで奥行きを強調する方法

方法①：background-attachment: fixed を使う（最も簡単）

See the Pen Untitled by 須山比佐代 (@awlsizua-the-scripter) on CodePen.

まずは一番シンプルなやり方です。

✔️ポイント

background-attachment: fixed を指定することで、背景が固定されて見える
スクロール時に前景だけが動くような効果になる

⚠️注意点

iPhoneなどの一部モバイルブラウザでは固定背景が無効になる
画像が大きすぎると表示が重くなるので最適化を行う

方法②：perspective + translateZ を使う（モバイルでも安定）

次は、CSSの3D変換を活用したモダンなパララックス表現です。

See the Pen Untitled by 須山比佐代 (@awlsizua-the-scripter) on CodePen.

✔️ポイント

perspective: 1px により視差効果を生み出す
モバイルでも動作しやすく、固定背景より滑らか

方法③：複数レイヤーで奥行きを強調する

背景画像を複数重ねて、それぞれの奥行きを変えることで立体的な動きを表現できます。

See the Pen Untitled by 須山比佐代 (@awlsizua-the-scripter) on CodePen.

モバイル対応とパフォーマンスの注意点

スマホでは background-attachment: fixed が効かない場合がある
→ @media (max-width: 768px) で固定を解除しましょう。
画像サイズの最適化
→ WebPやAVIF形式を使うと軽くなります。
動きを減らしたいユーザーへの配慮 @media (prefers-reduced-motion: reduce) { .parallax__layer { transform: none !important; } }

コピペで使えるパララックス付きページ全体サンプル

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CSSだけで作るパララックス効果</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,'Noto Sans JP',sans-serif;}
.hero{height:80vh;background-image:url('your-image.jpg');background-size:cover;background-position:center;background-attachment:fixed;display:flex;align-items:center;justify-content:center;color:#fff}
.hero .inner{background:rgba(0,0,0,0.25);padding:2rem;border-radius:8px;text-align:center}
section.content{padding:3rem;line-height:1.8;}
@media (max-width:768px){
  .hero{background-attachment:scroll;}
}
</style>
</head>
<body>
  <section class="hero">
    <div class="inner">
      <h1>ようこそ</h1>
      <p>CSSだけで作ったシンプルなパララックスの例です</p>
    </div>
  </section>
  <section class="content">
    <h2>パララックスとは？</h2>
    <p>背景と前景が異なる速度で動くことで、奥行きを感じさせる表現です。</p>
  </section>
  <section class="hero" style="background-image:url('your-image2.jpg');height:60vh;">
    <div class="inner"><h2>別のパララックスエリア</h2></div>
  </section>
</body>
</html>

Summary

方法	特徴	難易度
background-attachment: fixed	最も簡単。固定背景で奥行きを演出	★☆☆
perspective + translateZ	モダンでモバイル対応しやすい	★★☆
複数レイヤー	立体感を強調。応用的	★★★

🎯まとめポイント

初心者はまず background-attachment: fixed から試す
スマホ対応を考えるなら translateZ の方法が最適
WebP画像で軽く＆prefers-reduced-motionで配慮も忘れずに！

Programming Notes

【CSS初心者向け】transformの使い方を徹底解説｜画像や文字を動かす・回す・拡大する基本まとめ2025 CSSのtransformは、要素を移動・回転・拡大・傾けることができる便利なプロパティです。本記事では、初心者にもわかるようにtranslateやrotate、scaleなどの使い方を図解・…

Programming Notes

【初心者必見】ナビゲーションメニューでスムーズスクロールを完全ガイド｜HTML・CSS・JavaScript徹底解説2… 初心者でも簡単に理解できる、ナビゲーションメニューから各セクションへスムーズスクロールさせる方法を解説。HTML・CSS・JavaScript対応で、最新2025年版の完全ガイド。…

その他関連記事はこちら→Programming Notes

Let's share this post !