CSSだけで背景を固定するパララックス風スタイル【iPhone 対応】

2024/11/08 Web

Web ページで背景画像を固定するデザインを作りたいですか？

See the Pen parallax by MATSUDAI (@matsudai) on CodePen.

↑
こんな感じ！
イケてる感ありますよね！

この記事でわかること

iOS（iPhone）にも対応したCSSで背景を固定するコード
clip-path が背景画像に与える影響についての考え方

いわゆる
「パララックスデザイン」では
ありません

parallax の意味は、「視差」です。

単語

parallax：視差（weblio）

一般的に「パララックスデザイン」はスクロールに合わせて背景や要素が「異なる速度」で動くことで奥行きを感じる視覚効果です。今回の記事で取り上げるものは、いわゆるパララックスは、JavaScript を活用したスクロールするたびに各要素が違う速さで動いたりする最高にクールなデザインなのです！

本記事ではあくまでCSSだけで背景画像を固定するパララックス風のデザインです！ある意味最も原始的なパララックスデザインなのかもしれません。

まずは「parallax」という単語の意味と、Web デザインにおいてどういったものなのかを押さえておきましょう！

鍵となるは
clip-path プロパティ

背景画像を固定するには、
「疑似要素」と「position: fixed;」、
そして「clip-path: inset(0);」を
主に使い CSS を組み立てていきます！

このやり方では、iOS（iPhone）でもちゃんと背景画像が固定されるパララックス風バックグラウンドイメージを実現することが可能です！

順番に説明していきますね！

STEP.1 ボックスを用意する！

まず、固定した背景画像を見せたいエリアの“ボックス”を用意します。

ボックスと書きましたが、べつにコンテナでもエリアでもラッパーでもインナーでも、div でも header でも section でも！呼び方は何でもOK！要は、パララックス風スタイルを適用させていくための要素を決めちゃいましょう！

<div class="container">
  <div class="parallax-box-1">
    <h2>Parallax-1</h2>
    <p>Put any content or text here.</p>
    <p>This is the second paragraph.</p>
  </div>
</div>

今回は、
「palallax-box-1」というクラス名を付けた div 要素にスタイルを施していこうと思います。まずはサイズとかのスタイルを適当に入れちゃいます！

.parallax-box-1 {
  width: 500px;
  height: 400px;
  padding: 16px;
  box-sizing:border-box;
  color: #fff;
}

↑
なんの変哲もないただの“ボックス”ですね。
目指すところは、
この“ボックス”内だけから見える背景画像を用意して、そして位置を固定する。というイメージです。

STEP.2 背景画像だけの要素を用意する

「::before」or「::after」を使用して、背景画像だけの要素（疑似要素）を用意します。（個人的にafterがしっくりきましたが、どちらでも！）

.parallax-box-1::after {
}

疑似要素じゃなくてもできる。

背景画像用に空っぽのボックスを用意しても同じようにできますが、ロボット的（SEO的）にも、スクリーンリーダーのような支援技術的にも、意味のないコードになってしまうので、疑似要素を使用することをオススメします。

『疑似要素って何？』という方は、ぜひ下の記事を参考にしていただけたらと思います。

【CSS】見出しや目次の頭にアイコンを追加する【疑似要素】

さて

疑似要素を使うときの
必須のプロパティは何か。

覚えていますか？？

そう！ content プロパティです！
空っぽでノープロブレムなので記述してください！

content: '';

記述し忘れてソースにすら何も表示されず、なぜなぜ！？とトラブルの原因を探すひと手間になってしまうかもしれません！

そして
position: fixed;

を設定します。
これにより背景が固定されます。ここがパララックス風デザインの軸になる部分ですね。

付随して、位置も設定します。基本は画面左上から配置するためにtop: 0;、left: 0;でよいかと思います。サイズもきちんと設定しましょう！幅は基本はwidth: 100%;、height: 100%;、単位は % ではなく vh だったりを活用することで皆さんの求めているデザインを思い通りに実現できるかもしれません！

忘れがちなのが、
z-index プロパティです。このプロパティを設定することで、背景画像自体がコンテンツの上を覆ってしまわないように背景の位置（レイヤー）を指定します。値は、サイトやチームによっていろいろ決まりがあるかもしれませんが、サンプルではz-index: -10;にしています。

肝心の背景画像も入れていきましょう！
background-image: url( 任意の画像のURL );
background プロパティで一括指定ができますが、~~個人的に苦手なので、~~わかりやすさを重視して今回は分けました！！！

あとはお好みで細かいスタイルを設定を！
background-size: cover;はよく使われます。これは背景画像がボックス全体をカバーするために、背景画像の短い辺がボックスに合わせて自動調整される便利なスタイルです。

ここまでの CSS をまとめるとこんな感じ。

.parallax-box-1 {
  width: 500px;
  height: 400px;
  padding: 16px;
  box-sizing:border-box;
  color: #fff;
}

.parallax-box-1::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width:100%;
  height:100%;
  background-image: url( 任意の画像のURL );
  background-size: cover;
}

STEP.3 「clip-path」で表示領域を限定する

仕上げです！

clip-path プロパティを“親ボックス”に設定することで、そのボックス内だけ表示させる（ボックス外を非表示にする）ことが可能です。

記述は
clip-path: inset(0);

値についての詳しくは割愛しますが、かんたんに説明すると長方形の四辺からの距離が 0 の内側に切り抜く、つまりボックス全体を切り抜くというスタイルです。

これによって先ほどまで作ってきたコードに一体どういう影響があるのかというと……

