【CSS初心者向け】パララックス効果の作り方を丁寧に解説｜background-attachment・translateZで奥行きを演出
「スクロールすると背景がゆっくり動くおしゃれなサイトを作りたい」
そんなときに使えるのが パララックス効果（Parallax Effect） です。
この記事では、CSSだけで実装できるパララックス効果の作り方を、初心者でもわかるように丁寧に解説します。
そのままコピー＆ペーストして使えるコードも紹介します！
目次
パララックスとは？
パララックスとは、「スクロールに合わせて背景や要素が異なる速度で動くことで、奥行きや立体感を表現するテクニック」です。
静的なページでも動きが加わることで、より印象的でスタイリッシュな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>
まとめ
| 方法 | 特徴 | 難易度 |
|---|---|---|
| background-attachment: fixed | 最も簡単。固定背景で奥行きを演出 | ★☆☆ |
| perspective + translateZ | モダンでモバイル対応しやすい | ★★☆ |
| 複数レイヤー | 立体感を強調。応用的 | ★★★ |
🎯まとめポイント
- 初心者はまず
background-attachment: fixedから試す - スマホ対応を考えるなら
translateZの方法が最適 - WebP画像で軽く＆
prefers-reduced-motionで配慮も忘れずに！
プログラミング備忘録
【CSS初心者向け】transformの使い方を徹底解説｜画像や文字を動かす・回す・拡大する基本まとめ2025
CSSのtransformは、要素を移動・回転・拡大・傾けることができる便利なプロパティです。本記事では、初心者にもわかるようにtranslateやrotate、scaleなどの使い方を図解・…
プログラミング備忘録
【初心者必見】ナビゲーションメニューでスムーズスクロールを完全ガイド｜HTML・CSS・JavaScript徹底解説2…
初心者でも簡単に理解できる、ナビゲーションメニューから各セクションへスムーズスクロールさせる方法を解説。HTML・CSS・JavaScript対応で、最新2025年版の完全ガイド。…
その他関連記事はこちら→プログラミング備忘録
コメント