まずイメージしてみてください！
とあるボックスの子要素として、背景画像がposition: fixed;（top: 0;、left: 0;、z-index:-10;、etc）として Web ページに張り付いてる状況を。

そのまま下にスクロールしていくと……。

背景画像はそのまま表示され続けます。

そこでボックスに clip-path プロパティを設定します。
すると、
ボックス外の表示が見えなくなります。

そして同じようにスクロールしていくと、やがてボックスが背景画像の上に重なり、そのボックス内にだけ背景画像が見えるというからくりなのです。

全部まとめたコードがこちらです。

<div class="container">
  <div class="parallax-box-1">
    <h2>Parallax-1</h2>
    <p>Put any content or text here.</p>
    <p>This is the second paragraph.</p>
  </div>
</div>

.parallax-box-1 {
  clip-path: inset(0);
  width: 500px;
  height: 400px;
  padding: 16px;
  box-sizing:border-box;
  color: #fff;
}

.parallax-box-1::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width:100%;
  height:100%;
  background-image: url( 任意の画像のURL );
  background-size: cover;
}

Parallax-1

Put any content or text here.

This is the second paragraph.

……。

いかがでしょうか。

……。

知りたかったこと、
知れましたか？

……。

え？
まだたりない？

ひょっとして、

２枚以上の固定した背景を
順番に、連続させて、
切り替わるように表示させたい！
しかも iOS でも使えて、
JavaScript にも頼らないやつぅ！

あなたが、
本当に知りたかったことは、
これではありませんか？！

それは、
「clip-path」によって実現可能なのです！！！

<div class="container">
  <div class="parallax-box-1">
    <h2>Parallax-1</h2>
    <p>Put any content or text here.</p>
    <p>This is the second paragraph.</p>
  </div>
  <div class="parallax-box-2">
    <h2>Parallax-2</h2>
    <p>Put any content or text here.</p>
    <p>This is the second paragraph.</p>
  </div>
</div>

.parallax-box-1,
.parallax-box-2 {
  clip-path: inset(0);
  width: 500px;
  height: 400px;
  padding: 16px;
  box-sizing:border-box;
  color: #fff;
}

.parallax-box-1::after,
.parallax-box-2::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  width:100%;
  height:100%;
  background-size: cover;
}
.parallax-box-1::after {
  background-image: url( 任意の画像のURL );
}
.parallax-box-2::after {
  background-image: url( 任意の画像のURL );
}

Parallax-1

Put any content or text here.

This is the second paragraph.

Parallax-2

Put any content or text here.

This is the second paragraph.

ボックスの兄弟を量産して、それぞれに別の background-image を指定してあげるだけで簡単に実現できます！

ぜひやってみてください！！！！

……。

ほんとにこんなに簡単に
解決できていいんかしら？

って感じで、
いろいろ調べつつテキトウにコードをいじってたら
なんかできちゃいました。（片手を首を添えながら。）

なんでこんな簡単なやりかたなのにググっても出てこないんだろ……。きっと何か罠があるのかもしれない……。いろいろ使いながら不具合があれば記事を修正したいと思います。

グッバイ
background-attachment

だって、
iOS で使えないのなら、
それはもう存在しないということと同じなんよっ！

それくらい iOS が世の中に浸透してしまったのだ。
~~IE のことは知らない。~~

スティーブ！
早くbackground-attachment プロパティを対応させて！
お願いします！
それが一番かんたんで、簡潔で、キレイなコードなのに！

なんのことか、
なんの茶番なのか、
さっぱりわからない方もいるかもしれません。

それは、
背景画像を固定する方法でググったら一番多く出てくる『background-attachment を使用した方法』がございやして、それは Windows などではイメージ通りのものが作れるのに、iOS では非対応という、恐ろしい罠があるのです！

その解決策として本記事のようなやり方や、そもそも JavaScript を使うやり方などがございます。本記事のやり方は、個人的には CSS だけで実現可能なパララックス風デザインの完全体（現時点で。）なのかなぁと思います。そして、さらなる力、より細かい動きを求めるのであるのであれば JavaScript に頼るのが良いと思います。

まとめ

CSS だけでパララックス風デザインを実現するためには、「疑似要素」と「positin: fixed;」、そして「clip-path: inset(0);」を主に使い CSS を組み立てていきます。これは2枚以上の連続した背景も対応してさらに iOS（iPhone）でも実現させることができる方法です。

とてもシンプルで、手軽にイケてる Web デザインにすることができますので、ぜひ参考にしてみてください。

参考・出典

・weblio. 「parallaxとは意味・読み方・使い方」. https://ejje.weblio.jp/content/parallax, 2024年11月8日閲覧。

・MDN. 「clip-path」. https://developer.mozilla.org/ja/docs/Web/CSS/clip-path, 2024年11月8日閲覧。

タグ：
CSS

CSSだけで背景を固定するパララックス風スタイル【iPhone 対応】

いわゆる「パララックスデザイン」ではありません

単語

鍵となるはclip-path プロパティ

STEP.1 ボックスを用意する！

STEP.2 背景画像だけの要素を用意する

疑似要素じゃなくてもできる。

【CSS】見出しや目次の頭にアイコンを追加する【疑似要素】

STEP.3 「clip-path」で表示領域を限定する

グッバイbackground-attachment

まとめ

参考・出典

関連投稿:

MATSUDAI

いわゆる
「パララックスデザイン」では
ありません

鍵となるは
clip-path プロパティ

グッバイ
background-attachment